使用 clear 删除绘制

clear 是所有方法中最简单的，它可以用来删除在影片中所绘制的直线，曲线或填充色。请注意，这个命令中对其它 graphics 绘制的图像不起作用。换句话讲，如果在编辑环境下绘制了一个图形，再对其使用 clear() 命令，结果是无效的。

在绘图中，使用 clear 方法会有些意想不到的效果。在绘图 API 中，如果绘制的影片剪辑越多，运行速度就越慢。对于有很多绘制图形的影片来说，速度不会立刻慢下了，而是随着每个图形所占用的绘制时间会越来越长，从而逐渐地变慢。就算新的图形完全覆盖住了所有旧图形，旧图形的矢量信息也仍然存在并且每次都会被重绘，只有使用 clear 函数才可以完全删除之前旧图形的矢量信息。

使用 lineStyle 设置线条样式

使用 lineStyle(width,color,alpha)方法，作用是为以后使用的绘图线条设置线条样式，该命令对于前面使用的绘图线条不会产生影响。实际上，除了清除或覆盖之外，没有方法可以影响或改变已经绘制的线条或填充。

前面列出的这些参数将来会经常使用，还有一些额外的可选参数如像素提示(pixel)，缩放模式(scale mode)，端点(caps)，拐角类型(joints)和切断尖角(mitres)。如果大家需要更多的设置，也许会用到它们，但是大多数情况下，只会用到下面这些参数。对于它们无需做太多解释，只是来复习一下：

• width：线条的宽度以像素为单位。只能使用0或正整数。虽然可以使用十进制浮点数，但会被取整为最接近的正整数。如果输入的是0或负数， Flash 将绘制1像素宽的线。这与在 Flash IDE 中在属性面板中选择“细线”的功能相同。
• color：线条的颜色。使用十进制或十六进制的24位色彩值表示。
• alpha：线条的透明度。使用0.0到1.0数字之间的数表示透明度的比例。值为1.0表示完全不透明，值为0.0表示完全透明或不可见。注意，这与 AS 2 中使用 0到100 表示法是不同的。

由于这些参数是可选的，可以只使用 lineStyle(1) 来设置一条1像素宽的黑色线条。其实第一个参数也是可选的，如果不填 widh 参数，只使用 lineStyle() 的话，那么线条就被清除，只获得了一条不可见的线，相当于使用绘图指令时没有设置线条样式(lineStyle)。另一个容易出错的地方是，在使用 clear 方法时，不仅清除了当前绘制的图形而且也清除了当前使用的线条样式。如果在影片绘图时设置了一个普通的线条样式，而后又将线条清除，那么在绘制其它图形之前还需要重新设置线条样式。否则的话，接下来绘制的线条就是不可见的，调用 clear 方法同时还会将绘图指针位置归为0,0。

使用 lineTo 和 moveTo 绘制直线

在一种绘图语言中会有多种方法用来绘制直线。一种是使用画线指令，需要有一个起点和一个终点，并在这两点之间画一条直线。另一种是使用 lineTo 指令，只需要一个终点。那么 ActionScript 是怎样工作的呢，如果向某一点画线，哪里才是起点呢？如果之前没有进行过画线，那么起点就是0,0点，可以这样写：lineTo(100, 100);

结果将会看到一条从左上角(0,0)画到100,100像素位置的线(假设已经设置了线条样式)。在绘制完最少一条线后，这条线的终点位置就会成为下一条线的起点位置。不过，我们还可以使用 moveTo 方法为下一条线指定一个新的起点位置。

可以把绘图 API 想像成一个拿着笔和纸的机器人，开始的时候，笔处在0,0点。当我们告诉它向某点画一条线时，它就将笔在纸上划过，并向这个位置移动。 moveTo 方法就像在说“ok,现在抬起笔，放到下一个点上。”虽然仅使用 moveTo 指令不会产生一个新的图形，但是它会影响下一次绘图时的位置。通常使用 moveTo 作为第一条绘图指令，用于将绘图 API 的“笔”移动到起点位置。现在大家已经拥有了足够的知识可以来实践一下了，让我们创建一个简单的绘图应用程序，这个程序是完全依赖绘图 API 完成的。这里是文档类：

package {
 import flash.display.Sprite;
 import flash.events.MouseEvent;
 public class DrawingApp extends Sprite {
  public function DrawingApp() {
   init();
  }
  private function init():void {
   graphics.lineStyle(1);
   stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
   stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
  }
  private function onMouseDown(event:MouseEvent):void {
   graphics.moveTo(mouseX, mouseY);
   stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
  }
  private function onMouseUp(event:MouseEvent):void {
   stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
  }
  private function onMouseMove(event:MouseEvent):void {
   graphics.lineTo(mouseX, mouseY);
  }
 }
}

首先，导入 MouseEvent 类，因为这里的每件事都要用到鼠标事件。在 init 方法中，线条样式设置为 1 像素黑色线，并增加 mouseDown 和 mouseUp 作为事件侦听器。

然后是 onMouseDown 方法，每当用户按下鼠标是都会调用它，这意味着用户要开始在当前鼠标位置画线了。这个函数通过使用 moveTo 方法将那支虚拟的笔放置在当前鼠标的位置，以鼠标坐标为参数，随后为 mouseMove 添加了一个侦听器。
每当用户移动鼠标时，都会调用 onMouseMove 方法，向当前鼠标的位置画一条线。
最后是 onMouseUp 方法，用于删除 mouseMove 侦听器使其不再进行画线。
好的，现在已经制作好了一个短小精悍的绘图程序。我们不需要再费太大的力气就可以为这个程序加入一些简单的控制，让它具有完整绘图程序的功能。只需要为线条颜色(color)和线条宽度(width)创建一些变量，再创建一些按钮什么的用来改变它们，并重新调用 lineStyle 方法使用这些新的值。对了，还可以再放一个按钮用于调用 clear 方法。把这个留做是一个练习，希望大家有兴趣的话，能够自行完成。

出处：蓝色理想
责任编辑：bluehearts

上一页 渲染技术 [3] 下一页 渲染技术 [5]

◎进入论坛RIA设计与应用版块参加讨论