Raster über Fabric.js-Canvas hinzufügen

Ich habe gerade mit Fabric.js begonnen (ich muss sagen, ich bin beeindruckt).Raster über Fabric.js-Canvas hinzufügen

Ich möchte ein Gitter über die Fabric-Objekte hinzufügen. Im folgenden Code stelle ich meine Rasterfläche direkt auf die Fabric-Leinwand. Das Problem hierbei ist, dass ich meine Stoffobjekte jetzt nicht bewegen kann!

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

Ich hoffe, dass es eine Möglichkeit gibt, dies in Fabric selbst zu tun.

Jede Hilfe wäre toll, danke!

Quelle

2013-06-22 High schooler

ist meine Antwort es lösen? – Muath

Ich hoffe, dies wird Ihnen helfen, ----

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

Quelle

2013-06-29 12:12:28 rafi

Wenn Sie nicht darauf bestehen, Ihr Raster dynamisch zu generieren, sollten Sie die native Overlay-Bildfunktion berücksichtigen, die von fabric.js bereitgestellt wird.

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

Es wird die Interaktionen mit den Objekten auf der Zeichenfläche überhaupt nicht behindern.

Quelle

2013-06-27 10:25:17 n2code

Eigentlich muss das Raster dynamisch generiert werden. : O –

Meine Lösung ist -

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

Sie haben alle Linie zum Entfernen von Raster-Objekte zu speichern, oder Sie können alle Linienobjekte hinzugefügt zu einer Gruppe, und Sie können die Gruppe zum Entfernen von Gitter entfernen, nun, ich denke, das ist nicht elegant, aber funktioniert.

Quelle

2013-09-06 07:18:14 Tom

Tom, Diese Zeilen werden als Objekte hinzugefügt. Wenn Sie also ein Objekt vorwärts oder rückwärts senden möchten, werden diese Zeilen auch als gültige Objekte behandelt. Wie vermeide ich das? – funguy

Diese zwei Zeilen Code funktioniert:

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

Quelle

2013-11-26 03:12:25 John

Ich habe gerade eine Variable hinzugefügt, um die Zellengröße zu steuern: 'var gridsize = 10, cellWidth = 30; \t für (var x = 1; x <(canvas.width/gridsize); x ++) { \t \t canvas.add (neue Fabric.Line ([ZelleBreite * x, 0, cellWidth * x, 600], {Strich : "# 000000", strokeWidth: 1, auswählbar: false})); \t \t canvas.add (neue Fabric.Line ([0, Zellenbreite * x, 600, Zellenbreite * x], {Strich: "# 000000", Strichbreite: 1, wählbar: falsch})); \t} ' – SuperNOVA

Eine kürzere Version und allgemeinere für Kopieren/Einfügen:

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

Quelle

2016-03-11 09:36:36 Draeli

Beste Antwort. Sie können den Zeilenoptionen "evented: false" hinzufügen. Dadurch werden alle auslösenden Mausinteraktionsereignisse unterdrückt. – temuri

Raster über Fabric.js-Canvas hinzufügen

Antwort

Verwandte Themen