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

Question

在这个简单的代码中，我使用了一个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);
}

Answer 1

这里有一些问题：

• 正如格伦迪（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
}