curveToメソッドで曲線をかく。

最近忙しくて、なかなかActionScript3.0アニメーションが読めてない。あーあ。

Chapter4のレンダリングテクニックいきます。はい。

今回は、曲線の勉強です。曲線。直線じゃないやつ。

曲線を描く場合はcurveToメソッドを使います。
引数の4つは、中間地点の(x1, y1)座標と、終点(x2, y2)の座標です。

			graphics.moveTo(x0, y0);
			graphics.curveTo(x1, y1, x2, y2);

まーここまではたいしたことないんですが、
中点座標にマウスカーソルの位置を指定して
実行してみるとー、

			x1 = mouseX;
			y1 = mouseY;
			
			graphics.clear();
			graphics.lineStyle(1);
			graphics.moveTo(x0, y0);
			graphics.curveTo(x1, y1, x2, y2)

そう、マウスカーソルの位置まで曲線が届かない。curveToメソッドはそういうもんらしい。

じゃー、マウスカーソルまで届かすには、どーしたらよいかというと

			x1 = mouseX * 2 - (x0 + x2) / 2;
			y1 = mouseY * 2 - (y0 + y2) / 2;

とします。
ターゲット(マウスカーソル位置)を2倍して、始点と終点の平均を加算する、そうすればOKとのこと。

			//  これではマウスカーソル位置を通過しない。
			// x1 = mouseX;
			// y1 = mouseY;

			// なんでこうする。
			x1 = mouseX * 2 - (x0 + x2) / 2;
			y1 = mouseY * 2 - (y0 + y2) / 2;
			
			graphics.clear();
			graphics.lineStyle(1);
			graphics.moveTo(x0, y0);
			graphics.curveTo(x1, y1, x2, y2)

コード by Gist2Hatena。

package
{
  import flash.display.Sprite;
  import flash.events.MouseEvent;
  
  public class DrawingCurves extends Sprite
  {
    
    private var x0:Number = 100;
    private var y0:Number = 200;
    private var x1:Number
    private var y1:Number
    private var x2:Number = 300;
    private var y2:Number = 200;
    
    public function DrawingCurves()
    {
      init();
    }
    
    private function init():void
    {
      stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove_stage);
    }
 
 
    private function onMouseMove_stage(evt:MouseEvent):void
    {
    
      // これではマウスカーソル位置を通過しない。
      // x1 = mouseX;
      // y1 = mouseY;
 
      // なんでこうする。
      x1 = mouseX * 2 - (x0 + x2) / 2;
      y1 = mouseY * 2 - (y0 + y2) / 2;
      
      graphics.clear();
      graphics.lineStyle(1);
      graphics.moveTo(x0, y0);
      graphics.curveTo(x1, y1, x2, y2)
    }
  }
}

おしまい。