画布：鼠标事件

Question

我知道无法将事件处理程序添加到画布中的特定圆或矩形。但是有一些很好的框架，比如EaselJS，KineticJS，Paper.js，Fabric.js，它们支持对特定元素的事件处理。

有人可以解释我他们是如何工作的？

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

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

Answer 1

以下是画布图库如何工作的简要摘要

未经改动的画布只是一个很大的位图。在画布上绘制形状后，它们是无法访问的，被遗忘的像素。

Canvas绘图库将您的所有形状存储到“保留”对象中。每个形状对象都有足够的自身信息，以便在必要时允许绘图库重绘。

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

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

基本识别

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

形状的固有属性：

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

转型信息：

• 启动X / Y坐标
• 翻译 - 从起始坐标开始累积的移动。
• 此形状的旋转累积旋转（通常以弧度表示）。
• Scalings-accumulation resizings
• 其他变换（不太常见）是倾斜和扭曲
• 分层信息 - 当前的z-index

样式信息：

• StrokeColor，
• StrokeWidth，
• FillColor，
• 不透明度，
• isVisible，
• lineCaps，
• cornerRadius

追踪能力：

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

Answer 2

如果您不想使用图书馆，可能会发现我的回答in this thread很有帮助。正如markE所说，一旦写入画布，就无法跟踪那些数据（除非你想要遍历每个单独的像素并测试它的颜色;虽然这只对像素级碰撞检测非常有用）。