`
flysnail
  • 浏览: 92823 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Flex 容器加背景图片

    博客分类:
  • Flex
阅读更多
以前遇到过容器里包容器,并且都要圆角,如果设固定值,这样会失去容器高度 宽度的一致性,今天有时间翻了一下Flex cook,遇到一个方法挺不错.特记下:
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="createFill()"
layout="absolute">
<mx:HBox width="400" height="300" cornerRadius="20" id="hbox"/>
	<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("../assets/Sunset.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, hbox.height/loader.height);
			hbox.graphics.beginBitmapFill(bm, m, true, true);
			hbox.graphics.drawRoundRectComplex(0, 0, hbox.width, hbox.height, 20, 20, 20, 20);
			hbox.graphics.endFill();
		}
		]]>
	</mx:Script>

</mx:Application>


1
0
分享到:
评论

相关推荐

    FLEX 背景图片设置

    在本文中,我们将深入探讨如何在FLEX应用程序中设置背景图片,这是一项非常实用的技巧,可以帮助你提升应用的视觉效果。FLEX是一种基于ActionScript 3(AS3)的开发框架,用于创建富互联网应用程序(RIA)。背景图片...

    flex容器的布局,图片样式效果设计

    综上所述,通过理解并熟练应用Flex容器的布局、图片样式效果设计以及自定义鼠标指针,开发者能够构建出更加灵活、美观且交互性强的Web应用。在实际项目中,这些技术可以大大提高用户体验和界面设计的质量。

    FLEX 容器内多个图片分别拖动

    - 设置 `_mask` 的属性,如 `source` 属性设置为背景图片路径,如 `"panadaBg.png"`。 - 调整 `_mask` 的尺寸,如 `width` 和 `height` 分别设置为 `200`。 - 将 `_mask` 添加到一个容器(如 `myGroup`)中,以便...

    flex 图片缩放

    此外,由于可能需要应对窗口或容器的resize事件,需要在resize事件中再次调用这段代码,以确保图片始终按照新的尺寸拉伸。 例如,添加监听器: ```actionscript image.addEventListener(Event.CREATION_COMPLETE, ...

    flex剪裁图片demo

    可以设置剪裁框的背景颜色为半透明,以便看到图片。剪裁框的大小应与图片相同,以便可以完全覆盖图片。 ```css .cropper { position: relative; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: ...

    flex css 模版经典

    - `images`:存放网页中使用的图像资源,如背景图片、图标等。 综上所述,Flex CSS模板经典是一个强大的设计工具,通过理解和运用Flexbox布局,开发者能够创建出更加灵活、响应式的网页,适应各种屏幕尺寸和设备。...

    flex加载大图片等待特效

    通过设置`display: flex`,我们可以创建一个Flex容器,并调整其子元素的对齐方式、顺序和大小。在处理大图片时,我们可以利用Flex布局的特性,结合JavaScript和CSS来实现加载等待特效。 首先,我们需要在HTML结构...

    flex弹性布局+图片遮罩层作业

    在本项目中,“flex弹性布局+图片遮罩层作业”主要涵盖了两个重要的前端网页开发技术:Flex布局和图片遮罩层。接下来,我们将详细探讨这两个技术,并结合项目描述,了解如何将它们应用于实际的网页设计中。 首先,...

    Flex 登录界面 开发经验分享

    在该博客中,作者提供了一段ActionScript代码,用于实现在Flex应用中使用循环背景图片的功能。这种方法涉及到在CSS文件中定义图片路径以及在ActionScript中编写逻辑来处理背景图片的循环显示。 **示例ActionScript...

    flex图片放大镜组件,自定义组件

    这个过程可能涉及到CSS的`background-position`属性来调整背景图片的位置,以及JavaScript来实时计算放大镜的坐标和放大倍数。 自定义组件的优势在于其可扩展性和复用性。开发者可以根据项目需求添加特定功能,比如...

    flex图片水纹效果

    例如,使用`blendMode = BlendMode.LAYER`或`BlendMode.MULTIPLY`可以使水纹与背景图片更好地融合。 6. **透明度变化**:通过调整水纹的透明度(`alpha`属性),可以增加或减少其可见度,从而模拟波纹扩散或消散的...

    FLEX图片处理的特效

    在Flex开发中,图片处理和特效的实现是一个重要的部分,可以极大地提升用户界面的美观度和交互体验。这里提到的“FLEX图片处理的特效”主要涉及到Flex框架中的一些组件和效果,包括数据绑定、自定义数据效果、滤镜...

    1-09-田永辰_flex_主轴对齐鸭_

    在 Flexbox 布局中,容器被称为 "flex容器",其子元素被称为 "flex项目"。容器默认沿主轴(flex-direction 属性定义的方向)排列项目,而主轴的对齐方式就是描述中的“主轴对齐”。 1. **创建 Flex 容器**: 要使...

    Flex电子相册旋转一

    - 主容器(如Canvas或Application):作为整个应用的容器,可以设置背景颜色等属性。 - 图片显示组件(Image):加载并显示图片,通过监听事件来响应旋转操作。 - 控制按钮(Button):如“旋转”按钮,添加点击事件...

    flex英文帮助文档(非常详细)

    本文档是一份针对 Adobe Flex 4.5 的详细使用指南,旨在为具备一定英语基础和技术背景的开发者提供全面的技术支持。主要内容覆盖了从 Flex 4.5 的基本介绍、应用开发流程到用户界面构建、数据驱动组件使用等多个方面...

    用flex实现苹果样式的弹出菜单

    首先,让我们了解Flex中的Flex布局模型,即Flexbox或Flex容器。Flexbox是用于创建多列或多行布局的现代CSS布局模型。它允许我们轻松地调整元素的大小和位置,以适应不同屏幕尺寸和方向。在苹果的菜单设计中,这种...

    Flex各种超酷实例代码大全

    ### Flex4中创建头部背景为图片的Accordion Accordion控件是一种常见的用户界面组件,它可以通过折叠和展开各个面板来节省空间。在Flex4中,我们可以轻松地自定义Accordion的头部样式,例如设置一个图片作为背景。 ...

    用javascript实现背景自动拉伸

    这里的`&lt;img&gt;`标签用于显示背景图片,并且设置了`width:100%`和`height:100%`,确保图片能够充满整个`&lt;div&gt;`容器。 ##### 2.2 JavaScript逻辑 接下来是核心的JavaScript部分,主要分为以下几个关键步骤: 1. **...

    flex各组件对应的样式属性

    例如,使用`Embed(source="")`可以指定背景图片的路径。 2. **Background Color**:设置背景颜色,可以通过单个颜色值来实现。 3. **Background Gradient Colors**:当需要更复杂的渐变背景效果时,可以使用此属性...

    漂亮的大背景图片CSS&jQuery导航栏

    本文将深入探讨如何使用CSS和jQuery创建一个具有漂亮大背景图片的动态导航栏,同时实现滚动翻页效果和幻灯片功能。 首先,我们要了解CSS(Cascading Style Sheets)在构建导航栏中的作用。CSS是一种样式表语言,...

Global site tag (gtag.js) - Google Analytics