3

描画アプリケーションの場合、マウスの移動座標を配列に保存してから、lineTo で描画しています。結果の線は滑らかではありません。収集したすべてのポイント間に単一の曲線を作成するにはどうすればよいですか?

私はグーグルで検索しましたが、線を描画するための関数は 3 つしか見つかりませんでした: 2 つのサンプル ポイントの場合は、単純に lineTo を使用します。3 つのサンプル ポイントの場合は quadraticCurveTo、4 つのサンプル ポイントの場合は bezierCurveTo。

(配列内の 4 つのポイントごとに bezierCurveTo を描画しようとしましたが、連続した滑らかな曲線ではなく、4 つのサンプル ポイントごとにキンクが発生します。)

5 つのサンプル ポイント以上で滑らかな曲線を描く関数を作成するにはどうすればよいですか?

4

1 に答える 1

2

カーディナル スプラインを使用してこれを行うことができます。

このための関数は、次のように順序付けられたポイントの配列、[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;
}
于 2013-08-05T21:07:27.157 に答える