`

Flex学习记录(给Hbox 设置背景图片和圆角)

阅读更多
你需要创建一个圆角和背景图片的Hbox。
加载一个图片对象并且使用beginBitmapFill 方法创建一个位图填充。
如果背景不是一张图片的话,设置Hbox 的cornerRadius 会出现圆角。但是,如果按照下面
这样给HBox 设置一张背景图片:
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="300" backgroundImage="../../assets/beach.jpg"
borderStyle="solid" borderThickness="0" cornerRadius="20">
Hbox的角则会以图片的直角为准。要将图片的角变成圆角,需要将图片转化换成填充图片。
所有的UIComponent都有graphics属性,一个flash.display.Graphic对象的实例,这个属性
具有低水平的制图程序。通过使用beginBitmapFill方法,你可以为drawRoundRect复杂方法
创建一个填充(fill)以使用,用你加载的图片的二进制数据填充到一个圆角矩形内。调用
endFill方法完成绘画程序,如下:
this.graphics.beginBitmapFill(bm, m, true, true);
this.graphics.drawRoundRectComplex(0, 0, this.width, this.height,
20,20, 20, 20);
this.graphics.endFill();
一个加载器加载图片,然后加载的图片的所有数据都存入一个BitmapData 对象。
var bm:BitmapData = new BitmapData(loader.width, loader.height,
true, 0x000000);
bm.draw(this.loader);
现在你可以使用BitmapData 对象来创建填充。完整例子代码如下:
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="300" creationComplete="createFill()"
cornerRadius="20">
<mx:Script>
	<![CDATA[
	import flash.net.URLRequest;
	private var loader:Loader;
	private function createFill():void
	{
		loader = new Loader();
		loader.contentLoaderInfo.addEventListener(
		Event.COMPLETE,completeLoad);
		loader.load(new
		URLRequest("FlexLogo.jpg"));
	}
	private function completeLoad(event:Event):void
	{
		var bm:BitmapData = new BitmapData(loader.width,
		loader.height, true,0x000000);
		bm.draw(this.loader);
		var m:Matrix = new Matrix();
		m.createBox(this.width/loader.width,
		this.height/loader.height);
		this.graphics.beginBitmapFill(bm, m, true, true);
		this.graphics.drawRoundRectComplex(0, 0, this.width,
		this.height, 20, 20, 20, 20);
		this.graphics.endFill();
	}
	]]>
</mx:Script>
</mx:HBox>
分享到:
评论

相关推荐

    Flex学习笔记,入门材料

    通过具体实例,展示了如何使用Flex和相关技术实现简单的笔记管理应用。 #### 9. AIR Adobe Integrated Runtime,用于开发跨平台的桌面应用程序。 #### 10. Flex 的日志及单元测试 用于调试和验证代码的工具和...

    flex学习笔记beginning

    以上内容概括了Flex学习过程中的关键知识点,涵盖了ActionScript的核心概念、Flex中的常用组件以及如何利用各种技术来增强应用的功能和美观度。这些知识点不仅适用于初学者入门,也为开发者提供了深入研究的方向。

    Flex课程学习(附带源码)

    Canvas、ControlBar、Form、FormHeading、Grid、HBox、HDividedBox ModuleLoader、Panel、Spacer、Tile、TileWindow、VBox、VDividedBox 8、学习 flex + MyEclipse的配置和使用 ...

    如何学习flex,从0开始的

    - **组件(Components)**:Flex内置了二十多个UI控件,如Button、DataGrid、HBox等,分为Controls(按钮等)、Containers(容器)和Lists(列表)三大类。初学者应熟悉每个组件的属性、事件、样式和效果,知道如何...

    flex组件使用文档

    - **文档阅读**:充分利用官方文档和其他资源来学习Flex组件的使用方法。Adobe提供了详尽的文档和支持,这对于深入理解Flex框架非常有帮助。 综上所述,Flex框架中的组件是构建高质量RIA应用程序的关键组成部分。...

    flex完全自学手册

    这部分将深入讲解AS3的基础知识,包括变量、数据类型、控制结构、函数、类和对象等,是学习Flex不可或缺的部分。 ### 6. 数据绑定与事件处理 数据绑定是Flex的一个强大特性,允许UI组件自动更新显示的数据,而无需...

    Flex button和buttonBar的操作

    总之,Flex Button和ButtonBar是Flex开发中不可或缺的组件,熟练掌握它们的使用和定制方法对于构建功能丰富的Flex应用至关重要。通过理解源码、运用工具,并结合实例,开发者可以打造出极具吸引力的用户界面。

    Flex从入门到实践_完全学习教程

    该教程通过语音视频的方式,引导学习者逐步完成一系列实战项目,从而加深对Flex各项特性的理解和运用。 #### 核心知识点解析 1. **Flex环境搭建** - 安装Adobe Flex SDK - 配置开发环境(如使用Flash Builder或...

    flex组件介绍

    Flex中的容器组件,如`VBox`、`HBox`和`Group`,用于组织和管理其他组件的布局。这些容器提供了不同的布局策略,例如垂直排列、水平排列或自由布局。通过使用容器,开发者可以轻松地控制界面元素的布局和对齐方式。 ...

    Flex3界面布局中文教程--一路风尘制作

    Vbox和Hbox布局是Canvas容器中常见的布局方式,分别用于垂直和水平方向上的组件排列。这两种布局无需手动设置`x`、`y`坐标,而是根据布局规则自动调整组件位置。 例如,使用Vbox布局时,所有子组件将沿垂直轴排列,...

    flex3_java 教程

    - **BlazeDS**:介绍Adobe BlazeDS,一种用于Flex和Java之间的远程通信技术。 - **开发方式**:探讨Flex与Java后端服务的几种常见集成方式。 - **工具准备**:列出开发过程中需要的工具和环境配置。 #### 18. Flex+...

    Flex试题 .txt

    构建一个博客站点涉及选择合适的技术栈(如Flex和PHP),设计数据库结构,开发后端逻辑以处理文章的增删改查,以及前端界面的开发。在Flex中,可以使用DataGrid和List组件来展示文章列表,使用TextFlow和TextArea来...

    FLEX面试题

    11. **布局容器**:`HBox` 和 `VBox` 是Flex提供的两种布局容器,分别用于水平和垂直布局,而 `Canvas` 容器则不提供自动布局功能。 12. **列表(List)的多项选择**:要使 `List` 组件支持多项选择,可以设置 `...

    跟我StepByStep学FLEX教程------王一松

    - **开发环境搭建**:指导如何设置开发环境以支持Flex和Java之间的通信。 - **工具选择**:推荐适合的工具链。 #### 22. Flex+LCDS(BlazeDS)+Java开发 - **整体架构**:提供一个整体的架构图,帮助理解各个组件...

    Extjs4.0学习笔记

    Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经...ExtJS4学习笔记(十)---ExtJS4图片验证码的实现

    flex3的cookbook书籍完整版dpf(包含目录)

    3.28 节给Hbox 设置背景图片和圆角 3.29 节控制子组件的位置和滚动 第四章文本(121) 4.1节正确的设置一个文本对象的值 4.2节. 将TextInput绑定一个值 4.3节. 创建一个具有文字提示的文本输入框 4.4节. 创建一个合适...

    Flex itemRenderer的详细教程

    `&lt;mx:Image&gt;` 和 `&lt;mx:VBox&gt;` 控件分别显示书籍的封面图片和标题作者信息。 #### 三、使用 MXML 和 ActionScript 定义 ItemRenderer 当需要更复杂的逻辑或交互时,仅依靠 MXML 来定义 ItemRenderer 可能不够。这时...

    Flex 开发实例( ArcGIS)

    ### Flex 开发实例(ArcGIS)相关知识点 #### 1. Flex 简介 Flex是一种开源框架,用于构建高质量的Web应用程序,并将其部署...以上内容涵盖了Flex开发的基本概念和技术细节,希望对学习Flex和ArcGIS集成开发有所帮助。

Global site tag (gtag.js) - Google Analytics