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