ActionScriptで3次ベジェ曲線を描く場合、自前で3次ベジェの関数を用意して描きます。しかしながら、正確じゃなくても、近似で描きたいなら、いろいろ方法があると思われます。その方法の内でも、かなり大雑把な方法を紹介します。
通常、3次ベジェの関数を用意して描画する場合、素直にスクリプトを書くとこんな感じになります。
//始点(x0,y0),終点(x1,y1),コントロール点(cx0,cy0),コントロール点(cx1,cy1)
function draw3DBezje( x0:Number,y0:Number,x1:Number,y1:Number,cx0:Number,cy0:Number,cx1:Number,cy1:Number ,step:int=100):void
{
var k:Number = 1.0/step;
graphics.moveTo(x0,y0);
for( var i:int=1;i<=step;i++ ){
var t:Number = i*k;
var tp:Number = 1.0 - t;
graphics.lineTo(x0*tp*tp*tp + 3*cx0*t*tp*tp + 3*cx1*t*t*tp + x1*t*t*t, y0*tp*tp*tp + 3*cy0*t*tp*tp + 3*cy1*t*t*tp + y1*t*t*t );
}
}
この場合、描画する線を何ステップで描くか、つまりどのぐらい細かく描くかで処理負荷が変わります。もちろん、ステップ数が多い方が、滑らかな曲線に見えます。
で、大雑把に偽3次ベジェ曲線を描く場合です。今回の方法では、3次ベジェを2つの2次ベジェの組み合わせで描画します。
こんな感じです。白いポイントがドラッグできます。上の白い線が、3次ベジェ関数で描いたもので、青い線が偽3次ベジェです。
偽3次元ベジェは、始点とコントロール点の3/4点F0、終点とコントロール点の3/4点F1、それらの中点F2、以上３つのポイントを描画の為に使います。これらの点から、始点・F0・F2の2次ベジェ曲線、F2・F1・終点の2次ベジェ曲線を、curveToで描きます。
//始点(x0,y0),終点(x1,y1),コントロール点(cx0,cy0),コントロール点(cx1,cy1)
function drawFake3DBezje( x0:Number,y0:Number,x1:Number,y1:Number,cx0:Number,cy0:Number,cx1:Number,cy1:Number ):void
{
var f0:Point = Point.interpolate(new Point(x0,y0), new Point(cx0,cy0), 0.25);
var f1:Point = Point.interpolate(new Point(x1,y1), new Point(cx1,cy1), 0.25);
var f2:Point = Point.interpolate( f0, f1, 0.5 );
//描画
graphics.moveTo( x0, y0 );
graphics.curveTo( f0.x, f0.y, f2.x, f2.y );
graphics.curveTo( f1.x, f1.y, x1, y1 );
}
通常の3次ベジェ関数を、50ステップで描画する場合に比較して、半分弱の処理速度で描けます。
とは言いつつも、ひねりがある曲線はかなりズレがでるのですが、用途次第かと。