1

是否可以在其中使用ifor 循环 ( for(i=0; i<3; i++))的变量Kinetic.Shape来设置自定义中的 y 值drawFunc();

我的用于动态形状创建的 for 循环代码如下所示：

var layer = new Kinetic.Layer();

for (i = 0; i < 3; i++){
    layer.add(new Kinetic.Shape({
        x: 0,
        y: 0,
        width: 400,
        height: 400,
        drawFunc: function(canvas){
            console.log(i); //THIS LOG ALWAYS OUTPUTS THE MAX i-VALUE (here 3)
            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.fillStyle = 'black';
            ctx.fillRect(10, i*30+2, 200, 30);
            ctx.closePath();
            ctx.fill();
        }
    }));
}

stage.add(layer);

如果我i在自定义中记录 - 值，drawFunc();结果总是3而不是0, 1, 2，因此ctx.fillRect将所有三个形状都绘制在y = 92。

这是我的代码与解释行为的小提琴。

我错过了一些明显的东西吗？任何帮助是极大的赞赏。

4

1 回答 1

1

你可以尝试这样的事情。通过使用函数添加层，传递给 createLayer 函数的值与通过闭包创建的每个 Kinetic.Shape 对象一起保存。

function createLayer(nbr){
    layer.add(new Kinetic.Shape({
        x: 0,
        y: 0,
        width: 400,
        height: 400,
        drawFunc: function(canvas){
            console.log(nbr);
            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.fillStyle = 'black';
            ctx.fillRect(10, nbr*30+2, 200, 30);
            ctx.closePath();
            ctx.fill();
        }
    }));
    }


for (var i = 0; i < 3; i++){
    createLayer(i);
}
于 2013-06-25T08:48:28.717 回答