as3绘制抛物线(二)

上一篇文章，只是简单的求出了抛物线的坐标，而且也不够灵活。如果只是单纯的画线，使用as3自带的curveTo(二次贝塞尔曲线)就已经足够了。

二次贝塞尔曲线演示动画 t in [0, 1]  (图片来源于wiki贝塞尔曲线>>)

 

下面的例子，根据鼠标的位置，绘制经过指定起始点、结束点和鼠标位置的曲线。

Code：

package
{
    import flash.display.Sprite;
    import flash.events.Event;

    /**
     * ...
     * @author Meteoric
     */
    public class DrawCurveDemo extends Sprite
    {
        private var x0:Number = 100;
        private var y0:Number = 400;
        private var x1:Number;
        private var y1:Number;
        private var x2:Number = 500;
        private var y2:Number = 400;

        public function DrawCurveDemo()
        {
            initView();
        }

        private function initView():void
        {
            addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);

            onEnterFrameHandler();
        }

        private function onEnterFrameHandler(e:Event=null):void
        {
            x1 = mouseX;
            y1 = mouseY;

            graphics.clear();
            graphics.lineStyle(2, 0x3399cc);
            graphics.moveTo(x0, y0);
            graphics.curveTo(x1, y1, x2, y2);
        }

    }

}

 

上面仅仅支持线条的绘制，如果是一个影片剪辑想要移动，则会比较麻烦。好在AS3的类库TweenMax已经完全支持了。

 

参考文档说明，实现如下的示例效果：

先定义一个名为Arrow.as，它用于在舞台上画一个红色的“箭头”

package
{
    import flash.display.Sprite;

    /**
     * ...
     * @author Meteoric
     */
    public class Arrow extends Sprite
    {

        public function Arrow()
        {
            initView();
        }

        private function initView():void
        {
            graphics.clear();
            graphics.lineStyle(1, 0xff0000);
            graphics.moveTo(-100, -5);
            graphics.lineTo(-20, -5);
            graphics.lineTo(-20, -20);
            graphics.lineTo(0, 0);
            graphics.lineTo(-20, 20);
            graphics.lineTo(-20, 5);
            graphics.lineTo(-100, 5);
            graphics.lineTo(-100, -5);
        }

    }

}

然后定义一个ArrowTest.as用于测试效果：

package
{
    import flash.display.Sprite;
    import flash.utils.setTimeout;
    import gs.TweenMax;
    /**
     * ...
     * @author Meteoric
     */
    public class ArrowTest extends Sprite
    {

        public function ArrowTest()
        {
            initView();
        }

        private var arrow:Arrow;

        private function initView():void
        {
            if (arrow == null)
            {
                arrow = new Arrow();
                addChild(arrow);
            }
            arrow.x = 100;
            arrow.y = 300;

            graphics.clear();
            graphics.lineStyle(1, 0x000000);
            graphics.moveTo(arrow.x, arrow.y);

            TweenMax.to(arrow, 3, {x:600, y:400, bezierThrough:[{x:300, y:100}], orientToBezier:true, onUpdate:onUpdateHandler, onComplete:onCompleteHandler});
        }

        private function onUpdateHandler():void
        {
            graphics.lineTo(arrow.x, arrow.y);
        }

        private function onCompleteHandler():void
        {
            setTimeout(initView, 2 * 1000);
        }

    }

}