Flex绘图类的动态关联实现

 

 

 

要求效果

1、点击绘图工具栏的不同按钮，右边的绘图面板会用不同的工具进行绘制

2、选择拾色器的不同颜色，会使右边的绘图工具会出不同颜色的图形

实现要素

1、系统中设置一个环境类Env，它包含一些private的成员，和一些public的getter、setter方法。它主要记录用户当前设置的颜色、线宽、当前所选的绘图工具是哪个等信息。

2、系统中设置一个画板类DrawPanel（继承自Sprite），把它add到UIComponent中，再把该UIComponentadd到画布Canvas中。我们在DrawPanel的构造函数中绘制一个跟Cnavas大小一致的矩形，以便把Sprite“撑开”。

3、在左边的每个按钮添加一个Click事件，这个事件函数就是Env.setCurTool方法，它以每个按钮对应的绘图工具名称为参数，修改Env的当前绘图工具属性curTool。

4、最关键的是这一步，在DrawPanel类中实现 根据用户当前所选的绘图工具而动态的把事件（如鼠标按下）分发到相应的具体绘图类。

动态关联的实现

绘图类的动态关联是通过一种类似于java的Class.forName(“className”)实现的，具体步骤如下：

1、  导入相关系统类

2、  导入自定义的绘图类draw.*

3、  在DrawPanel中定义一个Object类型的成员变量shape

4、  分发鼠标按下事件

4.1声明n个绘图类对象（但不要实例化！）

4.2 var CurDrawTool:Class =getDefinitionByName("draw."+Env.getCurTool()) as Class;

4.3 shape = new CurDrawTool();

4.4 shape.onMouseDown(this);

5、  分发鼠标弹起事件

5.1  shape.onMouseUp(this);

注意事项

声明n个绘图类对象的做法是迫不得已的，因为如果在程序上下文中没有使用这个类的话，import语句并不会真正的导入类，或者说，不会在发布swf的时候被编译进去，只用在代码中使用到的类才会被编译进去。所以在var CurDrawTool:Class =getDefinitionByName("draw."+Env.getCurTool()) as Class;这条语句之前声明那n个绘图类变量（不用实例化，那样会浪费系统资源），否则会报ReferenceError:Error #1065。

其实如果getDefinitionByName的参数是系统类，比如说flash.display.Sprite的话，就不用再声明该类的一个变量了，因为这些内部类是Flash Player本身自带的，它永远找得到。

代码如下：

1. package draw
2. {
3.  //Sprite里面没有任何内容的容器
5. import flash.display.*;
6. import flash.events.MouseEvent;
7. import flash.geom.Point;
8. import flash.utils.*;
9. import draw.*;
10. public class DrawPanel extends Sprite
11. {
12.           private var shape:Object;
13.                 
14.           public function DrawPanel(canvasWidth:int = 600,canvasHeight:int = 400)
15.           {
16.                super();
17.                this.graphics.beginFill(0xffffff);
18.                this.graphics.drawRect(0, 0, canvasWidth, canvasHeight);
19.                this.graphics.endFill( );
20.                this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
21.                this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
22.           }
23.         
24.            
25.           private function onMouseDown(event:MouseEvent):void {
26.                var curDrawTool1:Ellipse;
27.                var curDrawTool2:Line;
28.                var CurDrawTool:Class = getDefinitionByName("draw."+Env.getCurTool()) as Class;
29.                shape = new CurDrawTool();
30.                shape.onMouseDown(this);
31.           }
32.          
33.           private function onMouseUp(event:MouseEvent):void {
34.                shape.onMouseUp(this);
35.           }
36.       
37.       }
38. }