0

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

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

到这个小提琴，但它不起作用。我想要的只是在画布的底部绘制一个网格 - 以允许人们微调画布上元素的位置。我还想让用户能够删除网格。谁能看到我错过了什么？

非常感谢您的帮助！

4

1 回答 1

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：在 kinetic.js 中删除和销毁有什么区别

于 2013-10-29T14:10:02.553 回答