take some notes 【開発メモ AWS WEB IoT etc】 Flex Imageコンポーネント　SparkとmxのlocalXの違い

日々学んだことを残しておこう。きっと未来の自分が探しにくる。　（ただ忘れっぽいだけです…）

Flex Imageコンポーネント　SparkとmxのlocalXの違い

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 座標の使用

関連記事