绘制特定形状

本节介绍如何创建一些更灵活的方法,以用来绘制更高级的形状,例如圆角矩形和圆形。

创建矩形:

  1. 创建一个新的 Flash 文档,并将它保存为 rect.fla
  2. 将下面的 ActionScript 代码添加到时间轴中的第 1 帧:
    this.createEmptyMovieClip("rectangle_mc", 10);
    rectangle_mc._x = 100;
    rectangle_mc._y = 100;
    drawRectangle(rectangle_mc, 240, 180, 0x99FF00, 100);
    function drawRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, fillColor:Number, fillAlpha:Number):Void {
        with (target_mc) {
            beginFill(fillColor, fillAlpha);
            moveTo(0, 0);
            lineTo(boxWidth, 0);
            lineTo(boxWidth, boxHeight);
            lineTo(0, boxHeight);
            lineTo(0, 0);
            endFill();
        }
    }
    
  3. 保存 Flash 文档,然后选择"控制">"测试影片"对该 Flash 文档进行测试。

    Flash 在舞台上绘制一个简单的绿色矩形,并将其定位在 100,100。若要更改矩形的尺寸、其填充颜色或透明度,可以在对 drawRectangle() 方法的调用中更改这些值,而无需修改 MovieClip.beginFill() 方法的内容。

还可以使用 Drawing API 创建带有圆角的矩形,如下面的过程所示。

创建圆角矩形:

  1. 创建一个新的 Flash 文档,并将它保存为 roundrect.fla
  2. 将下面的 ActionScript 代码添加到时间轴中的第 1 帧:
    this.createEmptyMovieClip("rectangle_mc", 10);
    rectangle_mc._x = 100;
    rectangle_mc._y = 100;
    drawRoundedRectangle(rectangle_mc, 240, 180, 20, 0x99FF00, 100);
    function drawRoundedRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, cornerRadius:Number, fillColor:Number, fillAlpha:Number):Void {
        with (target_mc) {
            beginFill(fillColor, fillAlpha);
            moveTo(cornerRadius, 0);
            lineTo(boxWidth - cornerRadius, 0);
            curveTo(boxWidth, 0, boxWidth, cornerRadius);
            lineTo(boxWidth, cornerRadius);
            lineTo(boxWidth, boxHeight - cornerRadius);
            curveTo(boxWidth, boxHeight, boxWidth - cornerRadius, boxHeight);
            lineTo(boxWidth - cornerRadius, boxHeight);
            lineTo(cornerRadius, boxHeight);
            curveTo(0, boxHeight, 0, boxHeight - cornerRadius);
            lineTo(0, boxHeight - cornerRadius);
            lineTo(0, cornerRadius);
            curveTo(0, 0, cornerRadius, 0);
            lineTo(cornerRadius, 0);
            endFill();
        }
    }
    
  3. 保存 Flash 文档,然后选择"控制">"测试影片"对该文档进行测试。

    舞台上将出现一个绿色矩形,其宽度和高度分别为 240 和 180 像素,并且带有 20 像素的圆角。通过使用 MovieClip.createEmptyMovieClip() 创建新影片剪辑并调用自定义的 drawRoundedRectangle() 函数可以创建多个圆角矩形实例。

使用 Drawing API 可以创建完美的圆形,如下面的过程所示。

创建圆形:

  1. 创建一个新的 Flash 文档,并将它保存为 circle2.fla
  2. 将下面的 ActionScript 代码添加到时间轴中的第 1 帧:
    this.createEmptyMovieClip("circle_mc", 10);
    circle_mc._x = 100;
    circle_mc._y = 100;
    drawCircle(circle_mc, 100, 0x99FF00, 100);
    
    function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
        var x:Number = radius;
        var y:Number = radius;
        with (target_mc) {
            beginFill(fillColor, fillAlpha); 
            moveTo(x + radius, y);
            curveTo(radius + x, Math.tan(Math.PI / 8) * radius + y, Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
            curveTo(Math.tan(Math.PI / 8) * radius + x, radius + y, x, radius + y);
            curveTo(-Math.tan(Math.PI / 8) * radius + x, radius+ y, -Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
            curveTo(-radius + x, Math.tan(Math.PI / 8) * radius + y, -radius + x, y);
            curveTo(-radius + x, -Math.tan(Math.PI / 8) * radius + y, -Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
            curveTo(-Math.tan(Math.PI / 8) * radius + x, -radius + y, x, -radius + y);
            curveTo(Math.tan(Math.PI / 8) * radius + x, -radius + y, Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
            curveTo(radius + x, -Math.tan(Math.PI / 8) * radius + y, radius + x, y);
            endFill();
        }
    }
    
  3. 保存 Flash 文档,然后选择"控制">"测试影片"对该 SWF 文件进行测试。

此代码可创建比上一个圆形示例更复杂、更逼真的圆形。此示例不止调用了四次 curveTo() 方法,而是调用了八次 curveTo() 方法,使形状具有更圆滑的外观。

可以使用 Drawing API 来创建三角形,如下面的过程所示。

创建奇特的三角形:

  1. 创建一个新的 Flash 文档,并将它保存为 fancytriangle.fla
  2. 将下面的 ActionScript 添加到时间轴中的第 1 帧:
    this.createEmptyMovieClip("triangle_mc", 10);
    triangle_mc._x = 100;
    triangle_mc._y = 100;
    drawTriangle(triangle_mc, 100, 0x99FF00, 100);
    
    function drawTriangle(target_mc:MovieClip, sideLength:Number, fillColor:Number, fillAlpha:Number):Void {
        var tHeight:Number = sideLength * Math.sqrt(3) / 2;
        with (target_mc) {
            beginFill(fillColor, fillAlpha);
            moveTo(sideLength / 2, 0);
            lineTo(sideLength, tHeight);
            lineTo(0, tHeight);
            lineTo(sideLength / 2, 0);
            endFill();
        }
    }
    

    Drawing API 在舞台上绘制一个等边三角形,并使用指定的填充颜色和 Alpha 量(透明度)来填充它。

  3. 保存 Flash 文档,然后选择"控制">"测试影片"对该 Flash 文档进行测试。

在硬盘上的 Samples 文件夹中可以找到范例源文件 drawingapi.fla,该文件演示了如何在 Flash 应用程序中使用 Drawing API。