as3绘制抛物线(二)

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

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

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

Code：

   1: package

   2: {

   3:     import flash.display.Sprite;

   4:     import flash.events.Event;

5:

   6:     /**

   7:      * ...

   8:      * @author Meteoric

   9:      */

  10:     public class DrawCurveDemo extends Sprite

  11:     {

  12:         private var x0:Number = 100;

  13:         private var y0:Number = 400;

  14:         private var x1:Number;

  15:         private var y1:Number;

  16:         private var x2:Number = 500;

  17:         private var y2:Number = 400;

18:

  19:         public function DrawCurveDemo()

  20:         {

  21:             initView();

  22:         }

23:

  24:         private function initView():void

  25:         {

  26:             addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);

27:

  28:             onEnterFrameHandler();

  29:         }

30:

  31:         private function onEnterFrameHandler(e:Event=null):void

  32:         {

  33:             x1 = mouseX;

  34:             y1 = mouseY;

35:

  36:             graphics.clear();

  37:             graphics.lineStyle(2, 0x3399cc);

  38:             graphics.moveTo(x0, y0);

  39:             graphics.curveTo(x1, y1, x2, y2);

  40:         }

41:

  42:     }

43:

  44: }

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

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

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

   1: package

   2: {

   3:     import flash.display.Sprite;

4:

   5:     /**

   6:      * ...

   7:      * @author Meteoric

   8:      */

   9:     public class Arrow extends Sprite

  10:     {

11:

  12:         public function Arrow()

  13:         {

  14:             initView();

  15:         }

16:

  17:         private function initView():void

  18:         {

  19:             graphics.clear();

  20:             graphics.lineStyle(1, 0xff0000);

  21:             graphics.moveTo(-100, -5);

  22:             graphics.lineTo(-20, -5);

  23:             graphics.lineTo(-20, -20);

  24:             graphics.lineTo(0, 0);

  25:             graphics.lineTo(-20, 20);

  26:             graphics.lineTo(-20, 5);

  27:             graphics.lineTo(-100, 5);

  28:             graphics.lineTo(-100, -5);

  29:         }

30:

  31:     }

32:

  33: }

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

   1: package

   2: {

   3:     import flash.display.Sprite;

   4:     import flash.utils.setTimeout;

   5:     import gs.TweenMax;

   6:     /**

   7:      * ...

   8:      * @author Meteoric

   9:      */

  10:     public class ArrowTest extends Sprite

  11:     {

12:

  13:         public function ArrowTest()

  14:         {

  15:             initView();

  16:         }

17:

  18:         private var arrow:Arrow;

19:

  20:         private function initView():void

  21:         {

  22:             if (arrow == null)

  23:             {

  24:                 arrow = new Arrow();

  25:                 addChild(arrow);

  26:             }

  27:             arrow.x = 100;

  28:             arrow.y = 300;

29:

  30:             graphics.clear();

  31:             graphics.lineStyle(1, 0x000000);

  32:             graphics.moveTo(arrow.x, arrow.y);

33:

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

  35:         }

36:

  37:         private function onUpdateHandler():void

  38:         {

  39:             graphics.lineTo(arrow.x, arrow.y);

  40:         }

41:

  42:         private function onCompleteHandler():void

  43:         {

  44:             setTimeout(initView, 2 * 1000);

  45:         }

46:

  47:     }

48:

  49: }

as3绘制抛物线(二)相关推荐

【Python】函数图像绘制：二维图像、三维图像、散点图、心形图
[Python]函数图像绘制:二维图像.三维图像.散点图.心形图所有需要用的包二维图像三维图像散点图绘制心形图绘制所有需要用的包 from mpl_toolkits.mplot3d imp ...
【Qt】2D绘图之绘制图像(二)
00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 绘制QImage图像 04. 绘制QPixmap图像 05. 绘制QPicture图像 06. 综合对比 07. 附录 0 ...
在WPF中自定义你的绘制（二）
在WPF中自定义你的绘制(二) 原文:在WPF中自定义你的绘制(二) 在WPF中自定义你的绘制(二) ...
python3 + opencv +pyzbar实时检测二维码 / 定位二维码，并绘制出二维码的框和提取二维码内容
python3 + opencv +pyzbar实时检测二维码 / 定位二维码,并绘制出二维码的框和提取二维码内容 1 pyzbar二维码检测模块 1.1. pyzbar模块介绍 1.2 pyzbar ...
matlab绘制抛物线,MATLAB中绘制抛物线的图像，请补充完成下面代码： clc,clear; x=linspace(...
MATLAB中绘制抛物线的图像,请补充完成下面代码: clc,clear; x=linspace(-2,2,100); ____________; plot(x,y) 答: y=x.^2 在下列各项中 ...
Cesium绘制抛物线弧线
Cesium绘制抛物线弧线想做一个行人轨迹的动态显示,在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录思路两点连线作为坐标轴,取线段中点画垂线作为y轴,在线上取一点作为开口向下的 ...
AltiumDesigner绘制PCB(二)
本教程以绘制4x4矩阵键盘为例,在绘制PCB前,请确保你已安装Altium Designer. 本节主要教大家为元器件绘制原理图,了解器件原理图的概念. 1 基本概念器件的原理图是对器件外形的提炼和 ...
scratch教程----2.绘制抛物线
Hi!大家好,这里是Rocky丶的scratch教程--第二期, 这起我们来讲讲如何运用scratch绘制抛物线: 我们今天来讲两种"方法"绘制抛物线(两种精确度) 目录开始讲解 ...
Unity中绘制抛物线
效果如下: 之所以加个2,是因为我以前写过一个抛物线的文章,之前的文章请看这: Unity绘制抛物线代码上一篇文章只是简单地绘制了一个抛物线,但是无法随意移动或者旋转,最近因为做个项目可能会用到这个 ...

as3绘制抛物线(二)

as3绘制抛物线(二)相关推荐

最新文章

热门文章