在我的一个项目中，我正在将一堆自定义的Path2D形状绘制到Canvas上。由于我需要它具有可扩展性，能够执行诸如对它们执行命中检测以及与其他元素进行交互之类的工作，因此我需要能够检测给定Path2D的大小。
据我所知无法通过Path2D的界面进行此操作（但仍处于实验阶段），有人知道我将如何实现这一目标，但在子类化时无需要求用户自行指定宽度和长度我的课？
谢谢。
最佳答案
对于命中检测，可以使用context.isPointInPath。
您对Path2D总长度和边界框是正确的...
没有像SVG的.getTotalLength或.getPointAtLength这样的本机Path2D（或html5 canvas）方法。因此，要计算总长度或边界框，您必须沿路径的每个分量计算点。
您可能知道（或Google知道），直线具有简单的几何解决方案，可以根据线段上的起点和终点来计算长度和边界。圆弧具有同样简单的几何圆弧长度计算和简单的三角解法，可根据给定的中心点，半径和起始/结束圆弧角来绘制点。提示：圆弧的边界可以通过以下方式计算得出：圆弧的中心点和圆弧上任何现有点在0、90、180和270度处的最小和最大x，y值。
贝塞尔曲线很难绘制，因此这里有一个提示：三次贝塞尔曲线可以使用De Casteljau算法绘制。也可以使用De Casteljau算法绘制二次Bezier曲线-只需将两个中间控制点设置为彼此相等，则三次Bezier曲线变为二次Bezier曲线。这是一种“强力”方法，但是通过沿曲线采样少至20个间隔就可以获得相当准确的测量结果。
如果您的设计要求允许使用更粗略的近似值，那么您会发现三次贝塞尔曲线始终包含在它们的控制点内。
如果您更倾向于数学，也可以使用一阶导数根更直接地计算Bezier曲线的边界。有关更多信息，请参见以下有关贝塞尔曲线的出色论文：http://pomax.github.io/bezierinfo/