Flex 圖像控制Image Control
介紹
Image控件允許您在運行時導入JPEG，PNG和GIF文件。 您還可以通過使用@Embed(source =\'filename\')在編譯時嵌入任何這些文件。
嵌入圖像會立即加載，因為它們是使用Flex SWF文件編譯的。 然而，它們增加了應用程序的大小，并減慢了應用程序初始化過程。 嵌入圖像還要求您在圖像文件更改時重新編譯應用程序。
您可以從運行SWF文件的本地文件系統(tǒng)加載圖像，也可以訪問遠程圖像，通常通過網(wǎng)絡上的HTTP請求。 這些圖像與Flex應用程序無關，因此只要修改的圖像的名稱保持不變，就可以更改它們，而不會導致重新編譯操作。 引用的圖像不會對應用程序的初始加載時間產(chǎn)生額外的開銷。
類聲明
以下是 spark.components.Image 類的聲明:
public class Image extends SkinnableComponent
公共財產(chǎn)
| S.N. | 屬性和描述 |
|---|---|
| 1 | bitmapData:BitmapData [只讀]返回表示當前加載的圖像內容(未縮放)的BitmapData對象的副本。 |
| 2 | bytesLoaded:Number [只讀]已加載的映像的字節(jié)數(shù)。 |
| 3 | bytesTotal:Number [只讀]以字節(jié)加載或掛起加載的總圖像數(shù)據(jù)。 |
| 4 | [只讀]以字節(jié)加載或掛起加載的總圖像數(shù)據(jù)。... 表示在加載新內容之前是否清除先前的圖像內容。 |
| 5 | contentLoader:IContentLoader 可選的自定義圖像加載器 |
| 6 | contentLoaderGrouping:String 可選的內容分組標識符，以傳遞給相關聯(lián)的IContentLoader實例的load()方法。 |
| 7 | fillMode:String 確定位圖填充尺寸的方式。 |
| 8 | horizontalAlign:String 當內容沒有一對一寬高比時，內容的水平對齊，scaleMode設置為mx.graphics.BitmapScaleMode.LETTERBOX。 |
| 9 | preliminaryHeight:Number 當布局請求圖像的“測量"邊界，但圖像數(shù)據(jù)尚未完成加載時，提供用于高度的估計。 |
| 10 | preliminaryWidth:Number 當布局請求圖像的“測量"邊界，但圖像數(shù)據(jù)尚未完成加載時，提供用于寬度的估計。 |
| 11 | scaleMode:String 確定當fillMode設置為mx.graphics.BitmapFillMode.SCALE時圖像的縮放比例。 |
| 12 | smooth:Boolean 指定是否對位圖圖像應用平滑算法。 |
| 13 | source:Object 用于位圖填充的源。 |
| 14 | sourceHeight:Number [只讀]提供原始圖像數(shù)據(jù)的未縮放高度。 |
| 15 | sourceWidth:Number [只讀]提供原始圖像數(shù)據(jù)的未縮放寬度。 |
| 16 | trustedSource:Boolean [只讀]表示當前加載的內容是否被認為從其安全策略允許跨域映像訪問的源加載的只讀標志。 |
| 17 | verticalAlign:String 當內容沒有一對一寬高比時，垂直對齊內容，并將scaleMode設置為mx.graphics.BitmapScaleMode.LETTERBOX。 |
公共方法
| S.N. | 方法和描述 |
|---|---|
| 1 | Image() 構造函數(shù)。 |
事件
| S.N. | 活動和描述 |
|---|---|
| 1 | complete 內容加載完成時分派。 |
| 2 | httpStatus 當網(wǎng)絡請求通過HTTP進行時分派，并且Flash Player可以檢測HTTP狀態(tài)代碼。 |
| 3 | ioError 發(fā)生輸入或輸出錯誤時分派。 |
| 4 | progress 在加載內容時分派。 |
| 5 | ready 內容加載完成時分派。 |
| 6 | securityError 發(fā)生安全錯誤時分派。 |
繼承的方法
此類繼承以下類中的方法:
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
目的
Flex圖像控制示例
讓我們按照以下步驟通過創(chuàng)建測試應用程序來檢查Flex應用程序中Image控件的使用:
| 步 | 描述 |
|---|---|
| 1 | 在 Flex - 創(chuàng)建應用程序章節(jié)中所述，在包 com.tutorialspoint.client 下創(chuàng)建名為 HelloWorld 的項目。 |
| 2 | 在HelloWorld應用程序根文件夾 HelloWorld 中創(chuàng)建foler 資產(chǎn)。 |
| 3 | 將示例圖片 flex-mini.png 下載到HelloWorld文件夾下的 assets 文件夾中。 |
| 4 | 修改 HelloWorld.mxml ，如下所述。 保持文件的其余部分不變。 |
| 5 | 編譯并運行應用程序，以確保業(yè)務邏輯按照要求工作。 |
以下是修改后的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 =
"//www.o2fo.com/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 - 創(chuàng)建應用程序中一樣 章節(jié)。 如果一切順利，您的應用程序，這將產(chǎn)生以下結果:[在線試用]
更多建議：