`
liuyf
  • 浏览: 34378 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

关于Flex背景渐变和皮肤动态切换的补丁

阅读更多
网上有代码可以实现背景渐变,但是在style动态切换的时候无效。
我hack了setupStyles()处的代码,可以使用了。

注意设置fillColors是十进制的颜色值。
比如:css = ".selector{fillColors: 12377400,9614128;}";

package application.view.components
{
	
	import flash.display.*;
	import flash.geom.*;
	import flash.utils.*;
	
	import mx.containers.Canvas;
	import mx.core.EdgeMetrics;
	import mx.skins.halo.HaloBorder;
	import mx.utils.ColorUtil;
	import mx.utils.GraphicsUtil;
	
	public class SimpleGradientBorder extends HaloBorder 
	{
		
		private var topCornerRadius:Number;		// top corner radius
		private var bottomCornerRadius:Number;	// bottom corner radius
		private var fillColors:Array;			// fill colors (two)
		private var setup:Boolean;
		
		// ------------------------------------------------------------------------------------- //
		
		private function setupStyles():void
		{
			if ((this.parent as Canvas) != null)
			{
				var str:String = (this.parent as Canvas).getStyle("fillColors");
				fillColors = str.split(",");
			}
			else
			{
				fillColors = getStyle("fillColors") as Array;
			}
			if (!fillColors) fillColors = [0xFFFFFF, 0xFFFFFF];
			
			topCornerRadius = getStyle("cornerRadius") as Number;
			if (!topCornerRadius) topCornerRadius = 0;	
			
			bottomCornerRadius = getStyle("bottomCornerRadius") as Number;
			if (!bottomCornerRadius) bottomCornerRadius = topCornerRadius;	
		
		}
		
		// ------------------------------------------------------------------------------------- //
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);	
			
			setupStyles();
			
			var g:Graphics = graphics;
			var b:EdgeMetrics = borderMetrics;
			var w:Number = unscaledWidth - b.left - b.right;
			var h:Number = unscaledHeight - b.top - b.bottom;
			var m:Matrix = verticalGradientMatrix(0, 0, w, h);
		
			g.beginGradientFill("linear", fillColors, [1, 1], [0, 255], m);
			
			var tr:Number = Math.max(topCornerRadius-2, 0);
			var br:Number = Math.max(bottomCornerRadius-2, 0);
			
			GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h, tr, tr, br, br);
			g.endFill();
				
		}
		
	}
}
分享到:
评论
1 楼 地主婆 2011-02-13  
能给个全代码么?看不明白呀

相关推荐

    Flex 颜色渐变条

    6. **皮肤和样式**:使用Flex的皮肤ning系统,自定义颜色渐变条的外观,包括节点的形状、大小、颜色和间隔等。 7. **状态管理**:为了支持不同状态下的颜色渐变条(如禁用状态或选中状态),可以定义多个皮肤状态,...

    FLEX4的皮肤skin

    在Flex 4中,皮肤(Skin)是一种强大的机制,用于改变和定制UI组件的外观和交互体验。本文将深入探讨FLEX4中的皮肤系统,特别是SparkSkin类,并通过实例展示如何创建和应用自定义皮肤。 1. SparkSkin的介绍: ...

    flex4自定义组件皮肤

    在Flex4中,自定义组件皮肤是提升应用视觉效果和用户体验的重要手段。下面将详细介绍如何在Flex4中自定义组件皮肤。 1. **组件皮肤的基本概念** - 组件皮肤是Flex中改变组件外观的一种方式,通过定义不同的皮肤,...

    Flex 4 进度条的皮肤

    进度条皮肤通常包含两个主要部分:轨道(track)和滑块(slider),分别表示进度条的背景和填充部分。 - 使用`<s:Rect>`、`<s:Path>`或其他图形元素来定义轨道和滑块的形状和样式。 - 应用颜色、渐变、图像等视觉...

    flex皮肤flex皮肤

    例如,一个按钮的皮肤可能包括背景、边框、文本和鼠标悬停状态等层。 4. **Skin Class** 每个Flex组件都有一个与之关联的皮肤类,这个类定义了组件的外观。开发者可以通过继承已有的皮肤类并重写其属性来创建新的...

    flex 经典 皮肤主题

    通过理解Flex项目的结构和皮肤系统的工作原理,我们可以更好地定制和优化应用程序的外观,提升用户体验。无论是使用预设的“经典”主题,还是创建全新的主题,Flex都提供了足够的工具和支持来满足开发者的需求。

    FLEX4按钮状态切换背景

    本资源重点在于按钮在不同状态下的背景切换,这对于创建具有视觉吸引力和良好用户体验的Flex应用至关重要。下面我们将深入探讨Flex4按钮的状态管理以及如何实现背景的动态变化。 1. Flex4 概述: Flex4是Adobe Flex...

    三个Flex的皮肤

    Flex是Adobe公司开发的一种用于构建富互联网应用程序(RIA)的框架,它基于ActionScript和MXML,能够创建具有丰富交互性和动态视觉效果的应用程序。在本主题中,我们重点关注的是Flex中的“皮肤”这一概念,这关系到...

    flex 皮肤切换

    总的来说,这个“flex 皮肤切换”的示例教会我们如何在Flex应用中实现皮肤的动态切换,从而增强用户体验。通过自定义皮肤,开发者可以根据品牌需求或用户偏好轻松调整应用程序的外观。这不仅是提升应用美观度的有效...

    flex 6款按钮皮肤

    在本文中,我们将深入探讨关于Flex按钮皮肤的知识,特别是标题提到的"flex 6款按钮皮肤"。Flex是一种流行的开源框架,主要用于构建可伸缩的、跨平台的用户界面,尤其在RIA(富互联网应用程序)领域广泛应用。按钮是...

    flex 皮肤 大集合

    flex皮肤 大集合 很齐全 对flex开发人员很有帮助

    FLEX3程序的皮肤集合

    Flex3支持多种类型的皮肤,包括组件皮肤、主题皮肤和自定义皮肤。 1. **组件皮肤**:Flex3中的每个UI组件,如Button、Slider、TabNavigator等,都有预定义的皮肤。这些皮肤由MXML或ActionScript3代码定义,包含组件...

    FLEX+Flash动态更换皮肤演示

    通过这个“FLEX+Flash动态更换皮肤演示”,开发者不仅可以学习到如何在Flex应用中实现动态皮肤更换,还能深入了解Flex和Flash之间的协同工作,以及如何通过ActionScript和MXML结合来增强用户体验。这种技术在创建...

    Flex 皮肤大全,各种样式的Flex控件皮肤大全

    标题和描述中的"Flex 皮肤大全"指的是收集了多种样式的Flex控件皮肤资源,包括模仿Windows Vista和Windows 7操作系统的风格,以及其它30多种独特设计。 1. **Flex控件样式**:Flex控件是构建用户界面的基本元素,如...

    Flex应用AdvancedDataGrid表头皮肤

    综上所述,Flex的AdvancedDataGrid表头皮肤设计涉及到了组件皮肤、样式、主题、交互行为等多个方面,开发者需要对Spark皮肤机制有深入理解,并熟悉Flex的图形和数据可视化技术。通过精心设计和实现,可以创建出既...

    FLEX 背景图片设置

    在本文中,我们将深入探讨如何在...总结,设置FLEX背景图片涉及MXML组件或ActionScript代码的使用,通过嵌入图片资源并调整其尺寸和对齐方式来实现。理解这些技巧将帮助你更好地定制FLEX应用的视觉呈现,提升用户体验。

    Flex五款漂亮皮肤

    5. **自定义动画皮肤(Custom Animated Skin)**:这类皮肤可能包含动态效果,如按钮点击时的过渡动画,可以增加用户交互的趣味性和反馈感。 每款皮肤的源码都包含了相应的CSS(Cascading Style Sheets)或MXML(MXML...

    Flex help之Flex 皮肤

    Flex帮助开发者创建具有交互性和动态视觉效果的Web应用程序。在Flex中,皮肤是一种重要的概念,它允许开发者自定义用户界面组件的外观和感觉,从而提供更丰富的用户体验。 在Flex中,皮肤可以看作是UIComponent的...

    很炫经典的flex 皮肤主题

    Flex是Adobe公司开发的一种富互联网应用程序(RIA)框架,它基于ActionScript编程语言和MXML标记语言,主要用于创建交互式的、动态的用户界面。在本压缩包中,我们看到的"很炫经典的flex 皮肤主题",这通常指的是...

    flex4 皮肤

    在Flex4中,皮肤(Skin)是一个重要的概念,它允许开发者自定义组件的外观和交互体验,以满足不同应用的视觉设计需求。 Flex4 的皮肤系统是一个基于MXML和CSS的可扩展框架,允许开发者分离界面的视觉表现与功能逻辑...

Global site tag (gtag.js) - Google Analytics