Fabric.jsを使用してグリッドにスナップする複数の線を描画する方法

Question

FabricJsとキャンバスを使用して簡単な線描画ツールを構築しています。マウスを使用すると、グリッド線に沿って線を引くことができます。この絵のように：

私の目標は、グリッド、次の水平および斜めのラインが垂直方向にのみ描画する制限です。これまでのところ、線はグリッドに固執せず、線はキャンバス上で自由に描くことができます。赤い線で

参照画像：

私はその部分を実装するかどうかはわかりませんが、任意の助けいただければ幸いです。

これまで私がこれまで持っていたことは次のとおりです。 ありがとうございます。

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