转:Flex中的Image屬性 (width, contentWidth, content.width)的差異

Flex是個包裹著糖衣的惡魔，其實這樣講是比較聳動啦，之所以會這樣講是因為Flex表面上看起來很容易，會很容易讓人家覺得元件拖一拖拉一拉就可以完成一隻程式，但是不論是哪種程式語言(就算是大家比較熟析的ASP.NET)，基礎永遠是最重要的，所以再次提一次，要用Flex的話，ActionScript 3.0真的要好好學啊。

很多人大都搞不清楚Image的運作方式，對Flex中的Image元件這麼多屬性更是搞不清楚，所以利用一些時間來紀錄一下width, contentWidth和content.width有什麼不一樣。

我用最簡單的來說說明這件事，示範和較為原理的部分下次再寫。

1. width和height是同一組的屬性，指的是Image的控制元件的寬和高，一般而言跟讀入的圖片沒有絕對關係，但是當Image元件沒有設定width和height屬性時，預設大小為讀入圖片的寬與高，需要注意的是complete事件並不會吐出正確的值，必須至少要等待到updateComplete事件才能讀取正確的資料。(該示範下次有時間再寫)
2. contentWidth和contentHeight是同一組的屬性，指的是讀取圖片後的內容，在原廠的Help中寫道："Width of the scaled content loaded by the control, in pixels."，這句話是說contentWidth指的是縮放或調整後的圖片大小，若是在complete事件觸發時就是原始圖片的width或是height，反之在updateComplete事件觸發時，就是變更後的width或是height，這組屬性比較讓人造成誤會。
3. content.width和content.height是屬於content同一組的屬性，content指的就是讀取圖片本身，而content.width和content.height就是圖片的widh和height屬性，complete事件觸發時就可以得到圖片原始大小，事後縮放並不會去影響該值。

這樣應該就可以解釋的很清楚了，每一種屬性有其使用方便的地方，你可以慎選適合的屬性來使用，這其實看示範跟繼承表會比較容易了解是怎麼一回事，先預告一下，會這樣的原因就在於Image繼承SwfLoader，而SwfLoader則是用Loader來實作出來的，若想要了解Loader可以參考Help或是看我書中的介紹，應該都蠻清楚的。

 

 

PS:经测试

private function on_tool_update(e:FlexEvent):void

		{

			try

			{

				var img:Image = e.currentTarget as Image;

				if(img.content!=null)

				{

					img.width = img.content.width;

					img.height = img.content.height;

				}

			}

			catch(e:Event)

			{

			}

		}

在设置source和FlexEvent.UPDATE_COMPLETE事件后,可以在事件中获取图片的大小.