Flash Player 10 使用绘图API

 

转自：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);