Adobe Flex迷你教程 — 让Graphics的线响应事件。

     查看flex的画线工具Garphics类的 API，我们知道Garphics不是直接new的，在flex的很多容器中比如BorderContainer中都有它的引用， 这样我们也可以绘制出许多优美的线条。但是，现在需求来了：

     1.在一个页面上有许多网络设备，我们需要用线条把他们连接起来组成网络拓扑图。

     2.对于不同的设备直接的连线显示不同的样式。

     3.对于不同的设备直接的连线显示不同的toolTip；

     很显然，就2.3需求BorderContainer很不满足的，那么我们对它进行包装来满足我们的需求，我原本的设计是这样的：

  index.mxml 程序  是个Appliction程序，是视图的主入口，调用 VisualGraph，把itemrander设置到 VisualGraph中

 VisualGraph extends  UIComponent;  用来集成所有的线。有三个两个比较重要的方法

        method： public function set dataProvider(graph:XML)：void //提供一个每根线的信息

                       {

                                if(graph){
                    for each(var edge:XML in graph.Edge)    
                    {
                        createVNodeComponent(edge);
                    }
               

                  }

                       public function set itemRenderer(ifac:IFactory):void

                       protected function createEdgeComponent(edge:XML):UIComponent//创建每根线

                      EdgeItemRenderer  extends IDataRenderer  ,是每根线的显示对象,在主程序中会把这个renderer设置到VisualGraph中

  好了，意淫归意淫，今晚，我没有安照上面的逻辑封装。仅仅为了测试今天的主题是否可行,测试还算成功。但明天的项目设计，还是得遵循oop的思想好好按刚才的想法封装，保证易扩展，易维护。

 

 

 主程序index.mxml

 

<?xml version="1.0"?>
<!--
* Created with IntelliJ IDEA.
* User: DongYang
* Date: 13-3-13
* Time: 下午21:30
* Progress every day a little more -->
<s:Application xmlns:fx= "http://ns.adobe.com/mxml/2009"
              xmlns:s= "library://ns.adobe.com/flex/spark"
              xmlns:mx= "library://ns.adobe.com/flex/mx" creationComplete= "creationCompleteHandler(event)" >
    <mx:Canvas id= "canvas" width= "100%" height= "100%" />
    <fx:Script> <![CDATA[
        import Renderers.edgeRenderers.EdgeItemRenderer;
        import flashx.textLayout.container.ScrollPolicy;
        import mx.core.IDataRenderer;
        import mx.core.UIComponent;
        import mx.events.FlexEvent;
        private function creationCompleteHandler( event : FlexEvent ): void {
            var edgeLayer : Canvas = new Canvas();
            edgeLayer . clipContent = false;
            edgeLayer . horizontalScrollPolicy = ScrollPolicy . OFF;
            edgeLayer . verticalScrollPolicy = ScrollPolicy . OFF;
            edgeLayer . percentWidth = 100;
            edgeLayer . percentHeight = 100;
            canvas . addChild( edgeLayer);
            for ( var i : int = 1; i < 10; i ++) {
                var mycomponent : UIComponent;
                mycomponent = new EdgeItemRenderer();
               ( mycomponent as IDataRenderer ). data = i * 20;
                mycomponent . addEventListener( MouseEvent . CLICK , mycomponent_clickHandler);
                edgeLayer . addChild( mycomponent);
            }
        }

        private function mycomponent_clickHandler( event : MouseEvent ): void {
            trace( "hello line" , ( event . target as IDataRenderer ). data);
        }
        ]]> </fx:Script>
</s:Application>

 

ActionScript 3语言: EdgeItemRenderer.as

 

/**
* Created with IntelliJ IDEA.
* User: DongYang
* Date: 13-3-13
* Time: 下午22:30
* Progress every day a little more.
*/
package Renderers.edgeRenderers {
import spark.components.supportClasses.ItemRenderer;

public class EdgeItemRenderer extends ItemRenderer {
    public function EdgeItemRenderer() {
    }


    override protected function updateDisplayList( unscaledWidth : Number , unscaledHeight : Number ): void {
        super . updateDisplayList( unscaledWidth , unscaledHeight);
        this . graphics . clear();
        draw();
    }

    public function draw (): void {
        this . graphics . beginFill( 0 xFF0000 , 1);
        this . graphics . lineStyle( 2 , 0 xFF0000 , 1);
        this . graphics . moveTo( 10 , this . data as int);
        this . graphics . lineTo( 100 , this . data as int);

    }


}
}

   sudgeItemRenderer.as