由于升级fabric.js无法在组中绘制线 [英] Since upgrading fabric.js unable to draw lines in group

问题描述

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

Since updating fabric.js library we've been unable to draw lines into a group and then add them onto the canvas.

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

I've created 2 identical fiddles with different versions of fabirc.js.

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

推荐答案

您的组没有维度.您必须将行收集到数组中，然后为其创建一个组.

your group does not have dimensions. You have to collect the lines in an array and then create a group for it.

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

这篇关于由于升级fabric.js无法在组中绘制线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！