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

Question

我需要使用Javascript平滑地绘制N个点的曲线，其中N> 2。我目前在html5 canvas对象中使用bezierCurveTo（）。我投入了大量的时间来寻找实现这一目标的最佳方法，虽然Catmull-Rom Splines看起来很有前途，但我并不知道将它们画成线条的方法。因此，我留下了Poly-lineBézier曲线，需要找到所有中间控制点。

我花了很多时间重新学习数学，但我有一个部分工作的例子here 。这条线有时不是特别平滑，并且我的控制点在某些矢量关闭时出现问题。 Here是我最初的math.stackexchange问​​题，我要求获得控制点的大部分数学。

我也会对Catmull-Rom Splines开放，但需要一些帮助才能将它们转换为画布上的线条。我找到了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”应该在这里做什么。你需要的是一个与角平分线（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向量）