重叠对象上的HTML画布事件

HTML canvas events on overlapping objects?

本文关键字：事件 布事件 对象 HTML 重叠      更新时间：2023-09-26

如果我有一个画布，上面有一个圆圈，点击后会改变颜色，我可以在画布元素上使用点击事件，并处理其数学运算（距离公式计算<=半径）。但是，如果我有两个重叠的圆（如van图），并且我点击两个圆的中间，假设只有顶部的圆应该改变颜色，会怎么样？如果在这种情况下应用第一个圆的数学运算，两个圆都会改变颜色。

我将如何处理画布中重叠对象的事件，如上面的例子？希望有一个快速/高效的算法？

你可能想要一个像EaselJS这样的框架，它为你想要做的事情提供了更好的api。Barebones画布2d上下文在显示对象/精灵行为方面没有提供太多。

上面的回答也提到了一些表示层的列表。我不认为实现会很困难，只是需要检查半径的另一个条件。

Canvas并不像Flash，也不像DOM树，因为它有排序顺序或z索引。它有点像一个平面光栅图像，您必须依赖javascript中的其他逻辑来记住序列&你画的东西的堆叠顺序。

如果你需要这种互动性，我一直认为最好使用第三方库（除非它真的只是一两个圆圈的情况，效果不太好）。

对于交互式的基于"形状"的javascript图形，我建议使用Raphael.js或D3，它们实际上更像是SVG工具，而不是画布工具，所以可能不适合您，但它们很简单，可以跨浏览器使用。

还有processing.js（processing the Java lib的js端口），感觉有点像flash，并且可以跟踪所有级别和对象。还有很多其他话题，但那是另一个话题。

如果它非常简单，选项可能是：

  1. 将画布上合成的所有形状/元素的坐标保持在一个对象或数组内，该对象或数组还跟踪其z索引/排序序列，从而让您知道顶部的内容
  2. 使用单击鼠标坐标处的图像数据来确定已单击的内容
  3. 使用相互组合的多个画布，并让DOM为单击事件执行操作
相关文章：