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和{{1是零。这是DEMO，运行它并尝试选择网格，您将看到偏移量。然后，评论height和width以查看差异。

如何解决？

PS。我尝试使用height方法，但没有帮助。

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渲染后，组和控制框的位置错误

1 个答案: