Flash Player 10 使用绘图API

Flash Player 10绘图API详解

最新推荐文章于 2021-05-27 10:49:10 发布

原创最新推荐文章于 2021-05-27 10:49:10 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flash #Adobe

Flex 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Flash Player 10中使用的绘图API，包括如何使用Graphics类进行绘制，矢量数据的应用，以及如何通过drawPath和drawTriangles方法绘制复杂的图形和三角形。文中还探讨了三角形在3D应用中的实现策略。

转自：http://sjkgxf7191.iteye.com/blog/520184

Flash Player 10 使用绘图API

POSTED BY CHENCHAO | FILED UNDER 3D相关

了解 Graphics 类

每个 Shape 、Sprite 和 MovieClip 对象都具有一个 graphics 属性，它是 Graphics 类的一个实例。
如果要将显示对象仅用作内容绘制画布，则可以使用 Shape 实例。
Shape 实例的性能优于其它用于绘制的显示对象，因为它不会产生 Sprite 和 MovieClip 类中的附加功能的开销。
如果希望能够在显示对象上绘制图形内容，并且还希望该对象包含其它显示对象，则可以使用 Sprite实例。

矢量

数据类型完全相同的值组成的数组。
Vector 对象可存储绘制方法使用单个命令构建线条和形状时所用值的数组。

使用图形数据类

可以将全部绘制存储在 IGraphicsData 类型的矢量对象数组 (Vector.<IGraphicsData> ) 中，该数组可以重复
用作其它形状实例的数据源，也可以存储绘制信息供以后使用。
GraphicsStroke
GraphicsSolidFill
GraphicsGradientFill
GraphicsShaderFill
GraphicsEndFill
GraphicsPath
GraphicsTrianglePath

路径

^? View Code ACTIONSCRIPT3

drawPath(commands:Vector.<int>, data:Vector.<number>)

第一个参数保存命令，第二个参数保存数据
第一个参数命令如下：
flash.display.GraphicsPathCommand 类里

public static const NO_OP:int = 0;
public static const MOVE_TO:int = 1;
public static const LINE_TO:int = 2;
public static const CURVE_TO:int = 3;
public static const WIDE_MOVE_TO:int = 4;
public static const WIDE_LINE_TO:int = 5;

画直线参考代码如下：

^? View Code ACTIONSCRIPT3

var commands:Vector.<int> = new Vector.<int>();
commands[0] = GraphicsPathCommand.MOVE_TO;
commands[1] = GraphicsPathCommand.LINE_TO;
 
var data:Vector.<Number> = new Vector.<Number>();
data[0] = 100;
data[1] = 100;
data[2] = 250;
data[3] = 200;
 
graphics.lineStyle(0);
graphics.drawPath(commands, data);

画曲线参考代码如下：

^? View Code ACTIONSCRIPT3

commands.push(GraphicsPathCommand.MOVE_TO);
// 起点是200, 200
data.push(200, 200);
 
data.push(250, 100);
data.push(300, 200);
 
data.push(400, 250);
data.push(300, 300);
 
data.push(250, 400);
data.push(200, 300);
 
data.push(100, 250);
data.push(200, 200);
 
commands.push(GraphicsPathCommand.CURVE_TO);
commands.push(GraphicsPathCommand.CURVE_TO);
commands.push(GraphicsPathCommand.CURVE_TO);
commands.push(GraphicsPathCommand.CURVE_TO);

WIDE_LINT_TO模式参考代码如下：

^? View Code ACTIONSCRIPT3

data.push(200, 200);
 
data.push(250, 100);
data.push(300, 200);
 
data.push(400, 250);
data.push(300, 300);
 
data.push(250, 400);
data.push(200, 300);
 
data.push(100, 250);
data.push(200, 200);
 
lineCommands.push(GraphicsPathCommand.MOVE_TO);
// 使用WIDE_LINE_TO命令可以跳过data中的前一组坐标，跟CURVE_TO同步
lineCommands.push(GraphicsPathCommand.WIDE_LINE_TO);
lineCommands.push(GraphicsPathCommand.WIDE_LINE_TO);
lineCommands.push(GraphicsPathCommand.WIDE_LINE_TO);
lineCommands.push(GraphicsPathCommand.WIDE_LINE_TO);

