Aggiunta di griglia su tela Fabric.js

Ho appena iniziato a utilizzare Fabric.js (devo dire che sono impressionato).Aggiunta di griglia su tela Fabric.js

Desidero aggiungere una griglia sopra gli oggetti tessuto. Nel codice seguente, inserisco la tela della griglia sopra la tela di tessuto. Il problema qui è che, ora non posso spostare i miei oggetti di tessuto!

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 
    <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js'></script> 

</head> 
<body> 

<div style="height:480px;width:640px;border:1px solid #ccc;position:relative;font:16px/26px Georgia, Garamond, Serif;overflow:auto;"> 

<canvas id="rubber" width="800" height="800" 
    style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 
<canvas id="myCanvas" width="800" height="800" 
    style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 
</div> 

<script> 
//<![CDATA[ 
$(window).load(function(){ 
$(document).ready(function() { 

    function renderGrid(x_size,y_size, color) 
    { 
     var canvas = $("#myCanvas").get(0); 
     var context = canvas.getContext("2d"); 

     context.save(); 
     context.lineWidth = 0.5; 
     context.strokeStyle = color; 

     // horizontal grid lines 
     for(var i = 0; i <= canvas.height; i = i + x_size) 
     { 
      context.beginPath(); 
      context.moveTo(0, i); 
      context.lineTo(canvas.width, i); 
      context.closePath(); 
      context.stroke(); 
     } 

     // vertical grid lines 
     for(var j = 0; j <= canvas.width; j = j + y_size) 
     { 
      context.beginPath(); 
      context.moveTo(j, 0); 
      context.lineTo(j, canvas.height); 
      context.closePath(); 
      context.stroke(); 
     } 

     context.restore(); 
    } 

    renderGrid(10,15, "gray"); 
}); 

});//]]> 

    var canvas = new fabric.Canvas('rubber'); 
    canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); 

    canvas.selectionColor = 'rgba(0,255,0,0.3)'; 
    canvas.selectionBorderColor = 'red'; 
    canvas.selectionLineWidth = 5; 
</script> 


</body> 
</html>

Spero che ci sia un modo per farlo in Fabric stesso.

Qualsiasi aiuto sarebbe fantastico, grazie!

fonte

2013-06-22 High schooler

fa la mia risposta risolverlo? – Muath

Spero che questo vi aiuterà ----

function draw_grid(grid_size) { 

    grid_size || (grid_size = 25); 
    currentCanvasWidth = canvas.getWidth(); 
    currentcanvasHeight = canvas.getHeight(); 


    // Drawing vertical lines 
    var x; 
    for (x = 0; x <= currentCanvasWidth; x += grid_size) { 
     this.grid_context.moveTo(x + 0.5, 0); 
     this.grid_context.lineTo(x + 0.5, currentCanvasHeight); 
    } 

    // Drawing horizontal lines 
    var y; 
    for (y = 0; y <= currentCanvasHeight; y += grid_size) { 
     this.grid_context.moveTo(0, y + 0.5); 
     this.grid_context.lineTo(currentCanvasWidth, y + 0.5); 
    } 

    grid_size = grid_size; 
    this.grid_context.strokeStyle = "black"; 
    this.grid_context.stroke(); 
}

fonte

2013-06-29 12:12:28 rafi

Se non si desidera generare dinamicamente la griglia, è possibile prendere in considerazione la funzione di immagine di sovrapposizione nativa fornita da fabric.js.

var canvas = new fabric.Canvas('rubber'); 
canvas.setOverlayImage('grid.png', canvas.renderAll.bind(canvas));

Non ostacolerà affatto le interazioni con gli oggetti sulla tela.

fonte

2013-06-27 10:25:17 n2code

In realtà, ho bisogno che la griglia venga generata dinamicamente. : O –

La mia soluzione è -

var width = canvas.width; 
var height = canvas.height; 

var j = 0; 
var line = null; 
var rect = []; 
var size = 20; 

console.log(width + ":" + height); 

