Добавление сетки поверх холста 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>

Я надеюсь, что есть способ сделать это в самой Ткань.

Любая помощь будет потрясающей, спасибо!

Ответ 1

Я надеюсь, что это поможет вам ----

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

Ответ 2

Эти две строки кода будут работать:

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

Ответ 3

Мое решение -

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

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

Ответ 4

Если вы не настаиваете на том, чтобы динамически генерировать свою сетку, вы можете рассмотреть встроенную функцию наложения изображений, которую предоставляет функция fabric.js.

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

Он не будет препятствовать взаимодействию с объектами на холсте вообще.

Ответ 5

Более короткая версия и более общий для копирования/вставки:

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