Flex coordinate system and Transformation

I just played Flex again these days, and it's interesting to feel the coordinates. The following is a reference to the coordinates.

Flash and flex provide three different coordinate systems for different purposes

Global is (stage-level)

Local Coordinate System (component-level)

Content coordinate system (relative to the local coordinate system)

The points in these coordinate systems can be converted, and there are corresponding methods. It seems that Adobe is very thoughtful. Let's talk about it one by one.

Global

The origin of this coordinate system is in the upper left corner of the entire flash stage. stagex and stagey of the mouseevent instance are values in this coordinate system,

Local

The coordinate origin is the upper left corner of the relative component. localx and localy in mouseevent are relative to the coordinate system,

Content

This is a abstraction of the contentmousex andContentmouseyThat's it. This is mainly for the component with a scroll bar. If there is a scroll bar, there must be a lot of content. The coordinates of the area occupied by the content are the coordinate system.

The following official figure shows the relationship and position of the Three Coordinate Systems:

There are also ready-made methods for Coordinate Transformation

Contentmousex	Returns the coordinates x of the mouse content.
Contentmousey	Returns the Y value of the mouse coordinate.
Contenttoglobal	Convert the content into global coordinates
Contenttolocal	Convert content into content coordinates
Globaltocontent	Convert global coordinates to content coordinates
Globaltolocal	Global to Local
Localtocontent	Coordinates from local to content
Localtoglobal	Local to global coordinates

 

 

Below is a small example

 

<? XML version = "1.0"?>
<! -- Containers/intro/mouseposition. mxml -->
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml"
Backgroundcolor = "white">

<Mx: SCRIPT>
<! [CDATA [
Import MX. Controls. Alert;

// Handle the mousedown event generated
// By clicking in the application.
Private function handlemousedown (Event: mouseevent): void {

// Convert the mouse position to global coordinates.
// The localx and localy properties of the mouse event contain
// The coordinates at which the event occurred relative to
// Event Target, typically one of
// Colored internal canvas controls.
// A production version of this example cocould use the stagex
// And stagey properties, which use the global coordinates,
// And avoid this step.
// This example uses the localx and localy properties only
// Define strate conversion between different frames of reference.
VaR PT: Point = new point (event. localx, event. localy );
PT = event.tar get. localtoglobal (PT );

// Convert the global coordinates to the content coordinates
// Inside the outer C1 canvas control.
PT = c1.globaltocontent (PT );

// Figure out which Quadrant was clicked.
VaR whichcolor: String = "Border Area ";

If (Pt. x <150 ){
If (Pt. Y <150)
Whichcolor = "red ";
Else
Whichcolor = "blue ";
}
Else {
If (Pt. Y <150)
Whichcolor = "green ";
Else
Whichcolor = "Magenta ";
}

Alert. Show ("You clicked on the" + whichcolor );
}
]>
</MX: SCRIPT>

<! -- Canvas container with four child Canvas containers -->
<Mx: canvas id = "C1"
Borderstyle = "NONE"
Width = "300" Height = "300"
Mousedown = "handlemousedown (event);">

<Mx: canvas
Width = "150" Height = "150"
X = "0" Y = "0"
Backgroundcolor = "red">
<Mx: button label = "I'm in red"/>
</MX: canvas>
<Mx: canvas
Width = "150" Height = "150"
X = "150" Y = "0"
Backgroundcolor = "green">
<Mx: button label = "I'm in green"/>
</MX: canvas>
<Mx: canvas
Width = "150" Height = "150"
X = "0" Y = "150"
Backgroundcolor = "blue">
<Mx: button label = "I'm in blue"/>
</MX: canvas>
<Mx: canvas
Width = "150" Height = "150"
X= "150" Y = "150"
Backgroundcolor = "Magenta">
<Mx: button label = "I'm in magenta"/>
</MX: canvas>
</MX: canvas>
</MX: Application>

This is probably the case. If you are interested, study it again and study it together.

Reprinted: http://blog.csdn.net/JavaTiger1/article/details/3289947