如何减少贝塞尔曲线路径中的点数

ban*_*abu 4 javascript svg

我有一个大的 svg 路径,它有二次贝塞尔曲线。路径数据用于绘制地图。如何减少贝塞尔曲线的点数而不扭曲整体形状?

Pau*_*eau 6

您没有说明您是想离线(预先准备的路径)还是在线(即时)执行此操作。如果可以离线使用,请使用 Inkscape 等工具。

如果您想自己计算简化曲线,那么用于执行此操作的典型算法也与用于绘制贝塞尔曲线的算法相同。该算法称为“扁平化”。

基本上,这个想法是将贝塞尔曲线转换为一系列直线段。因为您不希望线段的平坦度可见,所以您必须考虑绘图的比例以及贝塞尔曲线的弯曲程度。如果贝塞尔曲线非常弯曲,则与相当直的情况相比,您必须使用更多的线段。

您通常要做的就是使用 De Casteljau 算法将每个贝塞尔曲线分成两部分。然后查看两条半贝塞尔曲线。如果贝塞尔曲线足够直,足以满足您决定的平坦度限制,则停止划分。否则,分成两半并重试。

在该过程结束时,您应该得到一条与贝塞尔曲线版本没有区别的折线。或者,如果您使用比这更粗略的“平坦度测试”,您将获得更粗略的形状近似值。在你的情况下是一张地图。

如果你用谷歌搜索,bezier flattening你可以找到许多关于该技术的论文。还有几页描述了如何以更友好的方式进行操作。例如,这是关于生成偏移曲线的,但首先描述如何展平曲线:

https://seant23.wordpress.com/2010/11/12/offset-bezier-curves/