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 [只讀]返回表示當前加載的圖像內(nèi)容(未縮放)的BitmapData對象的副本。 |
| 2 | bytesLoaded:Number [只讀]已加載的映像的字節(jié)數(shù)。 |
| 3 | bytesTotal:Number [只讀]以字節(jié)加載或掛起加載的總圖像數(shù)據(jù)。 |
| 4 | [只讀]以字節(jié)加載或掛起加載的總圖像數(shù)據(jù)。... 表示在加載新內(nèi)容之前是否清除先前的圖像內(nèi)容。 |
| 5 | contentLoader:IContentLoader 可選的自定義圖像加載器 |
| 6 | contentLoaderGrouping:String 可選的內(nèi)容分組標識符，以傳遞給相關聯(lián)的IContentLoader實例的load()方法。 |
| 7 | fillMode:String 確定位圖填充尺寸的方式。 |
| 8 | horizontalAlign:String 當內(nèi)容沒有一對一寬高比時，內(nèi)容的水平對齊，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 [只讀]表示當前加載的內(nèi)容是否被認為從其安全策略允許跨域映像訪問的源加載的只讀標志。 |
| 17 | verticalAlign:String 當內(nèi)容沒有一對一寬高比時，垂直對齊內(nèi)容，并將scaleMode設置為mx.graphics.BitmapScaleMode.LETTERBOX。 |
公共方法
| S.N. | 方法和描述 |
|---|---|
| 1 | Image() 構(gòu)造函數(shù)。 |
事件
| S.N. | 活動和描述 |
|---|---|
| 1 | complete 內(nèi)容加載完成時分派。 |
| 2 | httpStatus 當網(wǎng)絡請求通過HTTP進行時分派，并且Flash Player可以檢測HTTP狀態(tài)代碼。 |
| 3 | ioError 發(fā)生輸入或輸出錯誤時分派。 |
| 4 | progress 在加載內(nèi)容時分派。 |
| 5 | ready 內(nèi)容加載完成時分派。 |
| 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 的內(nèi)容。
<?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)生以下結(jié)果:[在線試用]
更多建議：