JS 绘制 Cardinal 样条曲线

Cardinal 曲线

可以参考一下我另一篇文章 Cardinal 与三阶 Bezier 相互转换。

根据定义，给定点集 { P k − 1 , P k , P k + 1 , P k + 2 } \{ \mathbf {P}_{k-1}, \mathbf {P}_k, \mathbf {P}_{k+1}, \mathbf {P}_{k+2} \} {Pk−1​,Pk​,Pk+1​,Pk+2​} , 则 ${\mathbf{P}}_k$ 到 ${\mathbf{P}}_{k+1}$ 之间的曲线可以由如下方程生成：
$$\begin{array}{rl}\mathbf{P}(u)& =\mathbf{a}{u}^3+\mathbf{b}{u}^2+\mathbf{c}u+\mathbf{d}\\ \mathbf{d}& ={\mathbf{P}}_k\\ \mathbf{c}& =s({\mathbf{P}}_{k+1}-{\mathbf{P}}_{k-1})\\ \mathbf{b}& =3({\mathbf{P}}_{k+1}-{\mathbf{P}}_k)-s({\mathbf{P}}_{k+2}-{\mathbf{P}}_k)-2\mathbf{c}\\ \mathbf{a}& =({\mathbf{P}}_{k+1}-{\mathbf{P}}_k)-\mathbf{c}-\mathbf{b}\end{array}$$
其中，$s$ 用于控制曲线的松紧，取值范围为 [0, 1]。 0 表示最紧绷 (无平滑转角)；1 表示最松弛。

绘制思路

既然方程已经给出了，则只需将 $u$ 从 0 到 1 采样并依据公式计算坐标即可。不过，由于不好把握 $u$ 的采样间隔，这里并不打算采用这种方案。

我的思路是：

1. 先计算两点之间 x, y 方向的差值
2. 取差值绝对值较大的那个值，按预设精度进行细分，计算出 $u$ 的步长
3. 根据 $u$ 的步长，计算方程的增量 $\Delta \mathbf{P}$
4. 采用前向差分法，依次计算中间点坐标
   a. 如果中间点到上一线段的距离小于预设精度，抛弃该点

前向差分

设有一个三次样条曲线，其表达式如下：
$$\mathbf{P}(u)=\mathbf{a}{u}^3+\mathbf{b}{u}^2+\mathbf{c}u+\mathbf{d}$$
如果将 $u$ 的取值范围细分为具有固定大小 $h$ 的子区间，则相邻两点 $x$ 坐标为：
$$\begin{array}{rl}{x}_k& =x(u_k)\\ x_{k+1}& =x(u_k+h)\end{array}$$
可计算出前向差分为：
$$\begin{array}{rl}{\Delta }_1{x}_k& =x_{k+1}-x_k\\ & =3\mathbf{a}h{u}_k^2+(3\mathbf{a}{h}^2+2\mathbf{b}h)u_k+(\mathbf{a}{h}^3+\mathbf{b}{h}^2+\mathbf{c}h)\end{array}$$

由于 ${\Delta }_1{x}_k$ 是关于 $u$ 的多项式，计算复杂，所以也可以计算出 ${\Delta }_1{x}_k$ 的增量 ${\Delta }_2{x}_k$，这样即可用加法计算出 ${\Delta }_1{x}_k$ 的值。不断重复计算增量的过程，直到增量为常数。最终可以得到：
$$\begin{array}{rl}{\Delta }_1{x}_k& =3\mathbf{a}h{u}_k^2+(3\mathbf{a}{h}^2+2\mathbf{b}h)u_k+(\mathbf{a}{h}^3+\mathbf{b}{h}^2+\mathbf{c}h)\\ {\Delta }_2{x}_k& =6\mathbf{a}{h}^2{u}_k+6\mathbf{a}{h}^3+2\mathbf{b}{h}^2\\ {\Delta }_3{x}_k& =6\mathbf{a}{h}^3\end{array}$$

根据以上公式，从 $u_0=0$ 开始，步长为 $h$，$x$ 坐标的迭代过程为：

$k$	${\Delta }_3{x}_k$	${\Delta }_2{x}_k$	${\Delta }_1{x}_k$	$x_k$
0	$6\mathbf{a}{h}^3$	$6\mathbf{a}{h}^3+2\mathbf{b}{h}^2$	$\mathbf{a}{h}^3+\mathbf{b}{h}^2+\mathbf{c}h$	$\mathbf{d}$
1	$6\mathbf{a}{h}^3$	${\Delta }_2{x}_0+{\Delta }_3{x}_0$	${\Delta }_1{x}_0+{\Delta }_2{x}_0$	$x_0+{\Delta }_1{x}_0$
$⋮$
$k$	$6\mathbf{a}{h}^3$	${\Delta }_2{x}_{k-1}+{\Delta }_3{x}_{k-1}$	${\Delta }_1{x}_{k-1}+{\Delta }_2{x}_{k-1}$	$x_{k-1}+\Delta x_{k-1}$

可以看到，每次迭代只需计算 3 次加法。

成果

最终效果如下图，也可以点击此处查看演示效果及源代码。

看起来效果还是不错的。不过，根据算法描述可以发现，如果两个点相距很近，就会因为中间点不够多而走样。

其它生成方法

当然还其它方法也可以绘制。比如，二分迭代法。每次计算出曲线的中点，将曲线按中点分为两部分，然后迭代这个过程。还可以先把曲线转换为 Bezier 曲线，然后进行绘制。