注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

让一切都逝去吧

排骨炖泥菜/猪肝炒苹果/鱼籽狗肉汤/狗头薏米汤

 
 
 

日志

 
 

ProgressBar进度条样式修改  

2010-03-17 14:24:58|  分类: Flex |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

      flex 的 ProgressBar 中代表当前进度的条形轨道的样式想改一改,不用默认的一个方块慢慢增长的样式。利用 flex sdk 里面的类,可以简单地修改成一个比较好看的倾斜条纹的样式。比如ProgressBar 的实例名为 progressBar ,则在其初始化函数中可以写如下两行:
      var c:Class = progressBar.getStyle("indeterminateSkin");
      progressBar.setStyle("barSkin", c);

      或者可以直接在标签里面写:
<mx:ProgressBar id="progressBar"
        barSkin="mx.skins.halo.ProgressIndeterminateSkin"
        mode="manual" />  

      在上面的代码中,progressBar.getStyle("indeterminateSkin");不一定等成功得到ProgressIndeterminateSkin类,可以直接这样写:
      progressBar.setStyle("barSkin", mx.skins.halo.ProgressIndeterminateSkin);

      以上是定义在上层根据当前进度可变化的表层皮肤,底层背景颜色可以使用下面这个样式定义:
      progressBar.setStyle("trackColors", [ 0xffffff, 0xf3efee ]);

      表层皮肤颜色也可以改:
      progressBar.setStyle("barColor", 0x000000);

      而进度条轨道高度设置如下:
      progressBar.setStyle("trackHeight", 8);

      如果还要做进一步的修改,就可以自己写一个 barSkin 的皮肤类。可以直接复制mx.skins.halo.ProgressIndeterminateSkin类的代码,主要修改的方式是updateDisplayList:
override protected function updateDisplayList(w:Number, h:Number):void
 {
  super.updateDisplayList(w, h);

  var barColorStyle:* = 0x009dff;//blue
  var barColor:uint = StyleManager.isValidStyleValue(barColorStyle) ?
       barColorStyle :
       getStyle("themeColor");
  
  //调整亮度
  //var barColor0:Number = ColorUtil.adjustBrightness2(barColor, 60);
  var barColor0:Number = ColorUtil.adjustBrightness2(barColor, 0);
  var hatchInterval:Number = getStyle("indeterminateMoveInterval");
  
  if (isNaN(hatchInterval))
   hatchInterval = 28;

  var g:Graphics = graphics;
  
  g.clear();
  
  // Hatches
  for (var i:int = 0; i < w; i += hatchInterval)
  {
   g.beginFill(barColor0, 0.8);//透明度
   //g.beginFill(barColor0, 1);
   g.moveTo(i, 1);
   g.lineTo(Math.min(i + 14, w), 1);
   g.lineTo(Math.min(i + 10, w), h - 1);
   g.lineTo(Math.max(i - 4, 0), h - 1);
   g.lineTo(i, 1);
   g.endFill();
  }
 }

      ok,将原来的 barSkin 替换掉就行了。

  评论这张
 
阅读(8962)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017