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

Question

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

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

如您所见，我在创建组时设置了四个属性。问题是该组呈现在错误的位置。它有一些 offset.But，如果我在创建对象时删除 width 和 height 那么组有适当的位置，但我不能 select 它，因为 width height 为零。这是一个 DEMO，运行它并尝试 select 网格，你会看到偏移量。然后，评论 width 和 height 以查看差异。

如何解决？

PS。我尝试使用 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/

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

FabricJS After rendering, group and control box have wrong position

html5-canvas

fabricjs