Flex - 影像控制元件

簡介

影像控制元件允許您在執行時匯入 JPEG、PNG 和 GIF 檔案。您還可以使用 @Embed(source='filename') 在編譯時嵌入任何這些檔案。

嵌入式影像會立即載入，因為它們與 Flex SWF 檔案一起編譯。但是，它們會增加應用程式的大小並減慢應用程式初始化過程。嵌入式影像還要求您在影像檔案更改時重新編譯應用程式。

您可以從執行 SWF 檔案的本地檔案系統載入影像，也可以訪問遠端影像，通常透過網路上的 HTTP 請求。這些影像獨立於您的 Flex 應用程式，因此您可以更改它們而不會導致重新編譯操作，只要修改後的影像名稱保持不變。引用的影像不會增加應用程式初始載入時間的任何額外開銷。

類宣告

以下是 **spark.components.Image** 類的宣告：

public class Image 
   extends SkinnableComponent

公共屬性

序號	屬性及描述
1	bitmapData : BitmapData [只讀] 返回表示當前載入的影像內容（未縮放）的 BitmapData 物件的副本。
2	bytesLoaded : Number [只讀] 已載入影像的位元組數。
3	bytesTotal : Number [只讀] 以位元組為單位載入或待載入的總影像資料。
4	clearOnLoad : Boolean 表示是否在載入新內容之前清除先前的影像內容。
5	contentLoader : IContentLoader 可選的自定義影像載入器
6	contentLoaderGrouping : String 可選的內容分組識別符號，傳遞給關聯的 IContentLoader 例項的 load() 方法。
7	fillMode : String 確定點陣圖如何填充尺寸。
8	horizontalAlign : String 當內容沒有一對一的縱橫比且 scaleMode 設定為 mx.graphics.BitmapScaleMode.LETTERBOX 時，內容的水平對齊方式。
9	preliminaryHeight : Number 在佈局請求影像的“測量”邊界但影像資料尚未完成載入時，提供要用於高度的估計值。
10	preliminaryWidth : Number 在佈局請求影像的“測量”邊界但影像資料尚未完成載入時，提供要用於寬度的估計值。
11	scaleMode : String 當 fillMode 設定為 mx.graphics.BitmapFillMode.SCALE 時，確定影像如何縮放。
12	smooth : Boolean 指定是否將平滑演算法應用於點陣圖影像。
13	source : Object 點陣圖填充使用的源。
14	sourceHeight : Number [只讀] 提供原始影像資料的未縮放高度。
15	sourceWidth : Number [只讀] 提供原始影像資料的未縮放寬度。
16	trustedSource : Boolean [只讀] 一個只讀標誌，表示當前載入的內容是否被認為是從安全策略允許跨域影像訪問的源載入的。
17	verticalAlign : String 當內容沒有一對一的縱橫比且 scaleMode 設定為 mx.graphics.BitmapScaleMode.LETTERBOX 時，內容的垂直對齊方式。

公共方法

序號	方法及描述
1	Image() 建構函式。

事件

序號	事件及描述
1	complete 內容載入完成後排程。
2	httpStatus 透過 HTTP 發出網路請求並且 Flash Player 可以檢測到 HTTP 狀態程式碼時排程。
3	ioError 發生輸入或輸出錯誤時排程。
4	progress 內容正在載入時排程。
5	ready 內容載入完成後排程。
6	securityError 發生安全錯誤時排程。

繼承的方法

此類繼承自以下類：

spark.components.supportClasses.SkinnableComponent
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Flex 影像控制元件示例

讓我們按照以下步驟，透過建立一個測試應用程式來檢查 Flex 應用程式中影像控制元件的使用：

步驟	描述
1	在包 com.tutorialspoint.client 下建立一個名為 HelloWorld 的專案，如“Flex - 建立應用程式”一章中所述。
2	在 HelloWorld 應用程式根資料夾 HelloWorld 中建立一個名為 assets 的資料夾。
3	將示例影像 flex-mini.png 下載到 HelloWorld 資料夾下的 assets 資料夾中。
4	修改 HelloWorld.mxml，如下所述。保持其餘檔案不變。
5	編譯並執行應用程式，以確保業務邏輯按要求工作。

以下是修改後的 mxml 檔案 **src/com.tutorialspoint/HelloWorld.mxml** 的內容。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   applicationComplete = "init(event)" >	
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;

         [Bindable]
         [Embed(source = "assets/flex-mini.jpg")] 
         private var flexImage:Class; 
         protected function init(event:FlexEvent):void {
            dynamicImage.source = 
               "https://tutorialspoint.tw/images/flex-mini.png";
         }

      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "550" height = "600" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Basic Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel title = "Using Embeded Image" width = "420" height = "200" >
            <s:Image source = "{flexImage}" />			
         </s:Panel>			
         <s:Panel title = "Using Image from URL" width = "420" height = "200" >
            <s:Image id = "dynamicImage" />
         </s:Panel>		
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

完成所有更改後，讓我們以普通模式編譯和執行應用程式，就像我們在“Flex - 建立應用程式”一章中所做的那樣。如果您的應用程式一切正常，它將產生以下結果：[ 線上嘗試 ]

flex_basic_controls.htm

列印頁面

步驟	描述
1	在包 com.tutorialspoint.client 下建立一個名為 HelloWorld 的專案，如“Flex - 建立應用程式”一章中所述。
2	在 HelloWorld 應用程式根資料夾 HelloWorld 中建立一個名為 assets 的資料夾。
3	將示例影像 flex-mini.png 下載到 HelloWorld 資料夾下的 assets 資料夾中。
4	修改 HelloWorld.mxml，如下所述。保持其餘檔案不變。
5	編譯並執行應用程式，以確保業務邏輯按要求工作。