通过单击事件识别画布上的对象

identify an object on canvas by a click event

本文关键字：对象识别单击事件更新时间：2023-09-26

在这个简单的代码中，我使用了一个看起来根本不起作用的eventListener。画布显示一个图像，并且假定给定的hitpaint()函数确定是否发生单击。我不明白eventListener为什么会这样。任何见解都会有所帮助。

mycanv.addEventListener("click", function(e) {
    var output = document.getElementByID("output");
    ctx.fillStyle = 'blue';
    //ctx.clearRect(0,0,100,20);
    if (hitpaint) {
        //ctx.fillText("hit",100,20);                                                                                                                                                                                                           
        output.innerHTML = "hit";
    } else {
        //ctx.fillText("miss",100,20);                                                                                                                                                                                                          
        output.innerHTML = "miss";
    }
}, false);

hitpaint()函数定义为：

function hitpaint(mouse_event) {
    var bounding_box = mycanv.getBoundingClientRect();
    var mousex = (mouse_event.clientX - bounding_box.left) *
        (mycanv.width / bounding_box.width);
    var mousey = (mouse_event.clientY - bounding_box.top) *
        (mycanv.height / bounding_box.height);
    var pixels = ctx.getImageData(mousex, mousey, 1, 1);
    for (var i = 3; i < pixels.data.length; i += 4) {
        // If we find a non-zero alpha we can just stop and return                                                                                                                                                                            
        // "true" - the click was on a part of the canvas that's                                                                                                                                                                              
        // got colour on it.                                                                                                                                                                                                                  
        if (pixels.data[i] !== 0) return true;
    }
    // The function will only get here if none of the pixels matched in                                                                                                                                                                   
    return false;
}

最后，在画布中随机显示图片的主循环：

function start() {
    // main game function, called on page load                                                                                                                                                                                            
    setInterval(function() {
        ctx.clearRect(cat_x, cat_y, 100, 100);
        cat_x = Math.random() * mycanv.width - 20;
        cat_y = Math.random() * mycanv.height - 20;
        draw_katy(cat_x, cat_y);
    }, 1000);
}

这里有一些问题：

正如Grundy在评论中指出的那样，hitpaint从未被调用；现在它会检查它的存在，并且总是返回true
鼠标将风险坐标设置为分数值，这与getImageData不符
通常不需要缩放鼠标坐标。画布最好具有固定的大小，而不需要额外的CSS大小
为x/y添加边界检查，以确保它们位于画布位图内

我建议重写：

mycanv.addEventListener("click", function(e) {
    var output = document.getElementByID("output");
    ctx.fillStyle = 'blue';
    //ctx.clearRect(0,0,100,20);
    if (hitpaint(e)) {  // here, call hitpaint()
         //ctx.fillText("hit",100,20);                                                                                                                                                                                                           
        output.innerHTML = "hit";
    } else {
        //ctx.fillText("miss",100,20);                                                                                                                                                                                                          
        output.innerHTML = "miss";
    }
}, false);

然后在hitpaint:

function hitpaint(mouse_event) {
  var bounding_box = mycanv.getBoundingClientRect();
  var x = ((mouse_event.clientX - bounding_box.left) *
    (mycanv.width / bounding_box.width))|0;  // |0 cuts off any fraction
  var y = ((mouse_event.clientY - bounding_box.top) *
    (mycanv.height / bounding_box.height))|0;
  if (x >= 0 && x < mycanv.width && y >= 0 && y < mycanv.height) {
      // as we only have one pixel, we can address alpha channel directly
      return ctx.getImageData(x, y, 1, 1).data[3] !== 0;
  }
  else return false;  // x/y out of range
}