javascript - 查找 Path2D 的维度

Question

在我的一个项目中，我正在将一堆自定义 Path2D 形状绘制到 Canvas 上。由于我需要它是可扩展的，以便能够执行诸如对它们执行命中检测以及与其他元素交互之类的操作，因此我需要能够检测给定 Path2D 的大小。

据我所知，没有办法通过 Path2D 的界面来做到这一点(但是，它仍然是实验性的)，有谁知道我如何实现这一点，除了要求用户在子类化我的类时自己指定宽度和长度？

谢谢。

Answer 1

对于命中检测，您可以使用 context.isPointInPath。

关于 Path2D 总长度和边界框，您是正确的...

没有像 SVG 的 .getTotalLength 或 .getPointAtLength 这样的原生 Path2D(或 html5 canvas)方法。因此，要计算总长度或边界框，您必须计算沿路径每个组成部分的点。

您可能知道(或者 Google 可以知道)这条线有一个简单的几何解决方案，可以根据线段上的起点和终点计算长度和边界。圆弧有一个同样简单的几何弧长计算和一个简单的三 Angular 解来绘制给定中心点、半径和起点/终点弧 Angular 的点。 提示可以通过找到以下项的最小和最大 x,y 值来计算弧的边界:弧的中心点和弧上 0、90、180 和 270 度的任何现有点。

贝塞尔曲线有点难绘制，所以这里有一个提示:可以使用 De Casteljau 算法绘制三次贝塞尔曲线。也可以使用 De Casteljau 的算法绘制二次贝塞尔曲线——只需将 2 个中间控制点设置为彼此相等，三次贝塞尔曲线就会变成二次贝塞尔曲线。这是一种“蛮力”方法，但可以通过沿曲线采样少至 20 个间隔来获得相当准确的测量值。

如果您的设计要求允许更粗略的近似，那么您会发现三次贝塞尔曲线总是包含在它们的控制点内。

如果您更喜欢数学，还可以使用一阶导数根来更直接地计算贝塞尔曲线的边界。欲了解更多信息，这里有一篇关于贝塞尔曲线的优秀论文:http://pomax.github.io/bezierinfo/