javascript - 使用动力学 js 一次在画布上加载一张图片加载多张图片

Question

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

Answer 1

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

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

让我们说：

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

让我们定义你的显示区域如下：

    var dispArea = new Kinetic.Image(
    {

    图片：imgs[0]，
    // 您可以在内部指定初始 x,y 位置坐标或稍后设置它们。
    // 同样对于宽度、高度等
    });
    dispArea.currIndex = 0; //这会设置当前显示图像的索引
    displayLayer.add(dispArea); //假设你的层被命名为displayLayer

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

    函数改变图像（）
    {
    // 增加索引，如果超过所有图像，则将其设为零
    dispArea.currIndex = (dispArea.currIndex + 1)%imgs.length;

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

    displayLayer.draw();
    }