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(0xFF0000, 1);
       this.graphics.lineStyle(2, 0xFF0000, 1);
       this.graphics.moveTo(10, this.data as int);
       this.graphics.lineTo(100, this.data as int);

   }


}
}

   sudgeItemRenderer.as