使用 Graphics 实例进行的所有绘制均基于包含线条和曲线的基本绘制。因此,必须使用一系列相同的步骤来执行所有 ActionScript 绘制:
-
定义线条和填充样式
-
设置初始绘制位置
-
绘制线条、曲线和形状(可选择移动绘制点)
-
如有必要,完成创建填充
定义线条和填充样式
要使用 Shape、Sprite 或 MovieClip 实例的
graphics
属性进行绘制,您必须先定义在绘制时使用的样式(线条大小和颜色、填充颜色)。就像使用 Adobe® Flash® Professional 或其他绘图应用程序中的绘制工具一样,使用 ActionScript 进行绘制时,可以使用笔触进行绘制,也可以不使用笔触;可以使用填充颜色进行绘制,也可以不使用填充颜色。您可以使用
lineStyle()
或
lineGradientStyle()
方法来指定笔触的外观。要创建纯色线条,请使用
lineStyle()
方法。调用此方法时,您指定的最常用的值是前三个参数:线条粗细、颜色以及 Alpha。例如,该行代码指示名为
myShape
的 Shape 对象绘制 2 个像素粗、红色 (0x990000) 以及 75% 不透明的线条:
myShape.graphics.lineStyle(2, 0x990000, .75);
Alpha 参数的默认值为 1.0 (100%),因此,如果需要完全不透明的线条,可以将该参数的值保持不变。
lineStyle()
方法还接受另外两个参数,分别对应于像素提示和缩放模式;有关使用这些参数的详细信息,请参阅
用于 Adobe Flash Platform 的 ActionScript 3.0 参考
中
Graphics.lineStyle()
方法的说明。
要创建渐变线条,请使用
lineGradientStyle()
方法。关于此方法的介绍请参阅
创建渐变线条和填充
。
如果要创建填充形状,请在开始绘制之前调用
beginFill()
、
beginGradientFill()
、
beginBitmapFill()
或
beginShaderFill()
方法。其中的最基本方法
beginFill()
接受以下两个参数:填充颜色以及填充颜色的 Alpha 值(可选)。例如,如果要绘制具有纯绿色填充的形状,应使用以下代码(假设在名为
myShape
的对象上进行绘制):
myShape.graphics.beginFill(0x00FF00);
调用任何填充方法时,将隐式地结束任何以前的填充,然后再开始新的填充。调用任何指定笔触样式的方法时,将替换以前的笔触,但不会改变以前指定的填充,反之亦然。
指定了线条样式和填充属性后,下一步是指示绘制的起始点。Graphics 实例具有一个绘制点,就像在一张纸上的钢笔尖一样。无论绘制点位于什么位置,它都是开始执行下一个绘制动作的位置。最初,Graphics 对象将它绘制时所在对象的坐标空间中的点 (0, 0) 作为起始绘制点。要在其他点开始进行绘制,您可以先调用
moveTo()
方法,然后再调用绘制方法之一。这类似于将钢笔尖从纸上抬起,然后将其移到新位置。
确定绘制点后,可通过使用对绘制方法
lineTo()
(用于绘制直线)和
curveTo()
(用于绘制曲线)的一系列调用来进行绘制。
![](images/tip_help.png)
在进行绘制时,可随时调用
moveTo()
方法,将绘制点移到新位置而不进行绘制。
进行绘制时,如果您已指定填充颜色,可以通过调用
endFill()
方法关闭填充。如果绘制的不是闭合的形状(即,调用
endFill()
时绘制点不在形状的起始点),则调用
endFill()
方法时,Flash 运行时将自动绘制一条直线以使形状闭合,该直线从当前绘制点到最近一次
moveTo()
调用中指定的位置。如果已开始填充并且没有调用
endFill()
,调用
beginFill()
(或其他填充方法之一)时,将关闭当前填充并开始新的填充。
绘制直线
调用
lineTo()
方法时,Graphics 对象将绘制一条直线,该直线从当前绘制点到指定为方法调用中的两个参数的坐标,以便使用指定的线条样式进行绘制。例如,该行代码将绘制点放在点 (100, 100) 上,然后绘制一条到点 (200, 200) 的直线:
myShape.graphics.moveTo(100, 100);
myShape.graphics.lineTo(200, 200);
以下示例绘制红色和绿色三角形,其高度为 100 个像素:
var triangleHeight:uint = 100;
var triangle:Shape = new Shape();
// red triangle, starting at point 0, 0
triangle.graphics.beginFill(0xFF0000);
triangle.graphics.moveTo(triangleHeight / 2, 0);
triangle.graphics.lineTo(triangleHeight, triangleHeight);
triangle.graphics.lineTo(0, triangleHeight);
triangle.graphics.lineTo(triangleHeight / 2, 0);
// green triangle, starting at point 200, 0
triangle.graphics.beginFill(0x00FF00);
triangle.graphics.moveTo(200 + triangleHeight / 2, 0);
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight);
triangle.graphics.lineTo(200, triangleHeight);
triangle.graphics.lineTo(200 + triangleHeight / 2, 0);
this.addChild(triangle);
绘制曲线
curveTo()
方法可以绘制二次贝塞尔曲线。这将绘制一个连接两个点(称为锚点)的弧,同时向第三个点(称为控制点)弯曲。Graphics 对象使用当前绘制位置作为第一个锚点。调用
curveTo()
方法时,将传递以下四个参数:控制点的 x 和 y 坐标,后跟第二个锚点的 x 和 y 坐标。例如,以下代码绘制一条曲线,它从点 (100, 100) 开始,到点 (200, 200) 结束。由于控制点位于点 (175, 125),因此,这会创建一条曲线,它先向右移动,然后向下移动:
myShape.graphics.moveTo(100, 100);
myShape.graphics.curveTo(175, 125, 200, 200);
以下示例绘制红色和绿色圆形对象,其宽度和高度均为 100 个像素。请注意,由于二次贝塞尔方程式所具有的特性,这些对象并不是完美的圆:
var size:uint = 100;
var roundObject:Shape = new Shape();
// red circular shape
roundObject.graphics.beginFill(0xFF0000);
roundObject.graphics.moveTo(size / 2, 0);
roundObject.graphics.curveTo(size, 0, size, size / 2);
roundObject.graphics.curveTo(size, size, size / 2, size);
roundObject.graphics.curveTo(0, size, 0, size / 2);
roundObject.graphics.curveTo(0, 0, size / 2, 0);
// green circular shape
roundObject.graphics.beginFill(0x00FF00);
roundObject.graphics.moveTo(200 + size / 2, 0);
roundObject.graphics.curveTo(200 + size, 0, 200 + size, size / 2);
roundObject.graphics.curveTo(200 + size, size, 200 + size / 2, size);
roundObject.graphics.curveTo(200, size, 200, size / 2);
roundObject.graphics.curveTo(200, 0, 200 + size / 2, 0);
this.addChild(roundObject);
|
|
|