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. }