绘制线条和曲线

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);