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コンポーネントだけ変更したら挙動がおかしくなって、かなり探した結果この部分が異なっていました。
ということで、再度ミスしないようにメモしておきます。
(参考サイト)
Flex 座標の使用
画像上のマウスホイールのイベントを取得し、マウス位置を取得しようとしていて、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ファイル名 命名規約
trackback