Question

我有一个mousedown事件，该事件会更改画布中对象的图像。但是，在第一次单击期间，除非添加超时，否则更新功能不会更新图像。此外，我什至尝试过承诺在新图像链接之后等待，然后再调用更新函数，但结果还是一样。

GameButton = new button(140, 50, 'img/GameButton.svg', 190, 460);

MyGame.canvas.addEventListener('mousedown', function(e){
  if((e.clientX - GameRoom.getBoundingClientRect().left) >= GameButton.x && (e.clientX -         GameRoom.getBoundingClientRect().left) <= (GameButton.x + GameButton.width) && (e.clientY - GameRoom.getBoundingClientRect().top) >= GameButton.y && (e.clientY - GameRoom.getBoundingClientRect().top) <= GameButton.y + GameButton.height){
   GameButton.image.src = 'img/GameButtonDown.svg';
  }
  setTimeout(function(){
    GameButton.update();
  },3);
});
      
      
function button(width,height,img,x,y){

  this.width = width;
  this.height = height;
  this.image = new image();
  this.image.src = img;
  this.x = x;
  this.y = y;
  
  this.update = function(){
    ctx = MyGameRoom.ctx;
    ctx.drawImage(this.image,
    this.x,
    this.y,
    this.width, this.height);
  }
}

似乎在新image.src之前触发了更新方法

Answer 1

问题在于update仅绘制图像，但是在设置.src后图像本身无法立即使用...您需要等待加载。一种解决方案是在图像上为load添加一个事件处理程序，以自动触发更新。

this.image.onload = (event)=>{
    this.update();
};

mousedown事件仅在第二次点击时起作用

1 个答案: