如何在HTML5 Canvas中实现事件系统(带转换

Question

假设我这样做了：

• 保存画布并应用变换，例如A
• 在点(x, y)处绘制一个形状（矩形等），给它一个id，"pointer-#{itoa}"
• （随机重复，这样我们得到一堆保存的画布状态）
• 恢复画布状态
• 随机重复

现在有一个点击事件，我想找出被点击的形状的ID。有什么工具可以做到这一点吗？

---

我想提到的是，我试图实现一个基于Canvas的HTML子集（项目名称Quamolit），以更好地支持转换。在一些转换之后，找出哪个元素被点击就成了一个巨大的问题。

同时，我试图用一些标量（translateX、translateY、rotate、scale）来描述Quamolit中的每个元素，以使它们易于插值。

Answer 1

Canvas以所谓的"即时模式"绘制，它不跟踪绘制的内容。

但是你可以使用renderingContext.isPointInPath()(https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath)以测试一个点（即鼠标单击的坐标）是否在路径内。绘图时必须使用此功能，因此使用此功能可能不会很麻烦，但这是当前实现此功能的方法。默认情况下，isPointInPath()使用零缠绕规则来检测点是否在路径内，这与浏览器用于填充路径的算法相同。

未来将会有HitRegories可以简化这一点，但这还没有在所有浏览器中实现。(https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/addHitRegion)

Answer 2

除了ctx.isPointInPath()，我还在规范中发现了一种名为Hit Region的东西

http://www.w3.org/TR/2dcontext/#hit-区域

正如MDN上所描述的，这正是判断点击哪条路径的最佳解决方案：

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/addHitRegion

canvas.addEventListener("mousemove", function(event){
  if(event.region) {
    alert("ouch, my eye :(");
  }
});
// eyes
ctx.beginPath();
ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
ctx.arc(130, 80, 10, 0, 2 * Math.PI, false);
ctx.fill();
ctx.addHitRegion({id: "eyes"});

可以为每个路径指定CCD_ 8。单击时，该id将与event一起发送回。

坏消息是，任何浏览器都不完全支持此API。Chrome和Firefox支持其中的基本部分。