svg - SVG 路径上的 Catmull-Rom 插值

Question

我正在尝试使用 SVG 路径创建高性能、美观的铅笔工具。

我正在记录鼠标坐标以绘制路径。为了获得高保真路径(精确到用户的运动)，我需要为每个像素运动记录一个点。

保持路径中的每一个点都会产生大量的点，即 不是 后期协作功能的理想选择(来回发送大量点效率不高)，加上每次我需要操作它们时解析巨大的路径是一个瓶颈

在路径的线性区域，删除冗余点，只保留表示线段所需的点 - 我使用 Ramer-Douglas-Peucker 来做到这一点。算法。

但是简化路径会将其变成低保真多边形

在这一点上，路径实际上只是连接线 - 因此路径看起来是锯齿状的。

一个可能的解决方案是将路径点与 Cubic Bezier 连接起来 - 但是这在简化的路径上效果不佳。每个点之间的距离对于三次贝塞尔曲线来说太大而不能“坐”好，因此平滑的路径不再准确地代表用户的预期路径。

另一种解决方案是简单地使用“后处理”算法，例如 Schneider's Algorithm在原始路径上 - 这个算法实际上不会实时工作，因为它是一个性能 pig

理想的解决方案

一个(我认为)可行的解决方案是使用 Centripetal Catmull-Rom插值。



在我研究的所有算法中，这似乎是最有前途的，因为:

它不会在狭窄的角落创建自相交

它更贴合点，因此它更准确地表示
原始路径。

Catmull-Rom 是一种插入一系列
常规 x/y 点或原始路径是否需要由
曲线？

Answer 1

直接回答您的问题:

是的。 Catmull-Rom 样条是一种对一系列 (x, y, z) 点进行插值的算法。它将在每两个连续点之间生成三次多项式曲线。

SVG 路径不能直接使用 Catmull Rom 样条。您需要先将其转换为三次贝塞尔曲线。

对于由点 P0、P1、P2 和 P3 以及节点序列 t0、t1、t2、t3 定义的曲线段，可以通过 https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline 中提供的递归公式计算向心 Catmull-Rom 样条(定义在点 P1 和 P2 之间)。因此，我不会在这里详述。

要将其转换为三次贝塞尔曲线，您需要计算第一个
P1 和 P2 处的导数为

M1 = (t2-t1)*(c1*(P1-P0)/(t1-t0) + c2*(P2-P1)/(t2-t1))
M2 = (t2-t1)*(d1*(P2-P1)/(t2-t1) + d2*(P3-P2)/(t3-t2))

在哪里

 c1 = (t2-t1)/(t2-t0),
 c2 = (t1-t0)/(t2-t0),
 d1 = (t3-t2)/(t3-t1),
 d2 = (t2-t1)/(t3-t1)

然后您可以将其转换为具有 4 个控制点的三次贝塞尔曲线:Q0、Q1、Q2 和 Q3:

Q0 = P1
Q1 = P1 + M1/3
Q2 = P2 - M2/3
Q3 = P2