Kineticjs-将网格添加到画布 [英] Kineticjs - Add grid to canvas

问题描述

我正在尝试引入画布功能(添加/删除)的网格功能. 我提取了以下大多数代码:

I am trying to introduce a grid function (to add/remove) a grid on a canvas. I pulled most of the following code:

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

为此小提琴，但是它不起作用.我想要的是在画布的底部绘制一个网格-让人们可以微调画布上元素的位置.我还想赋予用户删除网格的能力.有人可以看到我错过的内容吗?

to this fiddle, but it doesn't work. All I want is for a grid to be drawn at the base of the canvas - to allow people to fine tune the positioning of elements on the canvas. I also want to give the user the ability to remove the grid. Can anybody see what I have missed?

非常感谢您的帮助！

推荐答案

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

Your button click function is calling makeGrid() which is undefined.

您的函数称为make_grid()，因此您需要从以下位置更改点击事件:

Your function is called make_grid() so you need to change your click event from:

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

收件人:

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

执行此操作后，将显示网格.要删除它，可以在使用make_grid()创建的网格层上使用hide() remove()或destroy().由于要允许用户隐藏/显示网格，因此建议使用.hide().

Once you do that, the grid appears. To remove it you can either use hide() remove() or destroy() on the grid layer that you created with make_grid(). Since you want to allow the user to hide/show the grid, I recommend using .hide().

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

Also note that you should only add the grid layer to the stage once. I suggest you call make_grid() when the stage is initialised, but hide the grid layer. Then with your two buttons just use .show() and .hide() to make the grid appear and disappear.

关于remove与destroy的更多信息: 查看全文