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>

 

评论

1 楼 elvishehai 2010-06-11  

画折线有DEMO吗? 想画一个折线的箭头