FabricJs: Нарисуйте сетку/массив (p * p) кнопок в FabricJs Canvas

Question

Я пытаюсь нарисовать сетку/массив (p * p) кнопок внутри холста FabricJs. Я могу создать желаемую сетку/массив.

Но я не могу нарисовать/разместить кнопки внутри блоков одинаковой высоты и ширины.

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 содержит VS2015 с проектом asp.net mvc5 для приложения с машинописными текстами.