take some notes 【開発メモ AWS WEB IoT etc】

Flexには、画像扱うコンポーネントとして、SparkのImageコンポーネントとmxのImageコンポーネントがありますが、あまり違いを意識せずに使っていて、ハマったところがあったのでメモしておきます。

画像上のマウスホイールのイベントを取得し、マウス位置を取得しようとしていて、localXとlocalYプロパティで画像上のX,Y座標を取得しようとしました。

その画像はオリジナルのサイズが200px×200pxで、widthとheightをセットする際に100px×100pxにしたものとします。
通常、画像の左上あたりにマウスイベント発生させる、e.localXもe.localYも0になります。
右下あたりにマウスイベント発生させると画像のサイズになるはずですが、そのサイズの概念が違うようです。

簡単にいうと、sparkのImageコンポーネントで作成した場合、セットしたimage.widthとimage.heightになるのに対して、mxのImageコンポーネントで作成した場合、オリジナルサイズのimage.content.widthとimage.content.heightになるという違いがありました。

最初、ソースは同じでImageコンポーネントだけ変更したら挙動がおかしくなって、かなり探した結果この部分が異なっていました。
ということで、再度ミスしないようにメモしておきます。

private function onMouseWheel(e:MouseEvent):void {
	
	var templocalX:Number;	
	var templocalY:Number;

	//sparkコンポーネントの場合
	templocalX = e.localX;	//100　画像の右下あたりでイベント発生させた場合
	templocalY = e.localY;	//100　画像の右下あたりでイベント発生させた場合

	//mxコンポーネントの場合
	templocalX = e.localX;	//200　画像の右下あたりでイベント発生させた場合
	templocalY = e.localY;	//200　画像の右下あたりでイベント発生させた場合
}

（参考サイト）
Flex 座標の使用

関連記事

• Flex Chromeでデバッグできない
• Flex Imageコンポーネント　SparkとmxのlocalXの違い
• Flex エラー　Argument count mismatch
• Flex 印刷機能 FlexPrintJob　
• Flex MXMLファイル名　命名規約