for (var i = 0; i < Math.ceil(width/20); ++i) { 
    rect[0] = i * size; 
    rect[1] = 0; 

    rect[2] = i * size; 
    rect[3] = height; 

    line = null; 
    line = new fabric.Line(rect, { 
     stroke: '#999', 
     opacity: 0.5, 
    }); 

    line.selectable = false; 
    canvas.add(line); 
    line.sendToBack(); 

} 

for (i = 0; i < Math.ceil(height/20); ++i) { 
    rect[0] = 0; 
    rect[1] = i * size; 

    rect[2] = width; 
    rect[3] = i * size; 

    line = null; 
    line = new fabric.Line(rect, { 
     stroke: '#999', 
     opacity: 0.5, 
    }); 
    line.selectable = false; 
    canvas.add(line); 
    line.sendToBack(); 

} 

canvas.renderAll();

Devi salvare tutti gli oggetti linea per la rimozione della griglia, oppure è possibile aggiungere tutti gli oggetti linea a un gruppo, e puoi rimuovere il gruppo per rimuovere la griglia, beh, penso che non sia elegante, ma ha funzionato.

fonte

2013-09-06 07:18:14 Tom

Tom, Queste linee vengono aggiunte come oggetti così quando si desidera inviare un oggetto avanti o indietro queste linee vengono anche trattate come oggetti validi. Come evitare questo? – funguy

Questi due righe di codice funzionerà:

var gridsize = 5; 
for(var x=1;x<(canvas.width/gridsize);x++) 
         { 
          canvas.add(new fabric.Line([100*x, 0, 100*x, 600],{ stroke: "#000000", strokeWidth: 1, selectable:false, strokeDashArray: [5, 5]})); 
          canvas.add(new fabric.Line([0, 100*x, 600, 100*x],{ stroke: "#000000", strokeWidth: 1, selectable:false, strokeDashArray: [5, 5]})); 
        }

fonte

2013-11-26 03:12:25 John

Ho appena aggiunto una variabile per controllare la dimensione della cella: 'var gridsize = 10, cellWidth = 30; \t per (var x = 1; x <(canvas.width/gridsize); x ++) { \t \t canvas.add (nuovo fabric.Line ([cellWidth * x, 0, cellWidth * x, 600], {ictus : "# 000000", strokeWidth: 1, selezionabile: false})); \t \t canvas.add (nuovo fabric.Line ([0, cellWidth * x, 600, cellWidth * x], {stroke: "# 000000", strokeWidth: 1, selezionabile: false})); \t} ' – SuperNOVA

Una versione più breve e più generico per copia/incolla:

var oCanvas; // must be your canvas object 
var gridWidth; // <= you must define this with final grid width 
var gridHeight; // <= you must define this with final grid height 

// to manipulate grid after creation 
var oGridGroup = new fabric.Group([], {left: 0, top: 0}); 

var gridSize = 20; // define grid size 

// define presentation option of grid 
var lineOption = {stroke: 'rgba(0,0,0,.4)', strokeWidth: 1, selectable:false, strokeDashArray: [3, 3]}; 

// do in two steps to limit the calculations 
// first loop for vertical line 
for(var i = Math.ceil(gridWidth/gridSize); i--;){ 
    oGridGroup.add(new fabric.Line([gridSize*i, 0, gridSize*i, gridHeight], lineOption)); 
} 
// second loop for horizontal line 
for(var i = Math.ceil(gridHeight/gridSize); i--;){ 
    oGridGroup.add(new fabric.Line([0, gridSize*i, gridWidth, gridSize*i], lineOption)); 
} 
// Group add to canvas 
oCanvas.add(oGridGroup);

fonte

2016-03-11 09:36:36 Draeli

La migliore risposta. Potresti voler aggiungere "evented: false" alle opzioni di linea. Ciò sopprimerà tutti gli eventi di interazione del mouse che si attivano. – temuri

Aggiunta di griglia su tela Fabric.js

risposta

Problemi correlati