FabricJS 渲染后，组和控制框位置错误

Question

我想制作网格并使其可选择。我有以下生成网格的方法：

function getGrid(width, height, count, name) {

        var oGridGroup = new fabric.Group([], {left: 0, top: 0, width: width, height: height, selection: true});
        var gridCountCell = count || 5;

        gridSizeWidth = width / gridCountCell - 0.3;
        gridSizeHeight = height / gridCountCell - 0.3;
        var lineOption = {stroke: '#ccc', strokeWidth: 1};

        for (var i = Math.ceil(width / gridSizeWidth); i--;) {           
            oGridGroup.add(new fabric.Line([gridSizeWidth * i, 0, gridSizeWidth * i, height], lineOption));
        }
        for (var i = Math.ceil(height / gridSizeHeight); i--;) { 
            oGridGroup.add(new fabric.Line([0, gridSizeHeight * i, width, gridSizeHeight * i], lineOption));
        }
        if(name) {
            oGridGroup.set({name: name})
        }

        return oGridGroup;
    }

如您所见，我在创建组时设置了四个属性。问题是该组被呈现在错误的位置。它有一些偏移量。但是，如果我在创建对象时删除width 和height，则组具有正确的位置，但我无法选择它，因为width 和height 为零。这是DEMO，运行它并尝试选择网格，您将看到偏移量。然后，评论 width 和 height 以查看差异。

如何解决？

附言。我尝试使用setCoords 方法，但没有帮助。

Answer 1

您可以通过先创建线条来修复它，然后创建一个组，传递一个包含对线条的引用的数组：

var lines = [];
for (var i = Math.ceil(width / gridSizeWidth); i--;) {           
  lines.push(new fabric.Line([gridSizeWidth * i, 0, gridSizeWidth * i, height], lineOption));
}
for (var i = Math.ceil(height / gridSizeHeight); i--;) { 
  lines.push(new fabric.Line([0, gridSizeHeight * i, width, gridSizeHeight * i], lineOption));
}               
var oGridGroup = new fabric.Group(lines, {left: 0, top: 0, width: width, height: height, selection: true});

请看这里：http://jsfiddle.net/pevtwgcL/2/