1

ベジエ曲線でパスを「成長」させたいと思います。パスが描かれた後、少し揺れているはずです: 織りのような見た目と感触です。視覚的な例: 織りの例 現在、TweenMax.bezier を使用しています。これにより、この曲線に沿ってポイントを移動でき、同時に (onEnterFrame) ポイントの現在の位置に線を描画できます。残念ながら、このアプローチでは、フレーム レートが低下し (スクエア カット)、その間のすべてのポイントを再計算することが困難な場合 (織り効果のため) に、カーブの品質が低下します。最近の提案により、問題を解決するために曲線を使用するようになりましたが、正確な方法はわかりません。この例は私の問題を解決します: split bezier しかし、コード スニペットはありません。

誰かが同じ問題に遭遇しましたか? 前もって感謝します

4

2 に答える 2

2

私はよくTweeners CurveModifiers._bezier_getを使用してベジェ曲線を作成し、ポイントを簡単に取得します（いくつか試しましたが、これは実際には高速です）。

... 素早く ：

コントロールポイントを一覧表示する2つのアレイ（x、y）を設定します。

各フレームを繰り返して、コントロールポイントの位置を変更します。

同様のコードで曲線を再描画します。

for(var i:Number=0; i <1; i += precision)
{ 
   x = CurveModifiers._bezier_get(pathX[0], pathX[pathX.length - 1], t, pathX);
   y = CurveModifiers._bezier_get(pathY[0], pathY[pathY.length - 1], t, pathY);
   // ...graphics.lineTo(x,y)
}

編集

どうぞ ：

import caurina.transitions.*;
import caurina.transitions.properties.CurveModifiers;


addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(e:Event) 
{   
    modifyCurve();
    drawCurve();
}

// Control points

var pathX:Array = new Array(50,200,600,850);
var pathY:Array = new Array(50,200,100,350);


// growth related

var growth:Number=0;
var growthSpeed:Number=0.01;


/**
* Grows and draws the curve
*/
function drawCurve():void {

    const precision:Number = 0.001;

    var cx:Number,
        cy:Number;

    // grow (avoid making it more than one)

    if (growth<1) growth = Math.min(1, growth+growthSpeed);

    graphics.clear();
    graphics.lineStyle(1);

    for (var t:Number=0; t <growth; t += precision) {

        cx=CurveModifiers._bezier_get(pathX[0],pathX[pathX.length-1],t,pathX);
        cy=CurveModifiers._bezier_get(pathY[0],pathY[pathY.length-1],t,pathY);

        if (t==0) {
            graphics.moveTo(cx,cy);
        } else {
            graphics.lineTo(cx,cy);
        }
    }
}


var motion_t:Number = 0;
var motionSpeed:Number = Math.PI * 0.1;
var motionRadius:Number = 10*motionSpeed;


/**
* Creates a movement by transforming the control points
*/
function modifyCurve():void
{
    var len:int = pathX.length;

    motion_t += motionSpeed;

    for(var index:int = 1; index < len; index++)
    {
        // simple circular movement for each control point

        pathX[index] += Math.cos(motion_t + Math.PI * 2 / index) * motionRadius;
        pathY[index] += Math.sin(motion_t + Math.PI * 2 / index) * motionRadius;

    }
}
于 2010-03-16T13:40:23.863 に答える
0

あなたが探しているのは、より一般的に deCastlejau アルゴリズムと呼ばれるものです。ブロッサムまたは極ラベルは、同じことのより一般的な方法です。

于 2010-03-16T15:45:40.730 に答える