javascript - 通过一组 N 个点绘制一条曲线，其中 N>2

Question

我需要使用 Javascript 通过 N>2 的 N 个点平滑地绘制一条曲线。我目前在 html5 Canvas 对象中使用 bezierCurveTo()。我投入了大量时间来寻找实现此目的的最佳方法，虽然 Catmull-Rom Splines 听起来很有前途，但我不知道有什么方法可以将它们绘制成线条。因此，我只剩下 Poly-line Bézier 曲线，需要找到所有中间控制点。

我花了很多时间重新学习数学，但我有一个部分可用的例子 here 。这条线有时不是特别平滑，而且我的控制点对于某些矢量是关闭的问题。 <强> Here是我最初的 math.stackexchange 问题，我要求它获得控制点的大部分数学。

我也愿意使用 Catmull-Rom Splines，但需要一些帮助来了解如何将它们转换为 Canvas 上的线条。我找到了 this资源，但我又一次迷失了将它应用到我的需求中。

这是从我上面的示例链接创建的图像，说明如何复制坏控制点:

非常感谢您提前提供的任何帮助!

Answer 1

原代码:

var a = new Array(points[p-1].x,points[p-1].y);
var b = new Array(points[p].x,points[p].y);
var c = new Array(points[p+1].x,points[p+1].y);

var delta_a = subtract_v(a, b);
var delta_c = subtract_v(c, b);

// Get vector (m) perpendicular bisector
var m = normalize_v( add_v( normalize_v(delta_a),normalize_v(delta_c) ) );

// Get ma and mc
var ma = normalize_v( subtract_v(delta_a,multiply_v(multiply_v(delta_a,m),m) ) );
var mc = normalize_v( subtract_v(delta_c,multiply_v(multiply_v(delta_c,m),m) ) );

// Get the coordinates
points[p].c2x = resolution( b[0] + ( (Math.sqrt( sqr(delta_a[0]) + sqr(delta_a[1]) ) / tightness) * ma[0] ) );
points[p].c2y = resolution( b[1] + ( (Math.sqrt( sqr(delta_a[0]) + sqr(delta_a[1]) ) / tightness) * ma[1] ) );
points[p+1].c1x = resolution( b[0] + ( (Math.sqrt( sqr(delta_c[0]) + sqr(delta_c[1]) ) / tightness) * mc[0] ) );
points[p+1].c1y = resolution( b[1] + ( (Math.sqrt( sqr(delta_c[0]) + sqr(delta_c[1]) ) / tightness) * mc[1] ) );

我不知道“Get ma and mc”在这里应该做什么。您需要的是与 Angular 平分线 (m) 及其负值正交的向量。

所以这应该没问题:

var delta_a = subtract_v(b, a); // note that we're calculating AB instead of BA
var delta_c = subtract_v(c, b);

// Get an orthogonal to the angle bisector
var m = normalize_v( add_v( normalize_v(delta_a),normalize_v(delta_c) ) );

var ma = [-m[0],-m[1]];
var mc = m;

同时确保移除控制点的 resolution()。

编辑:
您还应该为边缘情况添加回退(例如，A==B 或 A==C，在这种情况下您的脚本将抛出异常，尝试规范化0向量)