Question

我正在使用一个图像并将其变成一个Button对象，当点击该对象时，该对象应该消失并且在被再次调用之前一直处于非活动状态。我单击按钮，图像消失，但图像所在的区域仍处于活动状态，就像按钮仍在那里一样（即如果我单击按钮所在的区域，则按钮调用的代码将被调用再次）。

以下是从draw（）

中绘制按钮的代码

ctx.beginPath();    
    img=document.getElementById('btn');    
    btn=new Button(img, (420-img.width/2), (280-img.height/2),  img.width, img.height);    
    btn.draw(ctx);    
ctx.closePath();

这是从Button类

中绘制的

Button.prototype.draw=function(ctx){    
    ctx.beginPath();    
         ctx.drawImage(this.image, this.x, this.y, this.width, this.height);    
    ctx.closePath();     
};

这是侦听和处理被点击按钮的代码

来自HTML文件

function mousePressed(inputEvent){        
    if(btn.clicked(inputEvent)){    
        start=Date.now();    
        score=0;    
        update();    
    }   
}

来自Button类

  Button.prototype.clicked=function(inputEvent){    
      var clickX=inputEvent.clientX;
      var clickY=inputEvent.clientY;
      return (clickX>=this.x && clickX<=(this.x+this.width) && clickY>=this.y && clickY<=this.y+this.height);
   };

Answer 1

鉴于HTML画布上没有真正的对象，例如div DOM，图像，按钮等HTML DOM元素，mousePressed事件可能是由onClick of canvas触发的，这意味着if（btn.clicked（ inputEvent））代码仍将运行并检查点击是否在按钮的宽度和高度内。

您可以向Button类添加一个属性，以指定是否启用它，如果不是，则只是跳过检查用户是否单击它。

function mousePressed(inputEvent){        
    // If button enabled and clicked then udpate
    if(btn.enabled && btn.clicked(inputEvent)){
        start=Date.now();    
        score=0;    
        update();    
    }   
}

在按钮构造函数中设置enabled = true然后在使按钮“消失”的代码中将button.enabled设置为false。实际上你可能已经有一个属性来控制它是否被绘制可以使用相同来控制是否应该检查点击？

从画布中清除后，图像按钮仍然有效

1 个答案: