对于绘图应用程序,我将鼠标移动坐标保存到数组中,然后使用lineTo绘制它们。生成的线条不平滑。如何在所有聚集点之间生成单条曲线?
我用google搜索但我只找到3个绘制线的函数:对于2个样本点,只需使用lineTo。对于3个样本点quadraticCurveTo,对于4个样本点,bezierCurveTo。
(我尝试在阵列中每4个点绘制一个bezierCurveTo,但这会导致每4个采样点扭结,而不是连续的平滑曲线。)
如何编写一个函数来绘制一个包含5个样本点的平滑曲线?
答案 0 :(得分:2)
您可以使用基数样条曲线来执行此操作:
这个函数是这样的,点数组排列为[x1, y1, x2, y2, ... xn, yn]
,张力在[0.0,1.0]之间,可选的段数决定了每个点之间的分辨率。
<强> Here's an online demo of this in action 强>
UPDATE 发布了我的基本实现的错误版本,这是正确的 -
结果将是一个新的数组,其中包含您迭代的平滑线 -
function getCurvePoints(ptsa, tension, numOfSegments) {
// use input value if provided, or use a default value
tension = (tension != 'undefined') ? tension : 0.5;
numOfSegments = numOfSegments ? numOfSegments : 16;
var _pts = [], res = [], // clone array
x, y, // our x,y coords
t1x, t2x, t1y, t2y, // tension vectors
c1, c2, c3, c4, // cardinal points
st, t, i; // steps based on num. of segments
// clone array so we don't change the original
_pts = ptsa.slice(0);
_pts.unshift(pts[1]); //copy 1. point and insert at beginning
_pts.unshift(pts[0]);
_pts.push(pts[pts.length - 2]); //copy last point and append
_pts.push(pts[pts.length - 1]);
// ok, lets start..
// 1. loop goes through point array
// 2. loop goes through each segment between the two points + one point before and after
for (i=2; i < (_pts.length - 4); i+=2) {
// calc tension vectors
t1x = (_pts[i+2] - _pts[i-2]) * tension;
t2x = (_pts[i+4] - _pts[i]) * tension;
t1y = (_pts[i+3] - _pts[i-1]) * tension;
t2y = (_pts[i+5] - _pts[i+1]) * tension;
for (t=0; t <= numOfSegments; t++) {
// calc step
st = t / numOfSegments;
// calc cardinals
c1 = 2 * Math.pow(st, 3) - 3 * Math.pow(st, 2) + 1;
c2 = -(2 * Math.pow(st, 3)) + 3 * Math.pow(st, 2);
c3 = Math.pow(st, 3) - 2 * Math.pow(st, 2) + st;
c4 = Math.pow(st, 3) - Math.pow(st, 2);
// calc x and y cords with common control vectors
x = c1 * _pts[i] + c2 * _pts[i+2] + c3 * t1x + c4 * t2x;
y = c1 * _pts[i+1] + c2 * _pts[i+3] + c3 * t1y + c4 * t2y;
//store points in array
res.push(x);
res.push(y);
}
}
return res;
}