如何使用javascript HTML5 canvas通过N点绘制平滑曲线？

how to draw smooth curve through N points using javascript HTML5 canvas?

对于绘图应用程序，我将鼠标移动坐标保存到数组中，然后使用lineTo进行绘制。结果线不平滑。如何在所有收集的点之间生成一条曲线？

我已经用谷歌搜索过，但是我只发现了3个绘制线条的函数：对于2个采样点，只需使用lineTo。对于3个采样点quadraticCurveTo，对于4个采样点bezierCurveTo。

(我尝试为数组中的每4个点绘制一个bezierCurveTo，但这会导致每4个采样点扭结，而不是连续的平滑曲线。)

我该如何编写一个函数绘制5个采样点及更多的平滑曲线？

将随后的采样点与不相交的" curveTo"类型的函数连接在一起的问题在于，曲线相交的位置不平滑。这是因为两条曲线共享一个端点，但受到完全不相交的控制点的影响。一种解决方案是"弯曲"到下两个后续采样点之间的中点。使用这些新的内插点将曲线连接起来，可以在端点处实现平滑过渡(一次迭代的终点变成下一次迭代的控制点。)换句话说，两条不相交的曲线现在有很多共同点。

该解决方案摘自《 Foundation ActionScript 3.0动画：使事物移动》一书。第95页-渲染技术：创建多条曲线。

