Question

假设我这样做了：

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

现在有一个点击事件，我想找出点击的那个形状的ID。有没有这样做的工具？

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

与此同时，我试图将Quamolit中的每个元素保留在一些标量（translateX，translateY，rotate，scale）中，以便于插值。

Answer 1

Canvas以所谓的“立即模式”绘制，它不会跟踪绘制的内容。

但您可以使用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支持其中的基本部分。

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

2 个答案: