FabricJs：FabricJsキャンバスにボタンのグリッド/アレイ（p * p）を描画します

Question

FabricJsキャンバス内にグリッド/アレイ（p * p）のボタンを描画しようとしています。私は希望のグリッド/アレイを作成することができます。

しかし、同じ高さと幅のブロック内にボタンを描く/配置することはできません。

HTML：

<div> 
<canvas id="canvas" width="500" height="500" style="border:1px solid #000000</canvas> 
</div> 
<button onclick="drawGrid()">Create Grid</button> 

スクリプト：

var canvas = new fabric.Canvas('canvas'); 
var currentCanvasWidth = canvas.width; 
var currentcanvasHeight = canvas.height; 
var context = canvas.getContext("2d"); 
var gridSize = 50; //decides the value of p(p = currentCanvasWidth/gridSize)) and the height and width of each block inside the p*p array 

function drawGrid(){ 

    // Drawing vertical lines 
    var x; 
    for (x = 0; x <= currentCanvasWidth; x += gridSize) { 
     context.moveTo(x + 0.5, 0); 
     context.lineTo(x + 0.5, currentcanvasHeight); 
    } 

    // Drawing horizontal lines 
    var y; 
    for (y = 0; y <= currentcanvasHeight; y += gridSize) { 
     context.moveTo(0, y + 0.5); 
     context.lineTo(currentCanvasWidth, y + 0.5); 
    } 

    gridSize = gridSize; 
    context.strokeStyle = "black"; 
    context.stroke(); 
} 

また、私はグリッド/アレイブロック内のボタンを作成するためのHTMLキャンバスのコンテキストまたはFabricJsには何も見つかっていません。

このアプローチの方向性はありますか？ FabricJs Canvas内にボタンの配列を作成するための他の方法があります。

ここは私のキャンバスのImageです。基本的には、TIC-TAC-TOE gridのようなボタンの配列を作成し、後でボタンをさまざまな色で塗りつぶして自分のシーンを表現したいと考えています。

Answer 1

おそらくあなたは、サブクラス化を使用して、孤立部品を作るためにfabric.rectから継承していますが、以下の実行ファイルのスニペットのようなものを探しているようだ必要があります。

var canvas = new fabric.Canvas('c'); 
 
canvas.setWidth(301); 
 
canvas.setHeight(301); 
 
canvas.setBackgroundColor("#ffffff", function() { }); 
 
for (var i = 0; i < 3; i++) { 
 
    for (var j = 0; j < 3; j++) { 
 
     var gOptions = { 
 
      width: 100, 
 
      height: 100, 
 
      top: 100 * j, 
 
      left: 100 * i, 
 
      hasControls: false, 
 
      stroke: '#000000', 
 
      fill: 'transparent', 
 
      lockMovementX: true, 
 
      lockMovementY: true, 
 
      borderColor: 'transparent', 
 
     }; 
 
     var rOptions = { 
 
      width: 100, 
 
      height: 100, 
 
      top: 100 * j, 
 
      left: 100 * i, 
 
      rx: 10, 
 
      ry: 10, 
 
      hasControls: false, 
 
      stroke: '#000000', 
 
      fill: 'transparent', 
 
      lockMovementX: true, 
 
      lockMovementY: true, 
 
      borderColor: 'transparent', 
 
      subType: 'button', 
 
      id: 'button_' + i + '_' + j 
 
    }; 
 
     var c = new fabric.Rect(gOptions); 
 
     var r = new fabric.Rect(rOptions); 
 
     r.setGradient('fill', { 
 
      type: 'linear', 
 
      x1: 0, 
 
      y1: -r.height/2, 
 
      x2: 0, 
 
      y2: r.height/2, 
 
      colorStops: { 
 
       0: '#fff', 
 
       1: '#eee' 
 
      } 
 
     }); 
 
     canvas.add(c); 
 
     canvas.add(r); 
 
    } 
 
} 
 
canvas.on('mouse:over', function (e) { 
 
    if (e.target) { 
 
     if (e.target.get('subType') == 'button') { 
 
      if (canvas.getActiveObject() == e.target) { 
 
       return; 
 
      } 
 
      e.target.setGradient('fill', { 
 
       type: 'linear', 
 
       x1: 0, 
 
       y1: -e.target.height/2, 
 
       x2: 0, 
 
       y2: e.target.height/2, 
 
       colorStops: { 
 
        0: '#eee', 
 
        1: '#fff' 
 
       } 
 
      }); 
 
      canvas.renderAll(); 
 
      e.target.hoverCursor = 'pointer'; 
 
     } 
 
    } 
 
}); 
 
canvas.on('mouse:out', function (e) { 
 
    if (e.target) { 
 
     if (e.target.get('subType') == 'button') { 
 
      if (canvas.getActiveObject() == e.target) { 
 
       return; 
 
      } 
 
      e.target.setGradient('fill', { 
 
       type: 'linear', 
 
       x1: 0, 
 
       y1: -e.target.height/2, 
 
       x2: 0, 
 
       y2: e.target.height/2, 
 
       colorStops: { 
 
        0: '#fff', 
 
        1: '#eee' 
 
       } 
 
      }); 
 
      canvas.renderAll(); 
 
      e.target.hoverCursor = 'pointer'; 
 
     } 
 
    } 
 
}); 
 
canvas.on('object:selected', function (e) { 
 
    canvas.getObjects().forEach(function (item) { 
 
     if (e.target.get('subType') == 'button') { 
 
      item.setGradient('fill', { 
 
       type: 'linear', 
 
       x1: 0, 
 
       y1: -item.height/2, 
 
       x2: 0, 
 
       y2: item.height/2, 
 
       colorStops: { 
 
        0: '#fff', 
 
        1: '#eee' 
 
       } 
 
      }); 
 
      canvas.renderAll(); 
 
     } 
 
    }); 
 
    if (e.target.get('subType') == 'button') { 
 
     console.log('button ' + e.target.id + ' was clicked'); 
 
     e.target.setFill("#cc0000"); 
 
    } 
 
});

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> 
 
<style> 
 
.snippet-code{ 
 
    height: 310px; 
 
} 
 
</style> 
 
<canvas id="c" style=""></canvas>

が

bitbucket repositoryが含まれていますtypescriptアプリケーション用のasp.net mvc5プロジェクトを使用したVS2015ソリューション