actionscript 3 - how to draw a line between two component in flex -

i have 2 component 1 of them child of , need draw line between them mousedown , mouseup problem is: dont know how find real x,y of shape1 , shape2

(component recursive component wrote)

there piece of code dont work correctly

its component:

<mx:box id="component" borderstyle="solid" width="100%" height="500">     <local:compforsm id="compforss" label="پرسپکتیو" rotatelabel="true" statuscolor="{0x008000}" layouttype="{compforsm.horizental}" width="80%" height="80%" creationcomplete="createcomplete()" /> 

my mousedownhandler :

private function mousedown(e:mousedownorupevent):void { if (e.target != null) { if(firstobject == null){ firstobject = e.target;         firstpoint = component.localtoglobal(new point(component.x, component.y));         firstpoint.x = mousex - firstpoint.x;         firstpoint.y = mousey - firstpoint.y;         }          } 

}

i haven't done in while, think first want convert global point using components upper left coordinate.

then, if not drawing on stage on component, want convert global point local point relative component.

something this:

var globalpoint:point = component.localtoglobal(new point(0, 0));  var newlocalpoint:point = componentwhereyouwanttodrawifnotstage.globaltolocal( globalpoint ); 

edit:

i don't know trying accomplish. assume want draw somewhere mouse pointer - not sure. don't know mean recursive component.

here code draw line center of inner center of outer component. use canvas on top of components ensure line visible, no matter components may be.

<?xml version="1.0" encoding="utf-8"?> <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" minwidth="955" minheight="600"                creationcomplete="oncreationcomplete();">      <fx:script>         <![cdata[          private function oncreationcomplete():void         {             var globalinnerpoint:point = innercomponent.localtoglobal( new point( innercomponent.width / 2, innercomponent.height / 2 ) );             var globalouterpoint:point = outerccomponent.localtoglobal( new point( outerccomponent.width / 2, outerccomponent.height / 2 ) );              var canvaslayerinnerpoint:point = canvaslayer.globaltolocal( globalinnerpoint );             var canvaslayerouterpoint:point = canvaslayer.globaltolocal( globalouterpoint);              canvaslayer.graphics.linestyle(4, 0xff0000);             canvaslayer.graphics.moveto( canvaslayerinnerpoint.x, canvaslayerinnerpoint.y );             canvaslayer.graphics.lineto( canvaslayerouterpoint.x, canvaslayerouterpoint.y );         }         ]]>     </fx:script>       <mx:box id="outerccomponent" borderstyle="solid" width="100%" height="500">         <mx:box id="innercomponent" width="80%" height="80%" borderstyle="solid"/>     </mx:box>      <mx:canvas id="canvaslayer" height="100%" width="100%" />  </s:application>