fabric.jsをアップグレードするとグループに線を描けないので

Question

fabric.jsライブラリを更新して以来、グループに線を描画してキャンバスに追加することができませんでした。

私はfabirc.jsの異なるバージョンで2つの同一のフィドルを作成しました。 1.6.2 http://jsfiddle.net/b0Lbovs5/

最新版：での作業

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