注意：此解决方案实际上并没有绘制出每个点，这是我的问题的标题(而是通过采样点近似绘制曲线，但从不通过采样点)，但是出于我的目的(绘图应用程序)，对我来说已经足够了，从视觉上讲，您无法分辨出区别。有一种解决方案可以遍历所有样本点，但是要复杂得多(请参阅http://www.cartogrammar.com/blog/actionscript-curves-update/)

这是近似方法的图形代码：

1
2
3
4
5
6
7
8
9
10
11
12

// move to the first point
ctx.moveTo(points[0].x, points[0].y);

for (i = 1; i < points.length - 2; i ++)
{
var xc = (points[i].x + points[i + 1].x) / 2;
var yc = (points[i].y + points[i + 1].y) / 2;
ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
}
// curve through the last two points
ctx.quadraticCurveTo(points[i].x, points[i].y, points[i+1].x,points[i+1].y);

相关讨论

有点晚了，但是为了记录。

您可以通过使用基本样条曲线(也称为规范样条曲线)绘制穿过点的平滑曲线来获得平滑线。

我为画布制作了此功能-它分为三个功能以增加多功能性。主要包装函数如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function drawCurve(ctx, ptsa, tension, isClosed, numOfSegments, showPoints) {

showPoints = showPoints ? showPoints : false;

ctx.beginPath();

drawLines(ctx, getCurvePoints(ptsa, tension, isClosed, numOfSegments));

if (showPoints) {
ctx.stroke();
ctx.beginPath();
for(var i=0;i<ptsa.length-1;i+=2)
ctx.rect(ptsa[i] - 2, ptsa[i+1] - 2, 4, 4);
}
}

要绘制曲线，请按以下顺序排列一个带有x，y点的数组：x1,y1, x2,y2, ...xn,yn。

像这样使用它：

1
2
3
4
5

var myPoints = [10,10, 40,30, 100,10]; //minimum two points
var tension = 1;

drawCurve(ctx, myPoints); //default tension=0.5
drawCurve(ctx, myPoints, tension);

上面的函数调用两个子函数，一个子函数计算平滑点。这将返回一个包含新点的数组-这是计算平滑点的核心功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

并将点实际绘制为平滑曲线(或任何其他分段线，只要您具有x，y数组)：

1
2
3
4

function drawLines(ctx, pts) {
ctx.moveTo(pts[0], pts[1]);
for(i=2;i<pts.length-1;i+=2) ctx.lineTo(pts[i], pts[i+1]);
}

1	canvas { border: 1px solid red; }

1	<canvas id="c"><canvas>

结果是：

Example pix

您可以轻松扩展画布，因此可以这样调用它：

1	ctx.drawCurve(myPoints);

将以下内容添加到javascript中：

1
2
3
4
5

if (CanvasRenderingContext2D != 'undefined') {
CanvasRenderingContext2D.prototype.drawCurve =
function(pts, tension, isClosed, numOfSegments, showPoints) {
drawCurve(this, pts, tension, isClosed, numOfSegments, showPoints)}
}

您可以在NPM(npm i cardinal-spline-js)或GitLab上找到更优化的版本。

相关讨论

首先，这太好了。 :-)但是，看该图像，它是否不会(误导)印象是值实际上在＃9和＃10之间沿途低于值＃10？ (我从实际看到的点开始计数，因此＃1将是初始向下轨迹顶部附近的那个，＃2将是最底部[图形中的最低点]的那个，依此类推...)
@ T.J。Crowder是对曲线进行插值时的正确行为。您可以通过调整张力值进行调整。张力受上一个点和下一个点的影响，并且由于下一个点向上的陡峭角度，前一个点被迫提前舍入。这是基数样条的工作方式:-)
谢谢。但是，图表又该避免误导吗？也许通过将样条曲线目标定为向上摆动时稍微高一点的点，以便绘制出最低点？我只是看到外行人(像我一样，涉及复杂的图形绘制)确实非常非常容易地误解了。
@ T.J。Crowder对不起，我不确定我是否理解您的意思。该图是给定和渲染的点的实际快照(来自功能随附的演示)。我不知道这怎么会误导人...它不是图表，而是基数样条。我想念什么吗？
// @肯：还是我做到了。 :-)参考我之前列出的编号，图表中的跌幅后面是否有＃10之前的数据？
只是想说，经过几天的搜索，这是唯一真正按照我的意愿工作的工具。非常感谢
"很抱歉，您尝试查看的文章已于2015年1月18日删除。请转到客户端脚本目录，以查看本节中可用文章的列表。"
是是是谢谢！我跳起来跳起舞来。
@ T.J。Crowder(对不起，请稍候(？！)：)。)下降是张力计算的结果。为了以正确的角度/方向"击中"下一个点，张力迫使曲线向下倾斜，以便它可以在下一个段的正确角度处继续前进(这里的角度可能不是一个好词，我的英语缺少。 )。使用前两个点和后两个点计算张力。简而言之：不，它不代表任何实际数据，仅用于计算张力。
您的代码中存在类型错误。参数ptsa应该为pts，否则会抛出错误。
我正在使用html canvas 5，但是我的动画无法正常工作。请您帮我解决这个问题。please：stackoverflow.com/questions/37208156/
如果我很好地理解中间点会产生很多东西，而你加入它们，它会如何扩展，它可能会变得很容易
@ K3N：我的Javascript真的很生锈，多年来我都没有碰过它。但是对于某个项目，我可能需要它。我将您的代码复制到此HTML文件中，并在Chrome(v59.0.3071.115，64位)中打开时，只看到一个空白框。没有绘制曲线。
@ anta40记住在加载DOM之后运行脚本，即。在window.onload = ...上，或将脚本放在正文的末尾。
请注意，此功能会在样本间距不均匀的图形上产生不良结果。曲线可能会在x轴上超调，并且会朝着下一个点并通过下一个点"及时返回"，并且会向后弯曲，从而在图中形成S形。此外，插值可能会低于零，这在某些图表上是不希望的(顺便说一句，这很容易解决)。
很久以前，您发布了此解决方案，今天您帮助我解决了一个大问题。非常感谢你！
@lexBay很高兴它解决了(并感谢您的反馈，非常感谢)。 btw，这里是此代码的更新版本。
获取第一个点和最后一个点并追加时存在一个小错误。对于从数组开始的第一次追加，您需要执行两次相同的追加，以获取x和y坐标。否则，您将x坐标复制两次

第一个答案并不能说明所有问题。该图将精确地穿过所有点，并且将是一条完美曲线，其中点[[x：，y：}] n个这样的点。

