6

我需要使用 Javascript 通过 N>2 的 N 个点平滑地绘制一条曲线。我目前在 html5 画布对象中使用 bezierCurveTo() 。我已经投入了大量时间来尝试找到实现这一目标的最佳方法，虽然 Catmull-Rom Splines 听起来很有希望，但我不知道有什么方法可以将它们绘制成线条。因此，我只剩下折线贝塞尔曲线，需要找到所有中间控制点。

我重新学习了大量的数学知识，但我在这里有一个部分工作的例子。这条线有时不是特别平滑，并且我的控制点对于某些向量是关闭的。这是我最初的 math.stackexchange 问题，我问它以获得控制点的大部分数学。

我也会对 Catmull-Rom Splines 持开放态度，但需要一些帮助来了解如何将它们转换为画布上的线条。我找到了这个资源，但在将它应用到我的需要时再次迷失了方向。

下面是从我上面的示例链接创建的图像，说明了如何复制错误的控制点：

在此处输入图像描述

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

4

1 回答 1

4

原始代码：

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 向量）

于 2011-07-23T03:58:50.510 回答