Canvas Mouse Position, mouse down event
<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".
This user guide is licensed for use under the terms of the Creative Commons Attribution
Non-Commercial 3.0 License.
This License allows users to copy, distribute, and transmit the user guide for noncommercial
purposes only so long as
(1) proper attribution to Adobe is given as the owner of the user guide; and
(2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms.
The best way to provide notice is to include the following link.
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/
-->
<!-- containers\intro\MousePosition.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
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 the
// event target, typically one of the
// colored internal Canvas containers.
// A production version of this example could use the stageX
// and stageY properties, which use the global coordinates,
// and avoid this step.
// This example uses the localX and localY properties only to
// illustrate conversion between different frames of reference.
var pt:Point = new Point(event.localX, event.localY);
pt = event.target.localToGlobal(pt);
// Convert the global coordinates to the content coordinates
// inside the outer c1 Canvas container.
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);
}
</fx: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>
</s:Application>
Related examples in the same category
