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.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 - 创建应用程序”一章中所做的那样。如果您的应用程序一切正常，它将产生以下结果：[ 在线尝试 ]

flex_basic_controls.htm

打印页面

步骤	描述
1	在包 com.tutorialspoint.client 下创建一个名为 HelloWorld 的项目，如“Flex - 创建应用程序”一章中所述。
2	在 HelloWorld 应用程序根文件夹 HelloWorld 中创建一个名为 assets 的文件夹。
3	将示例图像 flex-mini.png 下载到 HelloWorld 文件夹下的 assets 文件夹中。
4	修改 HelloWorld.mxml，如下所述。保持其余文件不变。
5	编译并运行应用程序，以确保业务逻辑按要求工作。