将点击事件监听器添加到SVG位图图像

Question

我试图将点击事件监听器添加到不同的SVG位图图像。每个点击事件都应该执行不同的功能。

这里是我的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（）函数图像，所以数组是空的，所以它试图添加一个未定义的事件。

Answer 1

可能的解决方案

It seems to run the addClickEvents() function before adding the images, so the array is empty and so it tries to add an event to 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：很显然，这个解决方案是你当前困境的附加组件。它可以很好地实现这种原理到你自己的数组变量，从而最大限度地减少一些额外的代码。