你需要创建一个圆角和背景图片的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和相关技术实现简单的笔记管理应用。 #### 9. AIR Adobe Integrated Runtime,用于开发跨平台的桌面应用程序。 #### 10. Flex 的日志及单元测试 用于调试和验证代码的工具和...
以上内容概括了Flex学习过程中的关键知识点,涵盖了ActionScript的核心概念、Flex中的常用组件以及如何利用各种技术来增强应用的功能和美观度。这些知识点不仅适用于初学者入门,也为开发者提供了深入研究的方向。
Canvas、ControlBar、Form、FormHeading、Grid、HBox、HDividedBox ModuleLoader、Panel、Spacer、Tile、TileWindow、VBox、VDividedBox 8、学习 flex + MyEclipse的配置和使用 ...
- **组件(Components)**:Flex内置了二十多个UI控件,如Button、DataGrid、HBox等,分为Controls(按钮等)、Containers(容器)和Lists(列表)三大类。初学者应熟悉每个组件的属性、事件、样式和效果,知道如何...
- **文档阅读**:充分利用官方文档和其他资源来学习Flex组件的使用方法。Adobe提供了详尽的文档和支持,这对于深入理解Flex框架非常有帮助。 综上所述,Flex框架中的组件是构建高质量RIA应用程序的关键组成部分。...
这部分将深入讲解AS3的基础知识,包括变量、数据类型、控制结构、函数、类和对象等,是学习Flex不可或缺的部分。 ### 6. 数据绑定与事件处理 数据绑定是Flex的一个强大特性,允许UI组件自动更新显示的数据,而无需...
总之,Flex Button和ButtonBar是Flex开发中不可或缺的组件,熟练掌握它们的使用和定制方法对于构建功能丰富的Flex应用至关重要。通过理解源码、运用工具,并结合实例,开发者可以打造出极具吸引力的用户界面。
该教程通过语音视频的方式,引导学习者逐步完成一系列实战项目,从而加深对Flex各项特性的理解和运用。 #### 核心知识点解析 1. **Flex环境搭建** - 安装Adobe Flex SDK - 配置开发环境(如使用Flash Builder或...
Flex中的容器组件,如`VBox`、`HBox`和`Group`,用于组织和管理其他组件的布局。这些容器提供了不同的布局策略,例如垂直排列、水平排列或自由布局。通过使用容器,开发者可以轻松地控制界面元素的布局和对齐方式。 ...
Vbox和Hbox布局是Canvas容器中常见的布局方式,分别用于垂直和水平方向上的组件排列。这两种布局无需手动设置`x`、`y`坐标,而是根据布局规则自动调整组件位置。 例如,使用Vbox布局时,所有子组件将沿垂直轴排列,...
- **BlazeDS**:介绍Adobe BlazeDS,一种用于Flex和Java之间的远程通信技术。 - **开发方式**:探讨Flex与Java后端服务的几种常见集成方式。 - **工具准备**:列出开发过程中需要的工具和环境配置。 #### 18. Flex+...
构建一个博客站点涉及选择合适的技术栈(如Flex和PHP),设计数据库结构,开发后端逻辑以处理文章的增删改查,以及前端界面的开发。在Flex中,可以使用DataGrid和List组件来展示文章列表,使用TextFlow和TextArea来...
11. **布局容器**:`HBox` 和 `VBox` 是Flex提供的两种布局容器,分别用于水平和垂直布局,而 `Canvas` 容器则不提供自动布局功能。 12. **列表(List)的多项选择**:要使 `List` 组件支持多项选择,可以设置 `...
- **开发环境搭建**:指导如何设置开发环境以支持Flex和Java之间的通信。 - **工具选择**:推荐适合的工具链。 #### 22. Flex+LCDS(BlazeDS)+Java开发 - **整体架构**:提供一个整体的架构图,帮助理解各个组件...
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经...ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
3.28 节给Hbox 设置背景图片和圆角 3.29 节控制子组件的位置和滚动 第四章文本(121) 4.1节正确的设置一个文本对象的值 4.2节. 将TextInput绑定一个值 4.3节. 创建一个具有文字提示的文本输入框 4.4节. 创建一个合适...
`<mx:Image>` 和 `<mx:VBox>` 控件分别显示书籍的封面图片和标题作者信息。 #### 三、使用 MXML 和 ActionScript 定义 ItemRenderer 当需要更复杂的逻辑或交互时,仅依靠 MXML 来定义 ItemRenderer 可能不够。这时...
### Flex 开发实例(ArcGIS)相关知识点 #### 1. Flex 简介 Flex是一种开源框架,用于构建高质量的Web应用程序,并将其部署...以上内容涵盖了Flex开发的基本概念和技术细节,希望对学习Flex和ArcGIS集成开发有所帮助。