1
2
3
4
5
6
7
8
9
10
11
12
13

相关讨论

正如Daniel Howard所指出的，Rob Spencer在http://scaledinnovation.com/analytics/splines/aboutSplines.html上描述了您想要的东西。

这是一个交互式演示：http://jsbin.com/ApitIxo/2/

这是jsbin关闭时的摘要。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
Demo smooth connection
</head>
<body>

Click to build a smooth path.
(See Rob Spencer's article)
<label><input type="checkbox" id="showPoints" checked> Show points</label>
<label><input type="checkbox" id="showControlLines" checked> Show control lines</label>

<label>
<input type="range" id="tension" min="-1" max="2" step=".1" value=".5"> Tension <span id="tensionvalue">(0.5)</span>
</label>

<canvas id="canvas"></canvas>
<style>
html { position: relative; height: 100%; width: 100%; }
body { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
canvas { outline: 1px solid red; }
#display { position: fixed; margin: 8px; background: white; z-index: 1; }
</style>

function update() {
$("tensionvalue").innerHTML="("+$("tension").value+")";
drawSplines();
}
$("showPoints").onchange = $("showControlLines").onchange = $("tension").onchange = update;

// utility function
function $(id){ return document.getElementById(id); }
var canvas=$("canvas"), ctx=canvas.getContext("2d");

function setCanvasSize() {
canvas.width = parseInt(window.getComputedStyle(document.body).width);
canvas.height = parseInt(window.getComputedStyle(document.body).height);
}
window.onload = window.onresize = setCanvasSize();

function mousePositionOnCanvas(e) {
var el=e.target, c=el;
var scaleX = c.width/c.offsetWidth || 1;
var scaleY = c.height/c.offsetHeight || 1;

if (!isNaN(e.offsetX))
return { x:e.offsetX*scaleX, y:e.offsetY*scaleY };

var x=e.pageX, y=e.pageY;
do {
x -= el.offsetLeft;
y -= el.offsetTop;
el = el.offsetParent;
} while (el);
return { x: x*scaleX, y: y*scaleY };
}

canvas.onclick = function(e){
var p = mousePositionOnCanvas(e);
addSplinePoint(p.x, p.y);
};

function drawPoint(x,y,color){
ctx.save();
ctx.fillStyle=color;
ctx.beginPath();
ctx.arc(x,y,3,0,2*Math.PI);
ctx.fill()
ctx.restore();
}
canvas.onmousemove = function(e) {
var p = mousePositionOnCanvas(e);
$("mouse").innerHTML = p.x+","+p.y;
};

var pts=[]; // a list of x and ys

// given an array of x,y's, return distance between any two,
// note that i and j are indexes to the points, not directly into the array.
function dista(arr, i, j) {
return Math.sqrt(Math.pow(arr[2*i]-arr[2*j], 2) + Math.pow(arr[2*i+1]-arr[2*j+1], 2));
}

// return vector from i to j where i and j are indexes pointing into an array of points.
function va(arr, i, j){
return [arr[2*j]-arr[2*i], arr[2*j+1]-arr[2*i+1]]
}

function ctlpts(x1,y1,x2,y2,x3,y3) {
var t = $("tension").value;
var v = va(arguments, 0, 2);
var d01 = dista(arguments, 0, 1);
var d12 = dista(arguments, 1, 2);
var d012 = d01 + d12;
return [x2 - v[0] * t * d01 / d012, y2 - v[1] * t * d01 / d012,
x2 + v[0] * t * d12 / d012, y2 + v[1] * t * d12 / d012 ];
}

function addSplinePoint(x, y){
pts.push(x); pts.push(y);
drawSplines();
}
function drawSplines() {
clear();
cps = []; // There will be two control points for each"middle" point, 1 ... len-2e
for (var i = 0; i < pts.length - 2; i += 1) {
cps = cps.concat(ctlpts(pts[2*i], pts[2*i+1],
pts[2*i+2], pts[2*i+3],
pts[2*i+4], pts[2*i+5]));
}
if ($("showControlLines").checked) drawControlPoints(cps);
if ($("showPoints").checked) drawPoints(pts);

drawCurvedPath(cps, pts);

}
function drawControlPoints(cps) {
for (var i = 0; i < cps.length; i += 4) {
showPt(cps[i], cps[i+1],"pink");
showPt(cps[i+2], cps[i+3],"pink");
drawLine(cps[i], cps[i+1], cps[i+2], cps[i+3],"pink");
}
}

function drawPoints(pts) {
for (var i = 0; i < pts.length; i += 2) {
showPt(pts[i], pts[i+1],"black");
}
}

function drawCurvedPath(cps, pts){
var len = pts.length / 2; // number of points
if (len < 2) return;
if (len == 2) {
ctx.beginPath();
ctx.moveTo(pts[0], pts[1]);
ctx.lineTo(pts[2], pts[3]);
ctx.stroke();
}
else {
ctx.beginPath();
ctx.moveTo(pts[0], pts[1]);
// from point 0 to point 1 is a quadratic
ctx.quadraticCurveTo(cps[0], cps[1], pts[2], pts[3]);
// for all middle points, connect with bezier
for (var i = 2; i < len-1; i += 1) {
// console.log("to", pts[2*i], pts[2*i+1]);
ctx.bezierCurveTo(
cps[(2*(i-1)-1)*2], cps[(2*(i-1)-1)*2+1],
cps[(2*(i-1))*2], cps[(2*(i-1))*2+1],
pts[i*2], pts[i*2+1]);
}
ctx.quadraticCurveTo(
cps[(2*(i-1)-1)*2], cps[(2*(i-1)-1)*2+1],
pts[i*2], pts[i*2+1]);
ctx.stroke();
}
}
function clear() {
ctx.save();
// use alpha to fade out
ctx.fillStyle ="rgba(255,255,255,.7)"; // clear screen
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.restore();
}

function showPt(x,y,fillStyle) {
ctx.save();
ctx.beginPath();
if (fillStyle) {
ctx.fillStyle = fillStyle;
}
ctx.arc(x, y, 5, 0, 2*Math.PI);
ctx.fill();
ctx.restore();
}

function drawLine(x1, y1, x2, y2, strokeStyle){
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
if (strokeStyle) {
ctx.save();
ctx.strokeStyle = strokeStyle;
ctx.stroke();
ctx.restore();
}
else {
ctx.save();
ctx.strokeStyle ="pink";
ctx.stroke();
ctx.restore();
}
}

</body>
</html>

我发现这很好用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function drawCurve(points, tension) {
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);

var t = (tension != null) ? tension : 1;
for (var i = 0; i < points.length - 1; i++) {
var p0 = (i > 0) ? points[i - 1] : points[0];
var p1 = points[i];
var p2 = points[i + 1];
var p3 = (i != points.length - 2) ? points[i + 2] : p2;

var cp1x = p1.x + (p2.x - p0.x) / 6 * t;
var cp1y = p1.y + (p2.y - p0.y) / 6 * t;

var cp2x = p2.x - (p3.x - p1.x) / 6 * t;
var cp2y = p2.y - (p3.y - p1.y) / 6 * t;

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
}
ctx.stroke();
}

我决定添加内容，而不是将解决方案发布到另一篇文章中。
以下是我构建的解决方案，可能并不完美，但到目前为止输出效果很好。

重要提示：它将贯穿所有要点！

如果您有任何想法，请使其改善。谢谢。

以下是之前和之后的比较：

enter image description here

将此代码保存为HTML进行测试。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<!DOCTYPE html>
<html>
<body>
\t<canvas id="myCanvas" width="1200" height="700" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
\t
\t\tvar cv = document.getElementById("myCanvas");
\t\tvar ctx = cv.getContext("2d");

\t\tfunction gradient(a, b) {
\t\t\treturn (b.y-a.y)/(b.x-a.x);
\t\t}

\t\tfunction bzCurve(points, f, t) {
\t\t\t//f = 0, will be straight line
\t\t\t//t suppose to be 1, but changing the value can control the smoothness too
\t\t\tif (typeof(f) == 'undefined') f = 0.3;
\t\t\tif (typeof(t) == 'undefined') t = 0.6;

\t\t\tctx.beginPath();
\t\t\tctx.moveTo(points[0].x, points[0].y);

\t\t\tvar m = 0;
\t\t\tvar dx1 = 0;
\t\t\tvar dy1 = 0;

\t\t\tvar preP = points[0];
\t\t\tfor (var i = 1; i < points.length; i++) {
\t\t\t\tvar curP = points[i];
\t\t\t\tnexP = points[i + 1];
\t\t\t\tif (nexP) {
\t\t\t\t\tm = gradient(preP, nexP);
\t\t\t\t\tdx2 = (nexP.x - curP.x) * -f;
\t\t\t\t\tdy2 = dx2 * m * t;
\t\t\t\t} else {
\t\t\t\t\tdx2 = 0;
\t\t\t\t\tdy2 = 0;
\t\t\t\t}
\t\t\t\tctx.bezierCurveTo(preP.x - dx1, preP.y - dy1, curP.x + dx2, curP.y + dy2, curP.x, curP.y);
\t\t\t\tdx1 = dx2;
\t\t\t\tdy1 = dy2;
\t\t\t\tpreP = curP;
\t\t\t}
\t\t\tctx.stroke();
\t\t}

\t\t// Generate random data
\t\tvar lines = [];
\t\tvar X = 10;
\t\tvar t = 40; //to control width of X
\t\tfor (var i = 0; i < 100; i++ ) {
\t\t\tY = Math.floor((Math.random() * 300) + 50);
\t\t\tp = { x: X, y: Y };
\t\t\tlines.push(p);
\t\t\tX = X + t;
\t\t}

\t\t//draw straight line
\t\tctx.beginPath();
\t\tctx.setLineDash([5]);
\t\tctx.lineWidth = 1;
\t\tbzCurve(lines, 0, 1);

\t\t//draw smooth line
\t\tctx.setLineDash([0]);
\t\tctx.lineWidth = 2;
\t\tctx.strokeStyle ="blue";
\t\tbzCurve(lines, 0.3, 1);
\t
</body>
</html>

尝试一下KineticJS-您可以使用点数组定义样条线。这是一个例子：

旧网址：http：//www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-spline-tutorial/

参见存档网址：https://web.archive.org/web/20141204030628/http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-spline-tutorial/

相关讨论

太晚了，但受到Homan出色的简单答案的启发，让我发布了一个更通用的解决方案(一般意义上来说，Homan的解决方案在少于3个顶点的点阵列上发生崩溃)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

如果要通过n个点确定曲线方程，则以下代码将为您提供n-1阶多项式的系数，并将这些系数保存到coefficients[]数组(从常数项开始)。 x坐标不必按顺序排列。这是拉格朗日多项式的一个示例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

为了添加到K3N的基本样条方法中，并可能解决T. J. Crowder对在误导位置"浸入"曲线的担忧，我在getCurvePoints()函数中的res.push(x);之前插入了以下代码

1
2
3
4
5
6

if ((y < _pts[i+1] && y < _pts[i+3]) || (y > _pts[i+1] && y > _pts[i+3])) {
y = (_pts[i+1] + _pts[i+3]) / 2;
}
if ((x < _pts[i] && x < _pts[i+2]) || (x > _pts[i] && x > _pts[i+2])) {
x = (_pts[i] + _pts[i+2]) / 2;
}

这有效地在每对连续点之间创建一个(不可见的)边界框，并确保曲线停留在该边界框内-即。如果曲线上的一个点在两个点的上方/下方/左侧/右侧，则其位置将更改为位于框内。这里使用了中点，但是可以通过使用线性插值来改善。