So zeichnen Sie mehrere Linien, die mit Fabric.js in ein Raster einrasten

Question

Ich erstelle ein einfaches Linienzeichnungswerkzeug mit FabricJs und Canvas. Mit der Maus kann jemand eine Linie zeichnen, die Gitterlinien folgt. , wie dieses Bild:

Mein Ziel ist die die Leitung zu begrenzen, nur vertikal gezogen werden, horizontal und diagonal Netz folgen. Bisher haften die Linien nicht am Raster, die Linien können frei auf der Leinwand gezeichnet werden.

Siehe Bild mit roten Linien:

Ich bin nicht sicher, wie man das Teil zu implementieren, wäre jede Hilfe dankbar.

Hier ist was ich bisher habe. Danke.

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

Sie können mit dieser vertikalen Linien if-Anweisung finden.
if(Math.abs(line.x1 - line.x2) > Math.abs(line.y1 - line.y2))
Und auf der Maus entfernen bis
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>