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

关注

原创最新推荐文章于 2026-07-30 17:54:43 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

Flash动画入门：从时间轴原理到交互式相册制作动画制作是现代数字内容创作的核心技能之一，其底层原理基于时间轴与关键帧控制技术。通过时间轴管理图形元素的出现、变化与消失，结合关键帧定义动画的转折点，可以实现从简单移动到复杂特效的各类动画效果。这项技术在工程实践中价值显著，能够高效创建轻量级、可交互的动态内容，广泛应用于网页动效、UI设计、教育课件及互动媒体等领域。Flash作为经典的矢量动画工具，其核心的时间轴控制、关键帧动画及事件驱动编程思想，至今仍是理解现代前端动画与游戏开发的基础。本教程以Flash动画入门为主题，详细讲解时间轴操作、元件创建及Ac 阅读详情

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

作者：webabcd

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

画图 - 通过 Shape 对象的 graphics 属性来执行矢量绘图命令
- 1、使用 lineStyle() 定义画图的线条样式
- 2、moveTo() - 设置当前绘画点；lineTo() - 以当前绘画点为起点，用当前定义的线条样式，画一条直线到目标点；curveTo() - 指定二次贝塞尔曲线的控制点和终点，从而完成曲线的绘制；drawRect() - 绘制矩形；drawCircle() - 绘制圆形；drawEllipse() - 绘制椭圆；
- 3、beginFill() 和 endFill() 用于填充他们之间所绘制的图形。如果是渐变填充则对应的方法是 beginGradientFill 和 endFill()
转换 - 通过设置对象的 transform.matrix 属性，对其做相应的转换
- Matrix.rotate() - 旋转的角度
- Matrix.translate() - 平移的距离
- Matrix.scale() - 缩放的比例
- Matrix.b - 将矩阵垂直倾斜
- 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();

}

2、转换
在 UI 上放置 3 个 Silder
分别名为：sliderScaleX, sliderScaleY, sliderRotate
分别用于演示 X 轴方向上的缩放，Y 轴方向上的缩放，旋转
再放置 2 个 Button
分别名为：btnMatrix, btnClearMatrix
分别用于演示仿射矩阵在图形转换上的应用，还原为对象的初始仿射矩阵转换
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;