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) } } }
おしまい。