Kineticjs - 将网格添加到画布

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

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

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

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