Javascript 如何减少bezier曲线路径中的点数

我有一个大的svg路径，它有方形贝塞尔曲线。 路径数据用于绘制地图。

---

如何在不扭曲整体形状的情况下减少贝塞尔曲线的点数？

您不能说是离线（预先准备的路径）还是在线（动态）执行此操作。如果脱机可以，请使用Inkscape之类的工具

如果要自己计算简化曲线，则用于计算的典型算法与绘制贝塞尔曲线的算法相同。该算法称为“展平”

其基本思想是将贝塞尔曲线转换为一系列直线段。因为您不希望线段的平面度可见，所以必须考虑图形的比例以及贝塞尔曲线的弯曲度。如果贝塞尔曲线非常弯曲，则必须使用比直线更多的线段

您通常要做的是使用De Casteljau算法将每个bezier分割成两个。然后看两条半贝塞尔曲线中的每一条。如果贝塞尔曲线足够直，可以满足您决定的平面度限制，则停止分割。否则，将其分成两半，然后重试

在该过程结束时，您应该得到一条与贝塞尔版本无法区分的多段线。或者，如果你使用一个比这更简单的“平面度测试”，你会得到一个更粗糙的形状近似值。对你来说，这是一张地图

如果你在谷歌上搜索bezier展平，你可以找到许多关于这项技术的论文。还有几页介绍了如何以更友好的方式进行。例如，这一部分是关于生成偏移曲线的，但首先描述如何展平曲线：

---

Inkscape

有一个明确用于路径简化的工具（Alt-p>Simplify，或简单的Ctrl-L），但是-请注意，有些线最终会有更多（而不是更少）的控制点，但是-使用更简单的线方程仍然意味着有更多控制点的线可以更快地绘制。另一种考虑的方法是MIPMAP——即，使用不同大小的几个相同的位图图像，根据显示区域的大小选择哪个位图来显示。Inkscape可在此处下载：