课程表

Flex课程

工具箱
速查手册

Flex 图像控制

当前位置:免费教程 » 软件/图像 » Flex

介绍

Image控件允许您在运行时导入JPEG,PNG和GIF文件。 您还可以通过使用@Embed(source =\'filename\')在编译时嵌入任何这些文件。

嵌入图像会立即加载,因为它们是使用Flex SWF文件编译的。 然而,它们增加了应用程序的大小,并减慢了应用程序初始化过程。 嵌入图像还要求您在图像文件更改时重新编译应用程序。

您可以从运行SWF文件的本地文件系统加载图像,也可以访问远程图像,通常通过网络上的HTTP请求。 这些图像与Flex应用程序无关,因此只要修改的图像的名称保持不变,就可以更改它们,而不会导致重新编译操作。 引用的图像不会对应用程序的初始加载时间产生额外的开销。

类声明

以下是 spark.components.Image 类的声明:

  1. public class Image
  2. extends SkinnableComponent

公共财产

S.N.属性和描述
1

bitmapData:BitmapData

[只读]返回表示当前加载的图像内容(未缩放)的BitmapData对象的副本。

2

bytesLoaded:Number

[只读]已加载的映像的字节数。

3

bytesTotal:Number

[只读]以字节加载或挂起加载的总图像数据。

4

[只读]以字节加载或挂起加载的总图像数据。...

表示在加载新内容之前是否清除先前的图像内容。

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。

公共方法

S.N.方法和描述
1

Image()

构造函数。

事件

S.N.活动描述
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

  • 目的

Flex图像控制示例

让我们按照以下步骤通过创建测试应用程序来检查Flex应用程序中Image控件的使用:

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

以下是修改后的mxml文件 src / com.tutorialspoint / HelloWorld.mxml 的内容。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3. xmlns:s="library://ns.adobe.com/flex/spark"
  4. xmlns:mx="library://ns.adobe.com/flex/mx"
  5. width="100%" height="100%" minWidth="500" minHeight="500"
  6. applicationComplete="init(event)" >
  7. <fx:Style source="/com/tutorialspoint/client/Style.css"/>
  8. <fx:Script>
  9. <![CDATA[
  10. import mx.controls.Alert;
  11. import mx.events.FlexEvent;
  12.  
  13. [Bindable]
  14. [Embed(source="assets/flex-mini.jpg")]
  15. private var flexImage:Class;
  16.  
  17. protected function init(event:FlexEvent):void
  18. {
  19. dynamicImage.source =
  20. "//www.w3cschool.cn/images/flex-mini.png";
  21. }
  22.  
  23. ]]>
  24. </fx:Script>
  25. <s:BorderContainer width="550" height="600" id="mainContainer"
  26. styleName="container">
  27. <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"
  28. verticalAlign="middle">
  29. <s:Label id="lblHeader" text="Basic Controls Demonstration"
  30. fontSize="40" color="0x777777" styleName="heading"/>
  31. <s:Panel title="Using Embeded Image" width="420" height="200" >
  32. <s:Image source="{flexImage}" />
  33. </s:Panel>
  34. <s:Panel title="Using Image from URL" width="420" height="200" >
  35. <s:Image id="dynamicImage" />
  36. </s:Panel>
  37. </s:VGroup>
  38. </s:BorderContainer>
  39. </s:Application>

准备好所有更改后,让我们以正常模式编译和运行应用程序,就像在 Flex - 创建应用程序中一样 章节。 如果一切顺利,您的应用程序,这将产生以下结果:[在线试用]

Flex Image Control
转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号