Flex画流程图

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
 <mx:Canvas id="paper" x="30" y="24" width="719" height="600">
  <mx:Canvas id="Total" x="10" y="254" width="108" height="78"  borderStyle="inset">
   <mx:Button x="0" y="43" label="关键词导出" width="103" height="28"/>
   <mx:Text x="0" y="0" width="103" height="45" text="List   PV:10000" fontSize="12"/>
  </mx:Canvas>
  <mx:Canvas id="LEV1_1" x="187" y="95" width="108" height="70" borderStyle="inset">
   <mx:Button x="0" y="38" label="关键词导出" width="103" height="26"/>
   <mx:Text x="0" y="0"  width="103" height="39" text="List   PV:10000" fontSize="12"/>
  </mx:Canvas>
  <mx:Canvas id="LEV1_2" x="187" y="315" width="108" height="77" borderStyle="inset">
   <mx:Button x="0" y="45" label="关键词导出" width="103" height="26"/>
   <mx:Text x="0" y="0" width="103" height="46" text="List   PV:10000" fontSize="12"/>
  </mx:Canvas>
  <mx:Canvas id="LEV1_3" x="187" y="504" width="108" height="75" borderStyle="inset">
   <mx:Button x="0" y="41" label="关键词导出" width="103" height="28"/>
   <mx:Text x="0" y="0" width="103" height="42" text="List   PV:10000" fontSize="12"/>
  </mx:Canvas>
  <mx:Canvas id="LEV1_1_1" x="374" y="10" width="108" height="70" borderStyle="inset">
   <mx:Button x="0" y="38" label="关键词导出" width="103" height="26"/>
   <mx:Text x="0" y="0"  width="103" height="39" text="List   PV:10000" fontSize="12"/>
  </mx:Canvas>
  <mx:Canvas id="LEV1_1_2" x="374" y="88" width="108" height="77" borderStyle="inset">
   <mx:Button x="0" y="45" label="关键词导出" width="103" height="26"/>
   <mx:Text x="0" y="0" width="103" height="46" text="List   PV:10000" fontSize="12"/>
  </mx:Canvas>
  <mx:Canvas id="LEV1_1_3" x="374" y="173" width="108" height="75" borderStyle="inset">
   <mx:Button x="0" y="41" label="关键词导出" width="103" height="28" click="export(LEV1_1_3_text.text)"/>
   <mx:Text id="LEV1_1_3_text" x="0" y="0" width="103" height="42" text="List   PV:10000" fontSize="12"/>
  </mx:Canvas>
 </mx:Canvas>

<mx:Script>
 <![CDATA[
  import mx.controls.Button;
  
  import mx.containers.Canvas;
  
  private function initApp():void{
      
       paper.graphics.clear();
                doDraw(Total, LEV1_1);
                doDraw(Total, LEV1_2);
                doDraw(Total, LEV1_3);
                doDraw(LEV1_1, LEV1_1_1);
                doDraw(LEV1_1, LEV1_1_2);
                doDraw(LEV1_1, LEV1_1_3);
                createAll();
  }
  
  
  private function createAll():void{
    var canvas:Canvas = new Canvas();
    canvas.x = 374;
    canvas.y = 250;
    canvas.setActualSize(108, 75);
    canvas.setStyle("borderStyle", "inset");
    var button:Button = new Button();
    button.x = 0;
    button.y = 41;
    button.setActualSize(103,28);
    var text:Text = new Text();
    text.x = 0;
    text.y = 0;
    text.setActualSize(103,42);
    button.label = "关键词导出";
    text.text = "List   PV:10000";
    canvas.addChild(button);
    canvas.addChild(text);
    paper.addChild(canvas);
  }
  
  
  private function export(text:String):void{
          ExternalInterface.call("exportQueryXLS", text);  
  }
  
   private function doDraw(source:Sprite,target:Sprite):void
            {
                var radius:Number = 10;
                
                var sourceCenter:Point = new Point(source.x + source.width,source.y + source.height/2);
                var targetCenter:Point = new Point(target.x ,target.y + target.height/2);
                
                var sin:Number = (sourceCenter.y - targetCenter.y)/(Math.sqrt(Math.pow(sourceCenter.x - targetCenter.x,2)+Math.pow(sourceCenter.y - targetCenter.y,2)));

                var radian:Number = Math.asin(sin);
                var degree:Number = radian*180/Math.PI;
                
                if(source.x < target.x)
                {
                    if(degree == 0 )
                    {
                        degree = 180;
                    }
                    if(degree > 0)
                    {
                        degree = 180 - degree;
                    }
                    if(degree < 0)
                    {
                        degree = 180 + degree * -1;
                    }
                }

                degree += 90;
                radian = degree*Math.PI / 180;                
                
//                var offsetX:Number = radius * Math.cos(radian);        
//                var offsetY:Number = radius * Math.sin(radian);  
                var offsetX:Number = 0;
                var offsetY:Number = 0;  
                
                var sourcePointA:Point = new Point(sourceCenter.x + offsetX, sourceCenter.y + offsetY);
                var sourcePointB:Point = new Point(sourceCenter.x - offsetX, sourceCenter.y - offsetY);    
                
                var targetPointA:Point = new Point(targetCenter.x + offsetX, targetCenter.y + offsetY);
                var targetPointB:Point = new Point(targetCenter.x - offsetX, targetCenter.y - offsetY);    
                
               // paper.graphics.clear();
                paper.graphics.lineStyle(1,0x333300,100);
                paper.graphics.moveTo(sourcePointA.x,sourcePointA.y);
                paper.graphics.lineTo(targetPointA.x,targetPointA.y);    
//                paper.graphics.moveTo(sourcePointB.x,sourcePointB.y);
//                paper.graphics.lineTo(targetPointB.x,targetPointB.y);    
            }
  
 ]]>
</mx:Script>

</mx:Application>