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

时间:2015-12-27 07:50:14

标签: javascript svg

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

1 个答案:

答案 0 :(得分:4)

您不会说您是要离线(预先准备的路径)还是在线(动态)。如果离线状态良好,请使用Inkscape等工具。

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

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

您通常使用De Casteljau算法将每个bezier分成两个。然后查看两个半贝塞尔曲线中的每一个。如果贝塞尔直线足以满足您决定的平直度限制,则停止分割。否则,分成两半再试一次。

在流程结束时,您应该获得与bezier版本无法区分的折线。或者,如果您使用"平坦度测试"比这更有点粗略,你会得到更粗糙的形状近似。在你的情况下是一张地图。

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

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