Flash-flex coordinate system and its transformation

Flash and flex provide 3 different coordinate systems for different purposes.

The overall situation is (stage level)

Local coordinate system (component level)

The content coordinate system (as opposed to the local coordinate system)

The points of these coordinate systems can be converted, and there are corresponding methods, and it seems that Adobe is very thoughtful. Let's say one at a moment:

Global

The origin of this coordinate system is in the upper-left corner of the entire flash stage, and the stagex,stagey of the MouseEvent instance is the value in this coordinate system.

Local

The coordinate origin is the upper-left corner of the relative component, and the localx,localy in the MouseEvent is said to be relative to the coordinate system.

Content

This thing is more abstract UIComponent class instance of the contentmousex and contentMouseY is, this is mainly for the components of the scroll bar, there is a scroll bar, the content is certainly a lot, the content of the area of the coordinates is this coordinate system.

Here's an official diagram that illustrates the relationship and location of three coordinate systems:

. net/art/20091003/r91tmcxl6zxhy7o.jpg "target=" _blank ">

There are also ready-made methods for coordinate conversion:

contentMouseX	Returns the content coordinate x value of mouse
contentMouseY	Returns the content coordinate Y-value of mouse
contentToGlobal	Convert content coordinates to global coordinates
contentToLocal	convert content coordinates to content coordinates
globalToContent	Turn Global to content coordinates
globalToLocal	Global turn to Local
localToContent	Local to content coordinates
localToGlobal	Local to global coordinates

Here is a small example:

2. <?xml version= "1.0" ?>
4. <!--Containersintromouseposition.mxml-->
6. <mx:application xmlns:mx="Http://www.adobe.com/2006/mxml"
8. backgroundcolor="white">
12. <mx:Script>
14. <!--[cdata[
16. Import Mx.controls.Alert;
18. //Handle The MouseDown event generated   
20. //By clicking in the application.   
22. Private function Handlemousedown (event: mouseevent): void  {  
26. //Convert the mouse position to global coordinates.   
28. //The Localx and Localy properties of the mouse event contain   
30. //The coordinates at which the event occurred relative to the   
32. //Event target, typically one of the   
34. //colored internal Canvas controls.   
36. //A production version of this example could use the Stagex   
38. //And Stagey properties, which use the global coordinates,   
40. //And avoid this step.   
42. //This example uses the Localx and Localy properties   
44. //Illustrate conversion between different frames of reference.   
46. var pt:point = New Point (eventlocalx, event. localy);
48. PT = Event. Target.localtoglobal (PT);
52. //Convert the global coordinates to the content coordinates   
54. //Inside the outer C1 Canvas control.   
56. PT = C1.globaltocontent (PT);
60. //Figure out which quadrant is clicked.   
62. var whichcolor:string = "border area";
66. if (Pt.x <) {
68. if (Pt.y <)
70. Whichcolor = "Red";
72. Else   
74. Whichcolor = "Blue";
76. }
78. Else  {  
80. if (Pt.y <)
82. Whichcolor = "green";
84. Else   
86. Whichcolor = "Magenta";
88. }
92. Alert.show ("You clicked on the" + whichcolor);
94. }
96. ]]-->
98. </mx:Script>
100. <!--Canvas container with four Canvas containers-->
102. <mx:canvas id="C1"
104. borderstyle="None"
106. Width= " height= "
108. mousedown="Handlemousedown (event);" >
112. <mx:canvas
114. Width= " height= "
116. x="0" y="0"
118. backgroundcolor="Red">
120. <mx:button label="I ' m in Red"/>
122. </mx:Canvas>
124. <mx:canvas
126. Width= " height= "
128. x= " y=" "0"
130. backgroundcolor="green">
132. <mx:button label="I ' m in Green"/>
134. </mx:Canvas>
136. <mx:canvas
138. Width= " height= "
140. x= "0" y= "
142. backgroundcolor="Blue">
144. <mx:button label="I ' m in Blue"/>
146. </mx:Canvas>
148. <mx:canvas
150. Width= " height= "
152. x= " y= "
154. backgroundcolor="Magenta">
156. <mx:button label="I ' m in magenta"/>
158. </mx:Canvas>
160. </mx:Canvas>
162. </mx:Application>