Question

是否可以使用for循环（i）的变量for(i=0; i<3; i++)来创建Kinetic.Shape来设置自定义{{1}中的y值}

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

drawFunc();

如果我在自定义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处的所有三个形状。

Here是我的代码与解释行为的混合。

我错过了一些明显的东西吗？非常感谢任何帮助。

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

在for循环中绘制Kinetic.Shape - 在drawFunc（）中未正确获取for循环的var i

1 个答案: