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 回答