第四章 渲染技术Ⅰ[FL 基理译]

可以把绘图 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 方法。把这个留做是一个练习，希望大家有兴趣的话，能够自行完成。