缠绕

顺时针：正向缠绕；逆时针：负向缠绕
在一次beginFill/endFill 时，出现路径交叉，那么默认是不填充交叉部分的
GraphicsPathWinding.EVEN_ODD ：默认情况

^? View Code ACTIONSCRIPT3

graphics.drawPath(commands, data1, GraphicsPathWinding.EVEN_ODD);

GraphicsPathWinding.NON_ZERO ：
如果两个路径的缠绕一致（都或正或者负），则填充交叉区域。
如果两个路径的缠绕不一致（一正一负），则不填充交叉区域。

^? View Code ACTIONSCRIPT3

graphics.drawPath(commands, data1, GraphicsPathWinding.NON_ZERO);

三角形

一个 drawTriangles参数

^? View Code ACTIONSCRIPT3

var vertices:Vector.<Number> = new Vector.<Number>();
vertices.push(100, 100);
vertices.push(200, 100);
vertices.push(150, 200);
 
graphics.lineStyle(0);
graphics.drawTriangles(vertices);

两个 drawTriangles参数，可以减少顶点的总数目

^? View Code ACTIONSCRIPT3

var vertices:Vector.<Number> = new Vector.<Number>();
vertices.push(100, 100);
vertices.push(200, 100);
vertices.push(200, 200);
vertices.push(100, 200);
 
var indices:Vector.<int> = new Vector.<int>();
indices.push(0, 1, 2);
indices.push(2, 3, 0);
 
graphics.lineStyle(0);
graphics.drawTriangles(vertices, indices);

uvtData

drawTriangles的第三个可选参数还是一个Vector （Number型），称作uvtData 。uvt表示了影响位图映射于三角形的三个值。u和v 代表x轴和y轴的比例，t 在用于3D时代表缩放。

^? View Code ACTIONSCRIPT3

var vertices:Vector.<Number> = new Vector.<Number>();
vertices.push(150, 50);
vertices.push(1000, 100);
vertices.push(800, 600);
vertices.push(100, 200);
 
var uvtData:Vector.<Number> = new Vector.<Number>();
uvtData.push(0, 0);
uvtData.push(1, 0);
uvtData.push(1, 1);
uvtData.push(0, 1);
 
var indices:Vector.<int> = new Vector.<int>();
indices.push(0, 1, 2);
indices.push(2, 3, 0);
 
var bitmap:Bitmap = new ImageClass() as Bitmap;
graphics.beginBitmapFill(bitmap.bitmapData);
graphics.drawTriangles(vertices, indices, uvtData);
graphics.endFill();

三角形和3D

使用三角实现3D的基本策略：
1. 创建一堆三角结构顶点和索引。
2. 计算于每个顶点相符的3D坐标点位置。
3. 使用透视法计算3D坐标点在屏幕上的坐标，作为定点的值。

^? View Code ACTIONSCRIPT3

perspectiveScale = focalLength / (focalLength + zPosition)

一个含有x,y,z的坐标点，z坐标用于求出缩放比例。然后用这个比例乘以x,y就能得到点在屏幕上的位置，这个位置也就是顶点的值。可以将这个值作为uvtData 的第三个参数。

^? View Code ACTIONSCRIPT3

var scale:Number = focalLength / (focalLength + zpos + centerZ);
vertices.push(xpos * scale, ypos * scale);
uvtData.push(j / (cols - 1), i / (rows - 1));
uvtData.push(scale);

4. 使用drawTriangles 传入顶点和索引。

culling

drawTriangles的第四个可选参数culling，它是一个字符串，接收"positive"，"negative"，"none"三个值。
TriangleCulling.POSITIVE ：剔除逆时针的三角形
TriangleCulling.NEGATIVE ：剔除顺时针的三角形
TriangleCulling.NONE：全部绘制

^? View Code ACTIONSCRIPT3

sprite.graphics.drawTriangles(vertices, indices, uvtData, TriangleCulling.NEGATIVE);