タイトル
 メニューにないコーナーはTopからいけます
TOP覚え書きFlex → This Page
Flexサンプル

Image タグの実際の描画サイズを取得

サンプル概要

Image タグに表示されている画像の実際の描画サイズを取得します
(Image タグのサイズとは異なります)

どういうことかと言うと、
Image タグには width="200",height="200" の正方形に設定しているが
表示する画像が横長の場合、実際に表示される領域は width="200",height="120"
などの調整されたサイズになっている場合があります。
画像の実際の描画サイズ

Image タグのサイズ

本サンプルでは、この実際に表示されている領域のサイズを取得します。

サンプルイメージ

サンプル画像


サンプルソース

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="546" height="279">
	<mx:Script>
		<![CDATA[
			import mx.core.FlexLoader;
			import mx.controls.Alert;
			
			/**
			 * ボタンのクリック
			 * Imageタグのサイズと描画領域サイズの取得
			 */
			private function getSize():void {
				// 描画領域オブジェクトを取得
				var obj:FlexLoader = getChildImage(img);
				if (obj == null) {
					Alert.show("描画領域の取得に失敗!");
					return;
				}
				
				lbl1.text = img.width + "-" + img.height;
				lbl2.text = obj.width + "-" + obj.height;
			}
			
			/**
			 * Image タグ内の FlexLoader を返す
			 * 
			 * @param imgobj	Image タグ
			 */
			private function getChildImage(imgobj:Image):FlexLoader {
				var obj:FlexLoader = null;
				
				for (var i:int = 0; i < imgobj.numChildren; i++) {
					var child:Object = imgobj.getChildAt(i);
					if (child is FlexLoader) {
						obj = child as FlexLoader;
						break;
					}
				}
				
				return obj;
			}
		]]>
	</mx:Script>
	
	<mx:Image  id="img" x="19" y="10" width="250" height="250" source="pic.gif" autoLoad="true"/>
	<mx:Button id="btn" x="303" y="10" label="ボタン" click="getSize()"/>
	<mx:Label  x="303" y="40" text="Imageタグのサイズ" width="113"/>
	<mx:Label  x="303" y="66" text="描画領域のサイズ" width="113"/>
	<mx:Label  id="lbl1" x="424" y="40" width="112"/>
	<mx:Label  id="lbl2" x="424" y="66" width="112"/>
</mx:Application>

サンプルソースのダウンロード

サンプルのダウンロード(ZIP圧縮)(Flex builder 2 用のプロジェクトファイルも同梱)

更新履歴

2008/03/19 本ページ新規追加


TOP覚え書きFlex → This Page
Valid CSS!