kagamihogeの日記

kagamihogeの日記です。

Flex の座標系 - MouseEvent#localX と Canvas#contentMouseX のちがい

Flex で何がしかのコンポーネント上でマウスをクリックしたときの座標について。ビミョーに異なる目的のものが用意されてるのでメモ。

座標系について

グローバル - グローバル座標系は、コンポーネントのコンテキストから独立した、座標の全体集合を提供します。MouseEvent クラスに、stageX および stageY というグローバル座標系のプロパティがあります。
ローカル - ローカル座標系は、マウスポインタの位置を表すために使用されます。どのコンポーネントにも、ローカル座標系を使用する mouseX プロパティと mouseY プロパティが存在します。MouseEvent クラスに、localX および localY というローカル座標系のプロパティがあります。
コンテンツ - この座標系は、コンポーネントの内容の左上隅を原点とします。UIComponent の contentMouseX プロパティと contentMouseY プロパティは、マウスポインタの位置をコンテンツ座標系で返します。

Adobe Flex 3 ヘルプ - Flex 座標の使用 より部分的に適宜省略しながら抜粋

まぁ文字だけじゃ何が何だかワカランわけですが、引用元の Adobe ヘルプにあるサイトの図がわかりやすいです。

http://livedocs.adobe.com/flex/3_jp/html/images/coordinates_2.png

ヘー、って感じです。



んで、実際に座標はどんな数字が出てくるのか実験してみる。

ソースの 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