使用動力學js一次加載一張圖像在畫布上加載多個圖像

Question

如何使用Kinetic.js將一組圖像加載到畫布中，並且一次也不能一次加載所有圖像。如果單擊下一個圖像，則應遍歷該圖像。

Answer 1

可以通過以下方式替換KineticJS中的圖像（顯示一個圖像代替另一個圖像）。

假設您有2張圖像已上傳到數組變量imgs []。 如果不確定在處理圖像之前如何加載圖像，可以在此處閱讀

可以說：

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

並如下定義顯示區域：

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

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

\n\n     函數changeImage（）\n     {\n     //遞增索引，如果超出整個圖像，則將其設為零\n     dispArea.currIndex =（dispArea.currIndex +1）％imgs.length;\n\n     dispArea.setImage（imgs [dispArea.currIndex]）;\n\n     displayLayer.draw（）;\n     }\n\n