关于FLEX全局坐标、本地坐标、内容坐标自己做的练习

<?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"  creationComplete="application1_creationCompleteHandler(event)"
      xmlns:mx="library://ns.adobe.com/flex/mx"  width="1000" height="600">
 <fx:Script>
  <![CDATA[
   import flash.text.Font;
   
   import mx.containers.Canvas;
   import mx.events.FlexEvent;

   protected function application1_creationCompleteHandler(event:FlexEvent):void
   {
    
   }
   protected function button1_clickHandler(event:MouseEvent):void
   {
   }
   protected function Btn_mouseDownHandler(event:MouseEvent):void
   {
    Btn.startDrag(true);
    text.text = "鼠标X坐标" + Btn.x +"鼠标Y坐标" +Btn.y; 
    var point:Point = new Point(Btn.x,Btn.y);
    text2.text = "鼠标内容X坐标" + Btn.contentToLocal(point); 

   }


   protected function Btn_mouseUpHandler(event:MouseEvent):void
   {
    Btn.stopDrag();
    text.text = "鼠标X坐标" + Btn.x +"鼠标Y坐标" +Btn.y; 
    var point:Point = new Point(Btn.x,Btn.y);
    text2.text = "鼠标内容X坐标" + Btn.contentToLocal(point); 
   }
   protected function Btn_mouseMoveHandler(event:MouseEvent):void
   {
    text.text = "鼠标X坐标" + Btn.x +"鼠标Y坐标" +Btn.y; 
    var point:Point = new Point(Btn.x,Btn.y);
    text2.text = "鼠标内容X坐标" + Btn.contentToLocal(point); 
   }

  ]]>
 </fx:Script>
 <mx:Canvas width="300" height="300" x="321" y="84" backgroundColor="0x11111">
  <mx:Canvas width="200" height="200" backgroundColor="0x12345" x="50" y="50">
   <mx:Button id="Btn"  height="20" x="16" y="35" click="button1_clickHandler(event)" mouseDown="Btn_mouseDownHandler(event)"
          mouseUp="Btn_mouseUpHandler(event)" mouseMove="Btn_mouseMoveHandler(event)"/>
  </mx:Canvas>
 </mx:Canvas>
 <mx:Text id="text"  x="322" y="24" width="282" height="56"/>
 <mx:Text id="text2" x="347" y="387" width="255" height="56"/>


</s:Application>

加张图明确一下