flex的边框渐变

发布时间：2020-12-15 05:01:43 所属栏目：百科来源：网络整理

导读：flex除了application支持背景渐变色外，其它控制都不支持，近日需要这个功能，在网上搜到些资料整理如下： ? 类文件 GradientBorder.as Flex代码?? /**?? ?*?背景渐变色?? ?*?whisht?? ?*?*/?? package?{?? ?????? ????import?flash.display.*;?? ????import

flex除了application支持背景渐变色外，其它控制都不支持，近日需要这个功能，在网上搜到些资料整理如下：

类文件

GradientBorder.as

    Flex代码?? 
   
 /**??
 ?*?背景渐变色??
 ?*?whisht??
 ?*?*/??
 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,?w,?h);??
 ????????????g.beginGradientFill("linear",?fillColors,?[1,0)">1],0)">255],?m);??
 ????????????var?tr:Number?=?Math.max(topCornerRadius-2,0)">0);??
 ????????????var?br:Number?=?Math.max(bottomCornerRadius- ????????????GraphicsUtil.drawRoundRectComplex(g,?b.left,?b.top,?h,?tr,?br,?br);??
 ????????????g.endFill();??
 ??????????????????
 ????}??
 }??

调用示例

    Mxml代码?? 
    <?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?label="Corner?radius:">??
 ????????????<mx:HSlider?id="corner"?value="10"?minimum="0"?maximum="100"?change="changeStyle()"/>??
 ????</mx:VBox>??
 </mx:Application> ?



（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!