使用kinetic js一次加載一幅圖像並同時加載一幅圖像的圖像

Question

如何使用Kinetic.js將一組圖像加載到畫布中，並且一次不會加載一張圖像。如果你點擊下一張圖片，圖片應該被遍歷。

Answer 1

在KineticJS中替換圖像（顯示一個代替其他圖像）可以通過以下方式完成。

比方說你有2張圖片已經上傳到數組變量imgs []。如果你不知道如何處理它們之前加載圖像，你可以看到它here

比方說：

 

var imgs = new Array(2); 
imgs[0] = "images/image1.png"; 
imgs[1] = "images/image2.png"; 
 

並讓定義的顯示區域，如下所示：

 

    var dispArea = new Kinetic.Image(
    { 

    image: imgs[0], 
    // You may specify the initial x,y position coordinates inside or set them later. 
    // Similarly for width, height, etc. 
    }); 
    dispArea.currIndex = 0; //This sets up the index of currently shown image 
    displayLayer.add(dispArea); //Assuming your layer is named as displayLayer 

因此，對於您的下一個按鈕的「onClick」事件您調用函數「changeImage」定義如下：

 

    function changeImage() 
    { 
    // Increment the index, make it zero if it goes over the total images 
    dispArea.currIndex = (dispArea.currIndex + 1)%imgs.length; 

    dispArea.setImage(imgs[dispArea.currIndex]); 

    displayLayer.draw(); 
    }