Добавление сетки поверх холста Fabric.js

Я только начал использовать Fabric.js (я должен сказать, что я впечатлен).Добавление сетки поверх холста Fabric.js

Я хочу добавить сетку поверх объектов ткани. В следующем коде я помещаю свой холст сетки прямо на холст ткани. Проблема в том, что теперь я не могу перемещать свои объекты ткани!

<!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 canvas.add (новая fabric.Line ([cellWidth * x, 0, cellWidth * x, 600], {stroke : «# 000000», strokeWidth: 1, selectable: false})); \t canvas.add (new fabric.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

ответ

Смежные вопросы