javascript - 如何在 Canvas 圆上附加jquery单击事件处理程序以显示弹出框

Question

我有一个弹出功能，带有像 facebook 一样的通知图标。但是，当我们单击该通知图标时，应该会显示弹出窗口。对于这些，我需要附加一个事件处理程序。我的部分代码在这里:

$("#comment_save").click(function(){
cmt++;
//drawing circle
context.beginPath();
context.arc(90,60,10,0,2*Math.PI);
context.lineWidth = 2;//for border thikness
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'gray';
context.stroke();
//drawing text
context.font="15px Georgia";
context.fillStyle = 'yellow';
if(cmt<=9){
cmt="0"+cmt;
}
context.fillText(cmt,80,65);
$(".popup").hide();
});

Answer 1

在 Canvas 中，不操作 DOM 元素，这就是为什么您无法附加到 Canvas 上的任何内容。

对于 Canvas ，我们只有坐标。我们将单击事件附加到 Canvas 元素并读取单击发生的位置的坐标。当我们在 Canvas 上绘制某些内容时，我们只需记住这一点，当单击时，我们会搜索在 Canvas 上绘制的任何内容的坐标是否与单击的坐标相匹配。

查看示例 http://jsfiddle.net/Deele/N2uX5/

var canvas = document.getElementById('myCanvas'),
    context = canvas.getContext('2d'),
    clickableAreas = [];
$(function() {
    $("#comment_save").click(function(){
        //drawing circle
        context.beginPath();
        context.arc(90,60,10,0,2*Math.PI);
        context.lineWidth = 2;//for border thikness
        context.fillStyle = 'green';
        context.fill();
        context.strokeStyle = 'gray';
        context.stroke();
        //drawing text
        context.font="15px Georgia";
        context.fillStyle = 'yellow';
        context.fillText('1',80,65);
        $("#myCanvas").click(function(e){
            var x = e.pageX - this.offsetLeft,
                y = e.pageY - this.offsetTop;
            console.log('Click at ['+x+'|'+y+']');
            if (coordinatesWithin(x, y, 90 - 10, 90 + 10, 60 - 10, 60 + 10)) {
               alert('circle was clicked');
            }
        });
    });
});
function coordinatesWithin(x,y, minX, maxX, minY, maxY) {
    return (x >= minX && x <= maxX && y >= minY && y <= maxY);
}

有一些教程，介绍如何自动化此过程并更好地控制它，例如 http://pterkildsen.com/2013/06/28/create-a-html5-canvas-element-with-clickable-elements/

如果你在 Canvas 上绘制了大量的东西，具有详细的形状(不是正方形)，有很多层，并且你希望能够知道单击了哪一个，我会使用坐标数组的方法，其中所有坐标都被存储，并且每个东西在 Canvas 上逐层绘制时，都会获得特定像素的所有权，当所有东西都绘制在 Canvas 上时，您将以带有坐标的数组结束，其中每个坐标都有特定的所有者，由某种 ID 定义，以及带有回调函数的数组，由 ID 标识。单击 Canvas 时，您只需在第一个数组中查找坐标并从第二个数组中触发函数。