在一個圖層中繪製圖像並將它們對齊爲矩陣

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行/像這樣的階段中的cols：（！未經測試的代碼警報）

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

}