javascript - 如何使用 Fabric.js 绘制与网格对齐的多条线

Question

我正在使用 FabricJs 和 Canvas 构建一个简单的线条绘制工具。使用鼠标可以沿着网格线画一条线。 喜欢这张图片:

我的目标是限制线条只能沿着网格垂直、水平和对 Angular 绘制。至此线条不再粘在网格上，可以在 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(o.e);
  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(o.e);
  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(o.e);
  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(o.e);
  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>