flash actionscript 3绘制直线和曲线

首页 > ActionScript 3 > flash actionscript 3绘制直线和曲线

flash actionscript 3绘制直线和曲线

2009年8月23日云飞扬发表评论阅读评论

定义线条和填充样式
使用 ActionScript 进行绘制时，可以使用笔触进行绘制，也可以不使用笔触；可以使用填充颜色进行绘制，也可以不使用填充颜色。您可以使用 lineStyle() 或 lineGradientStyle() 方法来指定笔触的外观。要创建纯色线条，请使用 lineStyle() 方法。调用此方法时，您指定的最常用的值是前三个参数：线条粗细、颜色以及 Alpha。例如，该行代码指示名为 myShape 的 Shape 对象绘制 2 个像素粗、红色 (0x990000) 以及 75% 不透明的线条：

myShape.graphics.lineStyle(2, 0x990000, .75);
对象名.graphics.笔触的外观(像素,颜色，透明度)

说明：要创建渐变线条，请使用 lineGradientStyle() 方法

如果要创建填充形状，请在开始绘制之前调用 beginFill()、beginGradientFill()、beginBitmapFill() 或 beginShaderFill() 方法。其中的最基本方法 beginFill() 接受以下两个参数：填充颜色以及填充颜色的 Alpha 值（可选）。例如，如果要绘制具有纯绿色填充的形状，应使用以下代码（假设在名为 myShape 的对象上进行绘制）：

myShape.graphics.beginFill(0x00FF00);

调用任何填充方法时，将隐式地结束任何以前的填充，然后再开始新的填充。调用任何指定笔触样式的方法时，将替换以前的笔触，但不会改变以前指定的填充，反之亦然。

绘制直线
调用 lineTo() 方法时，Graphics 对象将绘制一条直线，该直线从当前绘制点到指定为方法调用中的两个参数的坐标，以便使用指定的线条样式进行绘制。例如，该行代码将绘制点放在点 (100, 100) 上，然后绘制一条到点 (200, 200) 的直线

myShape.graphics.moveTo(100, 100);
myShape.graphics.lineTo(200, 200);

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