在Fabric.jscanvas上添加网格

我刚开始使用Fabric.js（我不得不说，我印象深刻）。

我想在Fabric对象上添加一个网格。 在下面的代码中，我将网格canvas正好放在Fabriccanvas上。 这里的问题是，我现在无法移动我的布料对象！

        
   
  //<![CDATA[ $(window).load(function(){ $(document).ready(function () { function renderGrid(x_size,y_size, color) { var canvas = $("#myCanvas").get(0); var context = canvas.getContext("2d"); context.save(); context.lineWidth = 0.5; context.strokeStyle = color; // horizontal grid lines for(var i = 0; i <= canvas.height; i = i + x_size) { context.beginPath(); context.moveTo(0, i); context.lineTo(canvas.width, i); context.closePath(); context.stroke(); } // vertical grid lines for(var j = 0; j  var canvas = new fabric.Canvas('rubber'); canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;    

我希望在Fabric本身有一种方法可以做到这一点。

任何帮助都会很棒，谢谢！

Answer 1

我希望这能帮到您 – –

 function draw_grid(grid_size) { grid_size || (grid_size = 25); currentCanvasWidth = canvas.getWidth(); currentcanvasHeight = canvas.getHeight(); // Drawing vertical lines var x; for (x = 0; x <= currentCanvasWidth; x += grid_size) { this.grid_context.moveTo(x + 0.5, 0); this.grid_context.lineTo(x + 0.5, currentCanvasHeight); } // Drawing horizontal lines var y; for (y = 0; y <= currentCanvasHeight; y += grid_size) { this.grid_context.moveTo(0, y + 0.5); this.grid_context.lineTo(currentCanvasWidth, y + 0.5); } grid_size = grid_size; this.grid_context.strokeStyle = "black"; this.grid_context.stroke(); } 

Answer 2

这两行代码将起作用：

 var gridsize = 5; for(var x=1;x<(canvas.width/gridsize);x++) { canvas.add(new fabric.Line([100*x, 0, 100*x, 600],{ stroke: "#000000", strokeWidth: 1, selectable:false, strokeDashArray: [5, 5]})); canvas.add(new fabric.Line([0, 100*x, 600, 100*x],{ stroke: "#000000", strokeWidth: 1, selectable:false, strokeDashArray: [5, 5]})); } 

Answer 3

较短版本，更复制/粘贴更通用：

 var oCanvas; // must be your canvas object var gridWidth; // <= you must define this with final grid width var gridHeight; // <= you must define this with final grid height // to manipulate grid after creation var oGridGroup = new fabric.Group([], {left: 0, top: 0}); var gridSize = 20; // define grid size // define presentation option of grid var lineOption = {stroke: 'rgba(0,0,0,.4)', strokeWidth: 1, selectable:false, strokeDashArray: [3, 3]}; // do in two steps to limit the calculations // first loop for vertical line for(var i = Math.ceil(gridWidth/gridSize); i--;){ oGridGroup.add( new fabric.Line([gridSize*i, 0, gridSize*i, gridHeight], lineOption) ); } // second loop for horizontal line for(var i = Math.ceil(gridHeight/gridSize); i--;){ oGridGroup.add( new fabric.Line([0, gridSize*i, gridWidth, gridSize*i], lineOption) ); } // Group add to canvas oCanvas.add(oGridGroup); 

Answer 4

我的解决方案是 –

 var width = canvas.width; var height = canvas.height; var j = 0; var line = null; var rect = []; var size = 20; console.log(width + ":" + height); for (var i = 0; i < Math.ceil(width / 20); ++i) { rect[0] = i * size; rect[1] = 0; rect[2] = i * size; rect[3] = height; line = null; line = new fabric.Line(rect, { stroke: '#999', opacity: 0.5, }); line.selectable = false; canvas.add(line); line.sendToBack(); } for (i = 0; i < Math.ceil(height / 20); ++i) { rect[0] = 0; rect[1] = i * size; rect[2] = width; rect[3] = i * size; line = null; line = new fabric.Line(rect, { stroke: '#999', opacity: 0.5, }); line.selectable = false; canvas.add(line); line.sendToBack(); } canvas.renderAll(); 

您必须保存所有行对象以删除网格，或者您可以将所有行对象添加到组中，并且您可以删除该组以删除网格，我认为这不是优雅的，但有效。

Answer 5

如果您不坚持动态生成网格，则可能需要考虑fabric.js提供的本机覆盖图像function。

 var canvas = new fabric.Canvas('rubber'); canvas.setOverlayImage('grid.png', canvas.renderAll.bind(canvas)); 

它根本不会妨碍与canvas上的对象的交互。