学习 Flash 中的 ActionScript 2.0 |
|
|
|
| 动画、滤镜和绘画 > 使用 ActionScript 绘画 > 绘制特定形状 | |||
本节介绍如何创建一些更灵活的方法,以用来绘制更高级的形状,例如圆角矩形和圆形。
创建矩形:
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();
}
}
Flash 在舞台上绘制一个简单的绿色矩形,并将其定位在 100,100。若要更改矩形的尺寸、其填充颜色或透明度,可以在对 drawRectangle() 方法的调用中更改这些值,而无需修改 MovieClip.beginFill() 方法的内容。
还可以使用 Drawing API 创建带有圆角的矩形,如下面的过程所示。
创建圆角矩形:
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();
}
}
舞台上将出现一个绿色矩形,其宽度和高度分别为 240 和 180 像素,并且带有 20 像素的圆角。通过使用 MovieClip.createEmptyMovieClip() 创建新影片剪辑并调用自定义的 drawRoundedRectangle() 函数可以创建多个圆角矩形实例。
使用 Drawing API 可以创建完美的圆形,如下面的过程所示。
创建圆形:
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();
}
}
此代码可创建比上一个圆形示例更复杂、更逼真的圆形。此示例不止调用了四次 curveTo() 方法,而是调用了八次 curveTo() 方法,使形状具有更圆滑的外观。
可以使用 Drawing API 来创建三角形,如下面的过程所示。
创建奇特的三角形:
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 量(透明度)来填充它。
在硬盘上的 Samples 文件夹中可以找到范例源文件 drawingapi.fla,该文件演示了如何在 Flash 应用程序中使用 Drawing API。
|
|
|
|