可能的解决方案

Question

我正在尝试将click事件侦听器添加到不同的SVG位图图像。每个click事件都应该执行不同的功能。

这是我的JS代码：

<script>
var stage;
var images = [];
function init() {
  stage = new createjs.Stage("kort");

  addImage("/assets/images/kort.png", 0.65, 0.65, 0, 0);
  addImage("/assets/images/kirke.png", 0.25, 0.25, 250, 250);
  addImage("/assets/images/mølle.png", 0.4, 0.4, 335, 100);
  addImage("/assets/images/skib.png", 0.25, 0.25, 30, 375);
  addImage("/assets/images/hestesko.png", 0.3, 0.3, 100, 75);

  console.log("Images added")
  addClickEvents();

  function addImage(url, scaleX, scaleY, locX, locY) {
    var image = new Image();
    image.src = url;
    image.onload = function () { //indsæt kun billede når det er loadet
      var imageBitmap = new createjs.Bitmap(image);
      imageBitmap.x = locX;
      imageBitmap.y = locY;
      imageBitmap.scaleX = scaleX;
      imageBitmap.scaleY = scaleY;
      images.push(imageBitmap);
      console.log("Image pushed to array");

      stage.addChild(imageBitmap);
      stage.update();
    } 
  }
  function addClickEvents() {
      images[1].on("mousedown", function (evt) {
            this.alpha = 0.1;
            stage.update();
            set(0, true);
        });
    }
}

当我运行此代码时，我收到一个错误：

Uncaught TypeError: Cannot read property 'on' of undefined
at addClickEvents ((index):52)
at init ((index):33)
at onload ((index):9)"

似乎在添加图像之前运行addClickEvents（）函数，因此数组为空，因此它尝试将事件添加到undefined。

Answer 1

可能的解决方案

它似乎在添加图像之前运行addClickEvents（）函数，因此数组为空，因此它尝试将事件添加到undefined。

正确我相信。

你需要做一些返工，javascript的异步性要求你以不同的方式完成这项工作。

看看函数addImage(url, sx, sy, x, y);，一个可能的解决方案是创建一个单独的数组imagesLoaded，以实际跟踪何时应该调用addClickEvents()函数。

新的全球数组：

var imagesLoaded = new Array();
imagesLoaded.push({
    src: "/assets/images/kort.png",
    loaded: false
});

逻辑检查

我们会在您图片的onload事件中进行检查：

image.onload = function () { //indsæt kun billede når det er loadet
    /*
        ALL YOUR CODE AS IS
    */
    stage.update();
    //NEW CODE
    for (i = 0; i < imagesLoaded.length; i++)        
    {
        if (imagesLoaded[i].src == image.src)
            imagesLoaded[i].loaded = true;
    }
    var allLoaded = true;
    for (i = 0; i < imagesLoaded.length; i++)        
    {
        if (!imagesLoaded[i].loaded)
            allLoaded = false;
    }
    if (allLoaded)
    {
        addClickEvents();
    }
    //END OF NEW CODE
}

希望它对你有所帮助。评论问题，如果有的话。

PS：显然这个解决方案是你当前困境的补充。或许你可以将这种原理实现到你自己的数组变量中，从而最大限度地减少一些过多的代码。

将单击事件侦听器添加到SVG位图图像

1 个答案:

可能的解决方案