如何使用Fabric.js绘制捕捉到网格的多条线

Question

我正在使用FabricJs和canvas构建一个简单的线条绘制工具。 有人可以使用鼠标在网格线之后画一条线。 像这张照片：

我的目标是限制线条只能沿网格垂直，水平和对角线绘制。 到目前为止，线条还没有粘在网格上，线条可以在画布上自由绘制。

看到带有红线的图片：

我不确定如何实现该部分，我们将不胜感激。

这是我到目前为止所拥有的。 谢谢。

 var canvasA = new fabric.Canvas('a', { selection: false }); var grid = 30; // create grid //line var line, isDown; function createGrid(board) { for (var i = 0; i < (600 / grid); i++) { board.add(new fabric.Line([ i * grid, 0, i * grid, 600], { stroke: '#000', selectable: false })); board.add(new fabric.Line([ 0, i * grid, 600, i * grid], { stroke: '#000', selectable: false })) } } //create grids createGrid(canvasA); //handle line drawing drawLine(canvasA); function drawLine (board) { // add objects board.on('mouse:down', function(o){ isDown = true; var pointer = board.getPointer(oe); var points = [ pointer.x, pointer.y, pointer.x, pointer.y ]; line = new fabric.Line(points, { strokeWidth: 2, fill: 'black', stroke: 'red', originX: 'center', originY: 'center', }); board.add(line); }); board.on('mouse:move', function(o){ if (!isDown) return; var pointer = board.getPointer(oe); line.set({ x2: pointer.x, y2: pointer.y }); board.renderAll(); }); board.on('mouse:up', function(o){ isDown = false; }); } 

 canvas{ background-color: transparent; margin: 3px; width: 120px; height: 240px; border: 2px solid #ccc; padding-left: 0; } .boards { display: inline; padding-left: 0; } .boards canvas { list-style: none; display: inline-block; background-color: transparent; margin: 3px; width: 120px; height: 240px; } 

 <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script> <h1>Fabric Js Snap To grid </h1> <div class="boards"> <canvas id="a" width="120" height="240"></canvas> 

Answer 1

您可以使用此if语句找到垂直线。
if(Math.abs(line.x1 - line.x2) > Math.abs(line.y1 - line.y2))
然后将鼠标移到上方
board.remove(line);

 var canvasA = new fabric.Canvas('a', { selection: false }); var grid = 30; // create grid //line var line, isDown; function createGrid(board) { for (var i = 0; i < (600 / grid); i++) { board.add(new fabric.Line([ i * grid, 0, i * grid, 600], { stroke: '#000', selectable: false })); board.add(new fabric.Line([ 0, i * grid, 600, i * grid], { stroke: '#000', selectable: false })) } } //create grids createGrid(canvasA); //handle line drawing drawLine(canvasA); function drawLine (board) { // add objects board.on('mouse:down', function(o){ isDown = true; var pointer = board.getPointer(oe); var points = [ pointer.x, pointer.y, pointer.x, pointer.y ]; line = new fabric.Line(points, { strokeWidth: 2, fill: 'black', stroke: 'red', originX: 'center', originY: 'center', }); board.add(line); }); board.on('mouse:move', function(o){ if (!isDown) return; var pointer = board.getPointer(oe); line.set({ x2: pointer.x, y2: pointer.y }); board.renderAll(); }); board.on('mouse:up', function(o){ if(Math.abs(line.x1 - line.x2) > Math.abs(line.y1 - line.y2)) board.remove(line); isDown = false; }); } 

 canvas{ background-color: transparent; margin: 3px; width: 120px; height: 240px; border: 2px solid #ccc; padding-left: 0; } .boards { display: inline; padding-left: 0; } .boards canvas { list-style: none; display: inline-block; background-color: transparent; margin: 3px; width: 120px; height: 240px; } 

 <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script> <h1>Fabric Js Snap To grid </h1> <div class="boards"> <canvas id="a" width="120" height="240"></canvas>