html - 画布：鼠标事件

Question

我知道不可能将事件处理程序添加到画布中的特定圆圈或矩形。但是有一些不错的框架，例如 EaselJS、KineticJS、Paper.js、Fabric.js，它们支持对特定元素的事件处理。

有人可以解释一下他们是如何工作的吗？

我认为只有两种解决方案。
1. 您为每个元素创建一个新的画布区域并将它们放在一起。通过这种方式，您可以为每个区域提供一个事件处理程序。
2. 你只有一个画布区域和一个事件处理程序。这样，您必须进行复杂的数学计算才能确定是否单击了特定元素。如果您只有圆形或矩形，此解决方案可能很简单。但是如果你有很多曲线的路径，这个解决方案就很难了。

我不想使用这些库。如果有人可以帮助我，那就太好了。

Answer 1

这是画布绘图库如何工作的简要总结

未更改的画布只是一个大位图。一旦你在画布上绘制形状，它们就是不可访问的、被遗忘的像素。

画布绘图库将所有形状存储到“保留”对象中。每个形状对象都有足够的关于自身的信息，以允许绘图库在必要时重新绘制它。

画布绘图库是对象的“控制器”。这些库具有必要的算法，可以根据需要跟踪、操作和重绘所有形状对象。

保留有关每个形状对象的以下信息：

基本识别

• ID，
• 形状名称
• 父级或容器

形状的固有属性：

• 矩形形状（矩形、图像、文本）知道宽度和高度。
• 圆形（圆形、椭圆形、正多边形、星形）知道半径和边数。
• 线条知道长度。
• 曲线形状（弧线、贝塞尔曲线、路径）知道锚点和控制点。
• 文字也知道……嗯，文字！
• 图像也知道它们的像素数据（通常存储在 javascript Image 对象中）

转型信息：

• 起始 X/Y 坐标
• 平移——偏离起始坐标的累积运动。
• 旋转 - 此形状的累积旋转（通常以弧度为单位）。
• 缩放 - 累积调整大小
• 其他变换（不太常见）是倾斜和扭曲
• 分层信息——当前 z-index

造型信息：

• 描边颜色，
• 笔画宽度，
• 填色，
• 不透明度，
• 是可见的，
• 线帽，
• 角半径

追踪能力：

• 边界框——完全包含此形状的最小矩形
• 这用于“命中测试”以查看鼠标是否在此对象内（用于选择和拖动）

Answer 2

如果您不想使用库，您可能会发现我在此线程中的回答很有帮助。正如markE所说，一旦将画布写入，就无法跟踪该数据（除非您关心遍历每个单独的像素并测试其颜色；尽管这仅对像素级碰撞检测真正有用）。