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

【问题标题】：draw images in a layer and align them as a matrix在图层中绘制图像并将它们对齐为矩阵
【发布时间】：2014-06-09 23:06:21
【问题描述】：

如何使我在 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）。相反，现在的输出是对角线图像。请帮我弄清楚如何制作它。我错过了什么吗？

【问题讨论】：

标签： javascript kineticjs

【解决方案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;
    }

}

【讨论】：