如何在HTML5Canvas中实现事件系统（有改造？

Question

假设我这样做了：

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

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

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

与此同时，我试图在某些标量（translateX、translateY、rotate、scale）中描述 Quamolit 中的每个元素，以便于进行插值。

Answer 1

Canvas 在所谓的 "immediate-mode" 中绘制，它不会跟踪绘制的内容。

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

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

Answer 2

除了ctx.isPointInPath()，我在规格

中找到了一个叫做Hit Region的东西

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

并且如 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"});

可以为每个路径指定一个 id。单击时，该 ID 将与 event.

一起发回

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

如何在HTML5Canvas中实现事件系统（有改造？

How to implement event system in HTML5 Canvas(with transformation?

graphics

canvas