package {
 
 import flash.display.*;
 import flash.geom.*;
 import flash.utils.*;
 
 import mx.core.EdgeMetrics;
 import mx.skins.halo.HaloBorder;
 import mx.utils.ColorUtil;
 import mx.utils.GraphicsUtil;
 
 public class GradientBorder 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
  {
   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();
   
  }
 }
}

  • <?xml version="1.0" encoding="utf-8"?>
  • <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  • layout="vertical" backgroundImage="" backgroundColor="white">
  • <mx:Style>
  • .gradient
  • {
  • border-style: solid;
  • border-thickness: 0;
  • border-skin: ClassReference("GradientBorder");
  • fill-colors: #0099FF, #000099;
  • corner-radius: 10;
  • drop-shadow-enabled: true;
  • }
  • </mx:Style>
  • <mx:Script>
  • <![CDATA[
  • private function changeStyle():void
  • {
  • box.setStyle("fillColors", [col1.value, col2.value]);
  • box.setStyle("cornerRadius", corner.value);
  • }
  • ]]>
  • </mx:Script>
  • <mx:VBox id="box" styleName="gradient" width="400" height="300" verticalAlign="middle" horizontalAlign="center">
  • <mx:FormItem label="Color 1:">
  • <mx:ColorPicker id="col1" change="changeStyle()" selectedColor="0x0099FF"/>
  • </mx:FormItem>
  • <mx:FormItem label="Color 2:">
  • <mx:ColorPicker id="col2" change="changeStyle()" selectedColor="0x000099"/>
  • </mx:FormItem>
  • <mx:FormItem label="Corner radius:">
  • <mx:HSlider id="corner" value="10" minimum="0" maximum="100" change="changeStyle()"/>
  • </mx:FormItem>
  • </mx:VBox>
  • </mx:Application>

Flex 拾色器改变背景的更多相关文章

  1. 使用css3和javascript开发web拾色器实例

    本实例中的web拾色器功能使用css3实现页面效果,即在页面上显示的元素用css3样式来实现的.再使用js生成拾色器颜色数据,并控制各元素的鼠标事件.当事件作为反应时,获取到对应的数据并显示颜色值. ...

  2. 原生js编写的安全色拾色器

    <html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...

  3. PS拾色器(前景色背景色)快捷键

    快捷键 I 是拾色器 X 是前后色切换

  4. Android Studio中如何设置颜色拾色器工具

    Android Studio如何设置颜色拾色器工具Color Picker? 你可能下载过一些获取颜色值的一些小工具, 这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取 ...

  5. Linux下的高级拾色器—Pick

    导读 虽然大多数设计师都在使用 Mac,但也有一少部分在使用 Windows 甚至是 Linux 系统.在 Mac 和 Windows 中都有非常丰富的拾色器工具或插件可用,反而在开源界中这类颜色选择 ...

  6. 优动漫PAINT基础系列之拾色器教学

    在优动漫PAINT中有类似Photoshop的拾色器功能么?在优动漫PAINT中,可以直接输入颜色数值选择颜色么?当然是可以的啦!怎么呼出拾色器界面~ 看这边... 前段时间小编有收到一些小伙伴的疑问 ...

  7. 使用 HTML5 canvas制作拾色器

    自制的拾色器漂亮吧,哈哈 废话不多说直接上代码,希望可以帮到需要的朋友 <html><head>    <style>        .canvas_color{p ...

  8. HTML-参考手册: HTML 拾色器

    ylbtech-HTML-参考手册: HTML 拾色器 1.返回顶部 1. HTML 拾色器 选取颜色:     或输入颜色值: OK 或使用 HTML5: 选择的颜色: 黑色文本 阴影 白色文本 阴 ...

  9. 拾色器,可以取出电脑屏幕的任何颜色,ui以及程序员前端等常用软件,文件很小,300K

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985,转载请说明出处. 今天给大家介绍一个小软件,挺实用的,叫做拾色器. 用途:取出电脑屏幕的任意颜色,当你 ...

随机推荐

  1. CentOS安装tomcat

    一.下载Tomcat 1..进入Tomcat官网:http://tomcat.apache.org/ 左侧选择相应的版本 点击Tomcat 6.0后 点击tar.gz下载apache-tomcat-6 ...

  2. 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境:4.安装Oracle RAC FAQ-4.5.安装Grid,创建ASM磁盘组空间不足

    因之前分区时,分区的Last cylinder的值选了“1”,导致创建磁盘组空间不足.解决办法是先删除分区,重新创建分区并删除ASM磁盘,然后重建ASM磁盘 1. 先删除分区,重新创建分区: 1)查询 ...

  3. linux设置默认路由细节问题

    在这里,我想给大家讲解下,linux系统默认路由的设置的一些细节问题.这样在设置多块网卡的时候如何设置路由可以为初学者少走一些弯路.   默认情况下配置多块网卡,每个网卡都要配置ip,每个ip又是在不 ...

  4. Spring3.0.6定时任务

    项目使用的Spring版本比较旧是3.0.6版本,由于需要进行定时任务,就决定使用Spring自带的scheduled task. 在网上找了很多文章,也查看了Spring3.0.6的官方文档,按照网 ...

  5. Yii与表单交互的三种模式2

    在yii的标签中加入css或js方法:echo $form->textField($model,'starttime',array(        'onclick'=>'alert(&q ...

  6. PHP开发常见问题解决列表

    1. 学习Zend Framework tutorial过程中的问题 (1)执行"zf create project zf-tutorial"出现如下错误: '"php. ...

  7. U盘安装CentOS无法进入Centos系统解决办法

    转自:http://blog.sina.com.cn/s/blog_3feedf320101idlu.html     目前使用U盘安装系统逐渐因为它的便捷而受到人们的欢迎,但是使用U盘来安装Cent ...

  8. jQuery 关于ScrollableGridPlugin.js(固定表头)插件的逐步解析

    以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定 ...

  9. cefSharp在XP下使得程序崩溃记录

    前言:这是一个奇葩的问题,到现在自己还没有搞明白问题出现在哪里,但是从问题总算是解决了,希望看到此文章的大牛,如果知道问题出在什么地方,可以告知一下. [一个在XP系统下面应用程序崩溃问题] 资源: ...

  10. IntelliJ IDEA 13 Keygen

    import java.math.BigInteger; import java.util.Date; import java.util.Random; import java.util.zip.CR ...