积少成多Flash(6) - ActionScript 3.0 绘图之图形和转换

核心提示：介绍演示使用 Flash ActionScript 3.0 画一些基本的图形，以及对绘制的图形或其他可视对象做一些基本的转换* 画图 - 通过 Shape 对象的 graphics 属性来执行矢量绘图命令o 1、使用 lineStyle() 定义画图的线条样式o 2、moveTo() - 设置当前绘画点；lineTo(

介绍

演示使用 Flash ActionScript 3.0 画一些基本的图形，以及对绘制的图形或其他可视对象做一些基本的转换

* 画图 - 通过 Shape 对象的 graphics 属性来执行矢量绘图命令

o 1、使用 lineStyle() 定义画图的线条样式

o 2、moveTo() - 设置当前绘画点；lineTo() - 以当前绘画点为起点，用当前定义的线条样式，画一条直线到目标点；curveTo() - 指定二次贝塞尔曲线的控制点和终点，从而完成曲线的绘制；drawRect() - 绘制矩形；drawCircle() - 绘制圆形；drawEllipse() - 绘制椭圆；

o 3、beginFill() 和 endFill() 用于填充他们之间所绘制的图形。如果是渐变填充则对应的方法是 beginGradientFill 和 endFill()

* 转换 - 通过设置对象的 transform.matrix 属性，对其做相应的转换

o Matrix.rotate() - 旋转的角度

o Matrix.translate() - 平移的距离

o Matrix.scale() - 缩放的比例

o Matrix.b - 将矩阵垂直倾斜

o Matrix.c - 将矩阵水平倾斜

1、画图

在 UI 上放置 8 个 Button

名称分别为：btnLine, btnCurve, btnRectangle, btnCircle, btnEllipse, btnLiner, btnRadial, btnClea

分别用于演示：画直线，画曲线，画矩形，画圆形，画椭圆，线性渐变填充，放射性渐变填充，清除图形

Main.as

package　
{
　　　　import　flash.display.MovieClip;
　　　　import　fl.events.ComponentEvent;
　　　　import　fl.events.SliderEvent;
　　　　import　flash.display.Shape;
　　　　import　flash.geom.Matrix;
　　　　import　flash.display.GradientType;
　　　　import　flash.display.SpreadMethod;
　　　　
　　　　public　class　Main　extends　MovieClip
　　　　{
　　　　　　　　var　originalMatrix:Matrix;
　　　　　　　　
　　　　　　　　public　function　Main():void
　　　　　　　　{
　　　　　　　　　　　　btnLine.addEventListener(ComponentEvent.BUTTON_DOWN,　drawLine);
　　　　　　　　　　　　btnCurve.addEventListener(ComponentEvent.BUTTON_DOWN,　drawCurve);
　　　　　　　　　　　　btnRectangle.addEventListener(ComponentEvent.BUTTON_DOWN,　drawRectangle);
　　　　　　　　　　　　btnCircle.addEventListener(ComponentEvent.BUTTON_DOWN,　drawCircle);
　　　　　　　　　　　　btnEllipse.addEventListener(ComponentEvent.BUTTON_DOWN,　drawEllipse);
　　　　　　　　　　　　btnLiner.addEventListener(ComponentEvent.BUTTON_DOWN,　drawLinerGradient);
　　　　　　　　　　　　btnRadial.addEventListener(ComponentEvent.BUTTON_DOWN,　drawRadialGradient);
　　　　　　　　　　　　btnClear.addEventListener(ComponentEvent.BUTTON_DOWN,　clearGraphics);
　　　　　　　　}
　　　　　　　　
　　　　　　　　
　　　　　　　　//　画直线
　　　　　　　　function　drawLine(e:ComponentEvent):void　
　　　　　　　　{
　　　　　　　　　　　　//　lineStyle()　-　定义画图的线条样式
　　　　　　　　　　　　//　　　　　第一个参数：线条粗细，整数（0　-　255）
　　　　　　　　　　　　//　　　　　第二个参数：线条的颜色值（16进制）
　　　　　　　　　　　　//　　　　　第三个参数：不透明度（0　-　1）
　　　　　　　　　　　　canvas.graphics.lineStyle(12,　0x000000);
　　　　　　　　　　　　
　　　　　　　　　　　　//　moveTo()　-　设置当前绘画点。在本例中就是直线的起点
　　　　　　　　　　　　canvas.graphics.moveTo(0,　0);
　　　　　　　　　　　　
　　　　　　　　　　　　//　lineTo()　-　以当前绘画点为起点，用当前定义的线条样式，画一条直线到目标点
　　　　　　　　　　　　canvas.graphics.lineTo(100,　100);
　　　　　　　　}
　　　　　　　　
　　　　　　　　//　画曲线（二次贝塞尔曲线）
　　　　　　　　function　drawCurve(e:ComponentEvent):void　
　　　　　　　　{
　　　　　　　　　　　　canvas.graphics.lineStyle(1,　0x000000);
　　　　　　　　　　　　canvas.graphics.moveTo(100,　0);
　　　　　　　　　　　　
　　　　　　　　　　　　//　curveTo()　-　指定二次贝塞尔曲线的控制点和终点，从而完成曲线的绘制
　　　　　　　　　　　　//　　　　　前两个参数为控制点，后两个参数为终点，当前绘画点为起点
　　　　　　　　　　　　canvas.graphics.curveTo(100,　100,　200,　200);
　　　　　　　　}
　　　　　　　　
　　　　　　　　//　画矩形
　　　　　　　　function　drawRectangle(e:ComponentEvent):void　
　　　　　　　　{
　　　　　　　　　　　　canvas.graphics.lineStyle(5,　0xFF0000);
　　　　　　　　　　　　
　　　　　　　　　　　　//　drawRect()　-　绘制矩形
　　　　　　　　　　　　//　　　　　第一个参数：矩形左上角的　x　坐标
　　　　　　　　　　　　//　　　　　第二个参数：矩形左上角的　y　坐标
　　　　　　　　　　　　//　　　　　第三个参数：矩形的宽
　　　　　　　　　　　　//　　　　　第四个参数：矩形的高
　　　　　　　　　　　　canvas.graphics.drawRect(200,　0,　100,　50);
　　　　　　　　}
　　　　　　　　
　　　　　　　　//　画圆
　　　　　　　　function　drawCircle(e:ComponentEvent):void　
　　　　　　　　{
　　　　　　　　　　　　canvas.graphics.lineStyle(1,　0x000000);
　　　　　　　　　　　　
　　　　　　　　　　　　//　beginFill()　-　单色填充这之后所绘制的图形，直到调用endFill()为止
　　　　　　　　　　　　//　　　　　两个参数分别为填充的颜色值和不透明度
　　　　　　　　　　　　canvas.graphics.beginFill(0xFF0000,　0.5);
　　　　　　　　　　　　
　　　　　　　　　　　　//　drawCircle()　-　绘制圆形
　　　　　　　　　　　　//　　　　　三个参数分别为圆心的　x　坐标，圆心的　y　坐标，圆形的半径
　　　　　　　　　　　　canvas.graphics.drawCircle(300,　0,　30);
　　　　　　　　　　　　
　　　　　　　　　　　　//　endFill()　-　呈现　beginFill()　与　endFill()　之间所绘制的图形的填充效果
　　　　　　　　　　　　canvas.graphics.endFill();
　　　　　　　　}　　　　
　　　　　　　　
　　　　　　　　//　画椭圆
　　　　　　　　function　drawEllipse(e:ComponentEvent):void　
　　　　　　　　{
　　　　　　　　　　　　canvas.graphics.lineStyle(1,　0x000000);
　　　　　　　　　　　　canvas.graphics.beginFill(0xFF0000);
　　　　　　　　　　　　
　　　　　　　　　　　　//　drawEllipse()　-　绘制椭圆
　　　　　　　　　　　　//　　　　　前两个参数：椭圆左侧顶点的　x　坐标和　y　坐标
　　　　　　　　　　　　//　　　　　后两个参数：椭圆的宽和高
　　　　　　　　　　　　canvas.graphics.drawEllipse(0,　200,　100,　50);
　　　　　　　　　　　　
　　　　　　　　　　　　canvas.graphics.endFill();
　　　　　　　　}
　　　　　　　　
　　　　　　　　//　线性渐变填充
　　　　　　　　function　drawLinerGradient(e:ComponentEvent):void　
　　　　　　　　{
　　　　　　　　　　　　canvas.graphics.lineStyle(1,　0x000000);
　　　　　　　　　　　　
　　　　　　　　　　　　//　声明一个仿射矩阵　Matrix
　　　　　　　　　　　　var　gradientBoxMatrix:Matrix　=　new　Matrix();
　　　　　　　　　　　　
　　　　　　　　　　　　//　createGradientBox()　-　Matrix　的一个专门为渐变填充提供的方法
　　　　　　　　　　　　//　　　　　三个参数分别为渐变框的宽，渐变框的高，渐变框的旋转弧度
　　　　　　　　　　　　gradientBoxMatrix.createGradientBox(50,　20,　0);
　　　　　　　　　　　　
　　　　　　　　　　　　//　beginGradientFill()　-　做渐变填充
　　　　　　　　　　　　//　　　　　第一个参数：渐变模式。GradientType.LINEAR为线性渐变；GradientType.RADIAL为放射性渐变
　　　　　　　　　　　　//　　　　　第二个参数：渐变色的颜色值数组
　　　　　　　　　　　　//　　　　　第三个参数：渐变色的不透明度数组
　　　　　　　　　　　　//　　　　　第四个参数：渐变色的分布比例数组（0　-　255）。0为渐变框的最左侧，255为渐变框的最右侧
　　　　　　　　　　　　//　　　　　第五个参数：用　Matrix.createGradientBox()　生成的渐变框
　　　　　　　　　　　　//　　　　　第六个参数：伸展方式　
　　　　　　　　　　　　//　　　　　　　　　SpreadMethod.PAD　-　用线性渐变线末端的颜色值填充剩余空间
　　　　　　　　　　　　//　　　　　　　　　SpreadMethod.REFLECT　-　相邻填充区域，以　相反方向　重复渐变，直至填充满整个剩余空间
　　　　　　　　　　　　//　　　　　　　　　SpreadMethod.REPEAT　-　相邻填充区域，以　相同方向　重复渐变，直至填充满整个剩余空间
　　　　　　　　　　　　canvas.graphics.beginGradientFill(GradientType.LINEAR,　[0xFF0000,　0x0000FF],　[1,　1],　[0,　255],　gradientBoxMatrix,　SpreadMethod.REPEAT);
　　　　　　　　　　　　
　　　　　　　　　　　　canvas.graphics.drawRect(100,　200,　100,　20);
　　　　　　　　　　　　canvas.graphics.endFill();
　　　　　　　　}
　　　　　　　　
　　　　　　　　//　放射性渐变填充
　　　　　　　　function　drawRadialGradient(e:ComponentEvent):void
　　　　　　　　{　　　　　　　　
　　　　　　　　　　　　canvas.graphics.lineStyle(1,　0x000000);
　　　　　　　　　　　　var　gradientBoxMatrix:Matrix　=　new　Matrix();
　　　　　　　　　　　　gradientBoxMatrix.createGradientBox(50,　20,　0);
　　　　　　　　　　　　
　　　　　　　　　　　　//　GradientType.RADIAL　-　放射性渐变
　　　　　　　　　　　　canvas.graphics.beginGradientFill(GradientType.RADIAL,　[0xFF0000,　0x0000FF],　[1,　1],　[0,　255],　gradientBoxMatrix,　SpreadMethod.REFLECT);
　　　　　　　　　　　　
　　　　　　　　　　　　canvas.graphics.drawCircle(200,　200,　30);
　　　　　　　　　　　　canvas.graphics.endFill();
　　　　　　　　}
　　　　　　　　
　　　　　　　　//　清除图形
　　　　　　　　function　clearGraphics(e:ComponentEvent):void
　　　　　　　　{　　　　
　　　　　　　　　　　　//　clear()　-　清除　Graphics　上的图形，并重置线条样式和填充等设置
　　　　　　　　　　　　canvas.graphics.clear();
　　　　　　　　}
　　　　}
}