Question

如何使用Kinetic.js将一组图像加载到画布中，并且一次不能同时加载一个图像的所有图像。如果单击下一个图像，则应该遍历图像。

Answer 1

在KineticJS中替换图像（显示一个代替其他图像）可以通过以下方式完成。

假设您有2张图片已经上传到数组变量imgs []。如果您在处理图像之前不确定如何加载图像，则可以阅读here

让我们说：



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

然后按如下方式定义您的显示区域：

{{1}}

因此，对于下一个按钮的 “onClick”事件，您调用函数“changeImage”定义如下：


    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

使用动力学js一次加载多个图像，其中一个图像加载在画布上

1 个答案: