javascript - FabricJs:在 FabricJs Canvas 中绘制按钮的网格/数组(p*p)

Question

我正在尝试在 FabricJs Canvas 内绘制按钮的网格/数组(p*p)。我能够创建所需的网格/数组。

但我无法在相同高度和宽度的 block 内绘制/放置按钮。

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 canvas 上下文或 FabricJs 上找到任何可以在网格/数组 block 内创建按钮的内容。

这种方法有什么方向吗？或任何其他在 FabricJs Canvas 中创建按钮数组的方法。

这是Image我的 Canvas 。基本上，我想创建一系列按钮，如 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包含一个 VS2015 解决方案，其中包含用于 typescript 应用程序的 asp.net mvc5 项目。