2

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

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

4

2 回答 2

1

Canvas 并不像 Flash 或 DOM 树，其中事物具有排序顺序或 z-indexes。它有点像一个平面光栅图像，你必须依赖 javascript 中的其他逻辑来记住你绘制的东西的顺序和堆叠顺序。

如果您需要这种交互性，我一直发现最好使用 3rd 方库（除非它真的只是一个或两个没有多大作用的圈子的情况）。

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

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

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

  1. 将合成在画布上的所有形状/元素的坐标保存在对象或数组内，该对象或数组还跟踪它们的 z-index/排序顺序，从而让您知道最上面的内容。
  2. 使用单击鼠标坐标处的图像数据来确定已单击的内容
  3. 使用多个相互合成的画布并让 DOM 为点击事件完成工作
于 2012-08-30T08:56:51.280 回答
1

你可能想要一个像 EaselJS 这样的框架，它有一个更好的 api 来完成你想要做的事情。准系统画布 2d-context 在显示对象/精灵行为方面没有提供太多。

上面的回复还提到了某种表示层的列表。我认为实施不会很困难，只是与半径一起检查的另一个条件。

于 2012-08-30T08:59:20.167 回答