Question

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

$("#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

在画布中，不能使用DOM元素，因此您无法附加到画布上的任何内容。

对于画布我们只有坐标。我们将click事件附加到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/

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

如何在画布圆上附加jquery click事件处理程序以显示弹出框

1 个答案: