Flex で何がしかのコンポーネント上でマウスをクリックしたときの座標について。ビミョーに異なる目的のものが用意されてるのでメモ。
座標系について
グローバル - グローバル座標系は、コンポーネントのコンテキストから独立した、座標の全体集合を提供します。MouseEvent クラスに、stageX および stageY というグローバル座標系のプロパティがあります。
ローカル - ローカル座標系は、マウスポインタの位置を表すために使用されます。どのコンポーネントにも、ローカル座標系を使用する mouseX プロパティと mouseY プロパティが存在します。MouseEvent クラスに、localX および localY というローカル座標系のプロパティがあります。
コンテンツ - この座標系は、コンポーネントの内容の左上隅を原点とします。UIComponent の contentMouseX プロパティと contentMouseY プロパティは、マウスポインタの位置をコンテンツ座標系で返します。Adobe Flex 3 ヘルプ - Flex 座標の使用 より部分的に適宜省略しながら抜粋
まぁ文字だけじゃ何が何だかワカランわけですが、引用元の Adobe ヘルプにあるサイトの図がわかりやすいです。
ヘー、って感じです。
んで、実際に座標はどんな数字が出てくるのか実験してみる。
ソースの mxml はこんな感じ。Canvas コンポーネントの上でマウス動かすと、コンテンツ座標系とローカル座標系を表示してるだけ。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="460" height="517" xmlns:ns1="*"> <mx:Panel width="242" height="410"> <mx:Script> <![CDATA[ public function canvasMouseMoveHandler(event:MouseEvent):void { debugArea.text += canvas.contentMouseX + ":" + canvas.contentMouseY + ":" + event.localX + ":" + event.localY + "\n"; } ]]> </mx:Script> <mx:Canvas id="canvas" x="10" y="10" borderStyle="solid" backgroundColor="0x88888888" width="200" height="200" mouseMove="canvasMouseMoveHandler(event)"> </mx:Canvas> <mx:TextArea id="debugArea" x="10" y="275" width="200" height="141" liveScrolling="false"/> <mx:TextInput id="contentMouseXText" /> </mx:Panel> </mx:Application>
実行結果の画面はこんな感じ。Adobe のリファレンス通りの動作してますね。
Canvas コンポーネントの境界の枠線(という表現でいいのか?)の 1 ポイント分だけコンテンツ座標はローカル座標より少なくなってる、って解釈でいいのかな? そのせいか、枠線の上通った時にマウスムーブイベント拾うとコンテンツ座標系が -1 になってるのが面白いw