Question

我正在尝试在画布上引入网格功能（添加/删除）网格。我提取了以下大部分代码：

var make_gr

id = function() {
    var grid = new Kinetic.Layer();
    var r = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: W,
        height: H,
        fill: 'transparent'
    });
    grid.add(r);
    for (i = 0; i < w + 1; i++) {
        var I = i * CELL_SIZE;
        var l = new Kinetic.Line({
            stroke: "black",
            points: [I, 0, I, H]
        });
        grid.add(l);
    }

    for (j = 0; j < h + 1; j++) {
        var J = j * CELL_SIZE;
        var l2 = new Kinetic.Line({
            stroke: "black",
            points: [0, J, W, J]
        });
        grid.add(l2);
    }
    stage.add(grid);      
};

到此fiddle，但它不起作用。我想要的只是在画布底部绘制网格 - 允许人们微调画布上元素的位置。我还想让用户能够删除网格。谁能看到我错过的东西？

非常感谢您的帮助！

Answer 1

您的按钮点击功能正在调用未定义的makeGrid()。

您的功能名为make_grid()，因此您需要更改点击事件：

$d("body").on('click','#addGrid',function(){
  makeGrid();
});

要：

$d("body").on('click','#addGrid',function(){
  make_grid();
});

一旦这样做，就会出现网格。要删除它，您可以在使用hide()创建的网格图层上使用remove() destroy()或make_grid()。由于您希望允许用户隐藏/显示网格，因此我建议您使用.hide()。

另请注意您应该只将网格图层添加到舞台一次。我建议您在初始化阶段时调用make_grid()，但隐藏网格图层。然后使用两个按钮，只需使用.show()和.hide()即可使网格显示和消失。

有关remove vs destroy的更多信息：What is the difference between remove and destroy in kinetic.js

Kineticjs - 将网格添加到画布

1 个答案: