由于升级fabric.js无法在组中绘制线条

Question

自更新fabric.js库以来，我们无法将线条绘制到一个组中，然后将它们添加到画布上。

我用不同版本的fabirc.js创建了2个相同的小提琴。

1. 使用：1.6.2 http://jsfiddle.net/b0Lbovs5/
2. 最新版本：http://jsfiddle.net/hukpuc30/

/ ** /

var gridLayer = null; 
var gridSize = 10;

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

var addGridLayer = function() {
  if (gridLayer) {
    canvas.remove(gridLayer);
  }

  gridLayer = new fabric.Group([], {left: 0, top: 0, originX: 'left', originY: 'top', selectable:false});

  // Grid
    var workarea = {
        left: 0,
      top: 0,
      right: 400,
      bottom: 400
    };
    var gridStep = gridSize / 2;

    var lineOption = {stroke: 'rgba(0,0,0,.1)', strokeWidth: 1, selectable:false};

    var deltaX = workarea.left - parseInt(workarea.left/gridStep) * gridStep;
    var deltaY = workarea.top - parseInt(workarea.top/gridStep) * gridStep;
    function max(x,y) { return x > y ? x : y }

    var rect = {
      left: 0,
      top: 0,
      right: 400,
      bottom: 400
    };

    for (var xIdx = 0; xIdx < 2 + (canvas.getWidth() / gridStep); xIdx ++) {
      var x = xIdx * gridStep + deltaX;
      if (x < rect.left || x > rect.right) {
        continue;
      }
      var line = new fabric.Line([x, rect.top, x, rect.bottom], lineOption);
      gridLayer.add(line);
    }
    for (var yIdx = 0; yIdx < 2 + (canvas.getHeight() / gridStep); yIdx ++) {
      var y = yIdx * gridStep + deltaY;
      if (y < rect.top || y > rect.bottom) {
        continue;
      }
      var line = new fabric.Line([rect.left, y, rect.right, y], lineOption);
      gridLayer.add(line);
    }

  canvas.add(gridLayer);
}

addGridLayer();

canvas.renderAll();

Answer 1

您的论坛没有尺寸。 您必须收集数组中的行，然后为其创建一个组。

var gridLayer = null; 
var gridSize = 10;

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

var addGridLayer = function() {
  if (gridLayer) {
    canvas.remove(gridLayer);
  }

  gridLayer = [];    
  // Grid
    var workarea = {
      left: 0,
      top: 0,
      right: 400,
      bottom: 400
    };
    var gridStep = gridSize / 2;

    var lineOption = {stroke: 'rgba(0,0,0,.1)', strokeWidth: 1, selectable:false};

    var deltaX = workarea.left - parseInt(workarea.left/gridStep) * gridStep;
    var deltaY = workarea.top - parseInt(workarea.top/gridStep) * gridStep;
    function max(x,y) { return x > y ? x : y }

    var rect = {
      left: 0,
      top: 0,
      right: 400,
      bottom: 400
    };

    for (var xIdx = 0; xIdx < 2 + (canvas.getWidth() / gridStep); xIdx ++) {
      var x = xIdx * gridStep + deltaX;
      if (x < rect.left || x > rect.right) {
        continue;
      }
      var line = new fabric.Line([x, rect.top, x, rect.bottom], lineOption);
      gridLayer.push(line);
    }
    for (var yIdx = 0; yIdx < 2 + (canvas.getHeight() / gridStep); yIdx ++) {
      var y = yIdx * gridStep + deltaY;
      if (y < rect.top || y > rect.bottom) {
        continue;
      }
      var line = new fabric.Line([rect.left, y, rect.right, y], lineOption);
      gridLayer.push(line);
    }
    var gridLayerGroup = new fabric.Group(gridLayer, {left: 0, top: 0, originX: 'left', originY: 'top', selectable:false});

  canvas.add(gridLayerGroup);
}

addGridLayer();

canvas.renderAll();