绘制线条和曲线

Flash Player 9 和更高版本,Adobe AIR 1.0 和更高版本

使用 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() (用于绘制曲线)的一系列调用来进行绘制。

在进行绘制时,可随时调用 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);