flex

最新推荐文章于 2025-07-27 23:51:11 发布

转载最新推荐文章于 2025-07-27 23:51:11 发布 · 704 阅读

文章标签：

#function #list #flash #import #api #2010

flex 专栏收录该内容

1 篇文章

订阅专栏

flash 绘图API：鼠标拖动小球收藏此文于2010-01-27被推荐到优快云首页
如何被推荐？

小球一

现在有个灵感，那就是通过鼠标拖动这些小球，鼠标移动的时候，那些小球会跟踪鼠标目标移动。这些只要使用flash 绘图API制作，

就能够完成；

第一步：随机创造一些小球

view plaincopy to clipboardprint?
private function creatBall():void
        {
            for (var i:int=0; i<10; i++)
            {
                var ball:Ball=new Ball();
                addChild(ball);
                list.push(ball);
                ball.x=Math.random()*550;
                ball.y=Math.random()*400;

            }
        }
private function creatBall():void
  {
   for (var i:int=0; i<10; i++)
   {
    var ball:Ball=new Ball();
    addChild(ball);
    list.push(ball);
    ball.x=Math.random()*550;
    ball.y=Math.random()*400;

}
}

第二步：

进行对鼠标监听，针对鼠标的按下，和松开状态进行监听，并加以EnterFrame事件，每一帧进行刷新操作

view plaincopy to clipboardprint?
private function init():void
        {
            stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown);
            stage.addEventListener(MouseEvent.MOUSE_UP,MouseUp);
            stage.addEventListener(Event.ENTER_FRAME,Run);

        }
private function init():void
  {
   stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown);
   stage.addEventListener(MouseEvent.MOUSE_UP,MouseUp);
   stage.addEventListener(Event.ENTER_FRAME,Run);

}

第三步：

对小球进行绘制直线，这一步我们主要使用moveTo 和LineTo的方式就行，其他的也可以使用flash cs4的drawpath

关键的地方就是确立好每一个小球的位置。

view plaincopy to clipboardprint?
//绘制线条
        private function drawLine(x1,y1):void
        {
            graphics.clear();
            graphics.lineStyle(1,0xff0000);

            for (var i:int=0; i<list.length; i++)
            {
                graphics.moveTo(mouseX,mouseY);
                graphics.lineTo(list[i].x,list[i].y);
            }

        }
//绘制线条
  private function drawLine(x1,y1):void
  {
   graphics.clear();
   graphics.lineStyle(1,0xff0000);

   for (var i:int=0; i<list.length; i++)
   {
    graphics.moveTo(mouseX,mouseY);
    graphics.lineTo(list[i].x,list[i].y);
   }

}

第四步：小球运动

怎样才能运行？其实就是转换为角度的问题了。要让小球产生移动，则需要知道他的速度，分解其vx 和vy 两个方向，计算出他们的位移

view plaincopy to clipboardprint?
private function BallMove():void
{
    for (var i:int=0; i<list.length; i++)
    {
        var angle:Number=Math.atan2(mouseY-list[i].y,mouseX-list[i].x);// 计算出鼠标点，与每一个小球直接的角度值
        list[i].x+=Math.cos(angle)*speed;//位移。
        list[i].y+=Math.sin(angle)*speed;
    }
}
  private function BallMove():void
  {
   for (var i:int=0; i<list.length; i++)
   {
    var angle:Number=Math.atan2(mouseY-list[i].y,mouseX-list[i].x);// 计算出鼠标点，与每一个小球直接的角度值
    list[i].x+=Math.cos(angle)*speed;//位移。
    list[i].y+=Math.sin(angle)*speed;
   }
  }

总结：这些小玩意，只是绘图api 一些最简单应用，有了这些应用好，可以扩展很多很多意想不到的效果。不过不要忘记，效果背后往往是一些数学和物理的原理。这一点很重要。

有什么想法?如果有记下来吧，对你说不定有帮助。

view plaincopy to clipboardprint?
package
{
    import flash.display.MovieClip;
    import flash.events.*;

    //拖动小球
    public class Main extends MovieClip
    {

        private var list:Array=new Array();//列表
        private var key:Boolean=false;
        private var speed:int=5;//小球移动的速度
        public function Main()
        {
            creatBall();
            init();
        }
        private function init():void
        {
            stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown);
            stage.addEventListener(MouseEvent.MOUSE_UP,MouseUp);
            stage.addEventListener(Event.ENTER_FRAME,Run);

        }
        private function MouseDown(event:MouseEvent):void
        {

            drawLine(mouseX,mouseY);
            key=true;
        }

        private function MouseUp(event:MouseEvent):void
        {
            key=false;
            graphics.clear();

        }
        private function Run(event:Event):void
        {
            if (key)
            {
                BallMove();
                drawLine(mouseX,mouseY);
            }
        }
        private function creatBall():void
        {
            for (var i:int=0; i<10; i++)
            {
                var ball:Ball=new Ball();
                addChild(ball);
                list.push(ball);
                ball.x=Math.random()*550;
                ball.y=Math.random()*400;

            }
        }
        //绘制线条
        private function drawLine(x1,y1):void
        {
            graphics.clear();
            graphics.lineStyle(1,0xff0000);

            for (var i:int=0; i<list.length; i++)
            {
                graphics.moveTo(mouseX,mouseY);
                graphics.lineTo(list[i].x,list[i].y);
            }

        }
        //难点就是怎样使用鼠标拖动小球移动
        private function BallMove():void
        {
            for (var i:int=0; i<list.length; i++)
            {
                var angle:Number=Math.atan2(mouseY-list[i].y,mouseX-list[i].x);// 计算出鼠标点，与每一个小球直接的角度值
                list[i].x+=Math.cos(angle)*speed;//位移。
                list[i].y+=Math.sin(angle)*speed;
            }
        }

    }
}