如何解决重新绘制画布时单击事件侦听器
我正在构建一个使用画布(大约 6FPS)动态渲染的 javascript 游戏,其中我希望支持点击画布中的各种对象来选择它们。
作为一个最小的例子,我有一个圆圈在屏幕上移动的代码示例,同时为圆圈绑定一个点击事件侦听器并取消绑定以前的点击事件侦听器(对于画布之后不再存在的路径清除)。
https://jsfiddle.net/gbvj67ro/7/
HTML
<canvas id="canvas"></canvas>
JS
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function drawCircle(path2d,x,y,radius,fill) {
ctx.beginPath();
path2d.arc(x,2*Math.PI);
fill?ctx.fill(path2d):ctx.stroke(path2d);
ctx.closePath();
}
let eventListener = null
let i = 0
setInterval(function(){
ctx.clearRect(0,1000,200)
// remove the existing event listener
if (eventListener !== null) {
canvas.removeEventListener("click",eventListener)
}
// new path
let p1 = new Path2D();
ctx.fillStyle = 'blue';
drawCircle(p1,20 + i,20,10,true)
// new event listener function for current path
eventListener = function(e) {
if (ctx.isPointInPath(p1,e.offsetX,e.offsetY)) {
console.log("clicked p1 i=" + i);
}
}
// bind new event listener
canvas.addEventListener("click",eventListener)
i += 5
ctx.restore()
},1000);
这是实现这一目标的最佳方式吗?作为替代方案,我可以绑定一个事件侦听器,用于查询对象的当前位置以及它们是否与单击位置相交。但这需要我重新复制场景绘制逻辑。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。