网上有代码可以实现背景渐变,但是在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();
}
}
}
分享到:
相关推荐
6. **皮肤和样式**:使用Flex的皮肤ning系统,自定义颜色渐变条的外观,包括节点的形状、大小、颜色和间隔等。 7. **状态管理**:为了支持不同状态下的颜色渐变条(如禁用状态或选中状态),可以定义多个皮肤状态,...
在Flex 4中,皮肤(Skin)是一种强大的机制,用于改变和定制UI组件的外观和交互体验。本文将深入探讨FLEX4中的皮肤系统,特别是SparkSkin类,并通过实例展示如何创建和应用自定义皮肤。 1. SparkSkin的介绍: ...
在Flex4中,自定义组件皮肤是提升应用视觉效果和用户体验的重要手段。下面将详细介绍如何在Flex4中自定义组件皮肤。 1. **组件皮肤的基本概念** - 组件皮肤是Flex中改变组件外观的一种方式,通过定义不同的皮肤,...
进度条皮肤通常包含两个主要部分:轨道(track)和滑块(slider),分别表示进度条的背景和填充部分。 - 使用`<s:Rect>`、`<s:Path>`或其他图形元素来定义轨道和滑块的形状和样式。 - 应用颜色、渐变、图像等视觉...
例如,一个按钮的皮肤可能包括背景、边框、文本和鼠标悬停状态等层。 4. **Skin Class** 每个Flex组件都有一个与之关联的皮肤类,这个类定义了组件的外观。开发者可以通过继承已有的皮肤类并重写其属性来创建新的...
通过理解Flex项目的结构和皮肤系统的工作原理,我们可以更好地定制和优化应用程序的外观,提升用户体验。无论是使用预设的“经典”主题,还是创建全新的主题,Flex都提供了足够的工具和支持来满足开发者的需求。
本资源重点在于按钮在不同状态下的背景切换,这对于创建具有视觉吸引力和良好用户体验的Flex应用至关重要。下面我们将深入探讨Flex4按钮的状态管理以及如何实现背景的动态变化。 1. Flex4 概述: Flex4是Adobe Flex...
Flex是Adobe公司开发的一种用于构建富互联网应用程序(RIA)的框架,它基于ActionScript和MXML,能够创建具有丰富交互性和动态视觉效果的应用程序。在本主题中,我们重点关注的是Flex中的“皮肤”这一概念,这关系到...
总的来说,这个“flex 皮肤切换”的示例教会我们如何在Flex应用中实现皮肤的动态切换,从而增强用户体验。通过自定义皮肤,开发者可以根据品牌需求或用户偏好轻松调整应用程序的外观。这不仅是提升应用美观度的有效...
在本文中,我们将深入探讨关于Flex按钮皮肤的知识,特别是标题提到的"flex 6款按钮皮肤"。Flex是一种流行的开源框架,主要用于构建可伸缩的、跨平台的用户界面,尤其在RIA(富互联网应用程序)领域广泛应用。按钮是...
flex皮肤 大集合 很齐全 对flex开发人员很有帮助
Flex3支持多种类型的皮肤,包括组件皮肤、主题皮肤和自定义皮肤。 1. **组件皮肤**:Flex3中的每个UI组件,如Button、Slider、TabNavigator等,都有预定义的皮肤。这些皮肤由MXML或ActionScript3代码定义,包含组件...
通过这个“FLEX+Flash动态更换皮肤演示”,开发者不仅可以学习到如何在Flex应用中实现动态皮肤更换,还能深入了解Flex和Flash之间的协同工作,以及如何通过ActionScript和MXML结合来增强用户体验。这种技术在创建...
标题和描述中的"Flex 皮肤大全"指的是收集了多种样式的Flex控件皮肤资源,包括模仿Windows Vista和Windows 7操作系统的风格,以及其它30多种独特设计。 1. **Flex控件样式**:Flex控件是构建用户界面的基本元素,如...
综上所述,Flex的AdvancedDataGrid表头皮肤设计涉及到了组件皮肤、样式、主题、交互行为等多个方面,开发者需要对Spark皮肤机制有深入理解,并熟悉Flex的图形和数据可视化技术。通过精心设计和实现,可以创建出既...
在本文中,我们将深入探讨如何在...总结,设置FLEX背景图片涉及MXML组件或ActionScript代码的使用,通过嵌入图片资源并调整其尺寸和对齐方式来实现。理解这些技巧将帮助你更好地定制FLEX应用的视觉呈现,提升用户体验。
5. **自定义动画皮肤(Custom Animated Skin)**:这类皮肤可能包含动态效果,如按钮点击时的过渡动画,可以增加用户交互的趣味性和反馈感。 每款皮肤的源码都包含了相应的CSS(Cascading Style Sheets)或MXML(MXML...
Flex帮助开发者创建具有交互性和动态视觉效果的Web应用程序。在Flex中,皮肤是一种重要的概念,它允许开发者自定义用户界面组件的外观和感觉,从而提供更丰富的用户体验。 在Flex中,皮肤可以看作是UIComponent的...
Flex是Adobe公司开发的一种富互联网应用程序(RIA)框架,它基于ActionScript编程语言和MXML标记语言,主要用于创建交互式的、动态的用户界面。在本压缩包中,我们看到的"很炫经典的flex 皮肤主题",这通常指的是...
在Flex4中,皮肤(Skin)是一个重要的概念,它允许开发者自定义组件的外观和交互体验,以满足不同应用的视觉设计需求。 Flex4 的皮肤系统是一个基于MXML和CSS的可扩展框架,允许开发者分离界面的视觉表现与功能逻辑...