如何使用javascript HTML5画布绘制通过N个点的曲线

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

本文关键字：曲线 绘制 HTML5 javascript 何使用 布绘制      更新时间：2023-09-26

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

我在谷歌上搜索过，但只找到了3个绘制线条的函数：对于2个采样点，只需使用lineTo。对于3个采样点quadraticCurveTo，对于4个采样点，请使用bezierCurveTo。

（我试着为阵列中的每4个点绘制一个bezierCurveTo，但这会导致每4个采样点出现扭结，而不是连续的平滑曲线。）

如何编写一个函数来绘制具有5个采样点及以上采样点的平滑曲线？

您可以使用基数样条曲线来实现这一点：

函数如下，点的阵列排列为[x1, y1, x2, y2, ... xn, yn]，张力在[0.0，1.0]之间，并且可以选择决定每个点之间分辨率的线段数量。

这是一个在线演示

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;
}
相关文章：