在Fabric.js畫布上添加網格

我剛開始使用Fabric.js（我不得不說，我印象深刻）。在Fabric.js畫布上添加網格

我想在結構對象上添加網格。在下面的代碼中，我將我的網格畫布放在Fabric畫布上。這裏的問題是，我現在不能移動我的織物對象！

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

我希望有一種方法在面料本身做到這一點。

任何幫助將是真棒，謝謝！

來源

2013-06-22 High schooler

沒有我的回答解決呢？ – Muath

我希望這將幫助你----

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

來源

2013-06-29 12:12:28 rafi

如果您不堅持動態生成網格，您可能需要考慮fabric.js提供的本地覆蓋圖像函數。

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

它不會妨礙與畫布上的對象的交互。

來源

2013-06-27 10:25:17 n2code

實際上，我需要動態生成網格。：O –

我的解決方案 -

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

你必須保存去除網格線的所有對象，或者您也可以添加的所有線對象到一個組，並且你可以刪除組來刪除網格，以及我認爲這不是一個優雅的，但工作。

來源

2013-09-06 07:18:14 Tom

Tom，這些行是作爲對象添加的，所以當你想發送一個對象向前或向後時，這些行也被視爲有效對象。如何避免這種情況？ – funguy

的代碼，這兩條線將工作：

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

來源

2013-11-26 03:12:25 John

我剛剛添加了一個變量來控制單元格大小：var gridsize = 10，cellWidth = 30; \t爲（VAR X = 1; X <（canvas.width/gridsize）; X ++）{ \t \t canvas.add（新fabric.Line（[cellWidth * X，0，cellWidth * X，600]，{行程：「＃000000」，strokeWidth：1，selectable：false}））; （new frame.Line（[0，cellWidth * x，600，cellWidth * x]，{stroke：「＃000000」，strokeWidth：1，selectable：false}））;}} \t}' – SuperNOVA

一個較短的版本，更通用的複製/粘貼：

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

來源

2016-03-11 09:36:36 Draeli

最佳答案。您可能想要將「evented：false」添加到行選項。這將抑制所有觸發鼠標交互事件。 – temuri

在Fabric.js畫布上添加網格

回答

相關問題