Question

如何使我在KineticJS中的for循环中调用的图像以一种矩阵对齐？

我想要的行为是四乘四次。我不知道它们的确切数字，因为我使用数据库来调用它们的路径，所以我只使用for循环。

修改

我用小提琴更改了代码示例，以简化操作：http://jsfiddle.net/tg8TM/

所以我做了这个测试

imageObj.onload = function() {
var ligne = 1;
for (var i=0; i<10; i++) {
    var img = new Kinetic.Image({
        x: 100*i,
        y: 50,
        image:imageObj,
        width: 100,
        height: 100
    });
    if (img.getX()>stage.getWidth()){ //maybe I should use if (i%4 ===0)
        ligne++;
        img.setX(100* ligne+1);
        img.setY(50 * (ligne+1) );          
        layer.add(img);
        layer.draw();
    }
    else {          
        layer.add(img);
        layer.draw();
    }
};
}

这里，舞台末端的图像应设置为另一个x，y，以另一个“线”（如\ n）绘制。相反，输出现在是对角线图像。请帮我弄清楚如何制作它。我错过了什么吗？

Answer 1

您可以在舞台上的行/列中绘制imageObj，如下所示：

（未经测试的代码提醒！）

var w=imageObj.width;
var h=imageObj.height;
var nextX=0;
var nextY=0;

for(var i=0;i<10;i++){

    var img=new Kinetic.Image({
        x:nextX,
        y:nextY,
        ...
    });

    nextX+=w;
    if(nextX+w>stage.getWidth()){
        nextX=0;
        nextY+=h;
    }

}

在图层中绘制图像并将它们对齐为矩阵

1 个答案: