积少成多Flash(6) - ActionScript 3.0 绘图之图形和转换
2009-11-05 00:00:00 来源:WEB开发网介绍
演示使用 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();
}
}
}
Tags:积少成多 Flash ActionScript
编辑录入:爽爽 [复制链接] [打 印]- ››flash文件的压缩方法(swf文件压缩瘦身)
- ››Flash鼠绘教程:临摹徐悲鸿的骏马图
- ››Flash实例:AS3制作茶杯震动动画
- ››Flash AS 3.0实例教程:Main类打造发散效果
- ››Flash cs3仿真艺术设计3.6:运用遮罩打造焦点效果...
- ››Flash cs3仿真艺术设计4.1:阴影的基本运用
- ››Flash CS4教程:3d工具实例和骨骼工具
- ››flash加载外部文本文件的3种方法
- ››flash在有限的页面内制作大的地图
- ››Flash教程:AS代码制作计时器方法
- ››Flash AS教程:propertydata问题解决
- ››FlashFXP v4.0.0 Build 1486 RC2 [烈火汉化]
更多精彩
赞助商链接