如何使用Fabric.js

Question

我正在使用FabricJs和canvas构建一个简单的线条绘制工具。使用鼠标有人可以绘制一条跟随网格线的线。 喜欢这张图片：

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

见红线图片：

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

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

＆＃13;

＆＃13;

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;
});

}

＆＃13;

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;
    
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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;
});

}

＆＃13;

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;
    
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;