如何利用遮罩实现动态划过

来源:互联网 发布:泉州聚客网络 编辑:程序博客网 时间:2024/05/16 00:57
 
<?xml version="1.0" encoding="utf-8"?><s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"xmlns:mx="library://ns.adobe.com/flex/mx"xmlns:view="com.hnisi.itsm.view.*" height="100" autoDrawBackground="false" buttonMode="false"fontFamily="微软雅黑"creationComplete="itemrenderer1_creationCompleteHandler(event)"><fx:Script><![CDATA[import com.hnisi.screen.business.model.vo.BusinessKardVO;import mx.events.FlexEvent;[Bindable]private var busiCi:BusinessKardVOprotected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void{/* var timer:Timer = new Timer(2000,0);timer.addEventListener(TimerEvent.TIMER, function onTimer(event:TimerEvent):void{maskMove.play();}); timer.start(); */maskMove.play();}protected function onCreationComplete(event:FlexEvent):void{}override public function set data(value:Object):void{super.data = value;if(value is BusinessKardVO){this.busiCi = value as BusinessKardVO; }//gradientEntry1.color = data.systemHealth > 60 ? 0x60F300 : (data.systemHealth < 30 ? 0xed0000 :0xffa200);//gradientEntry2.color = data.systemHealth > 60 ? 0x008605 : (data.systemHealth < 30 ? 0x830000 :0x9f3100);}]]></fx:Script><fx:Declarations><mx:Move id="maskMove" duration="1000" target="{maskGroup}" xFrom="-10" xTo="55" repeatCount="0"/><fx:String id="pathString">M 5 8 L 7 6L 10 5 L 13 9 L 15 7 L 17 10 L 20 20 L 23 10 L 25 6 L 30 5 L 33 15 L 35 15 L 37 8 L 40 18 L 43 8 L 45 25  L 47 13 L 50 15 L 53 19 L 55 10</fx:String><!--<s:Path id="randomPath" data=""/>--></fx:Declarations><s:states><s:State name="normal"/><s:State name="selected"/><s:State name="disabled"/></s:states><!--<s:Label text="{data}"/>--><s:Group left="0" right="0" top="0" bottom="0"><s:Rect left="0" right="0" top="0" bottom="0"><s:fill><s:SolidColor color="#0058A0"/></s:fill></s:Rect><s:Rect left="4" right="4" top="4" bottom="4"><s:fill><s:LinearGradient rotation="90"><s:GradientEntry color="#09579d" alpha.selected="0.5"/><s:GradientEntry color="#092a4e" ratio="0.6" alpha.selected="0.5"/><s:GradientEntry color="#023564" alpha.selected="0.5"/></s:LinearGradient></s:fill></s:Rect><s:Rect left="4" right="4" top="4" bottom="4"><s:stroke><s:SolidColorStroke color="#001740" color.selected="white"></s:SolidColorStroke></s:stroke></s:Rect><s:HGroup left="8" top="8" verticalAlign="middle"><s:Image id="person" source="resource/images/icon_person.png"/><s:Label id="ciNameLabel" color="0xffffff" text="{busiCi.ciName}" /></s:HGroup><s:VGroup left="8" right="8" top="20" bottom="4" verticalAlign="middle"><s:Label color="white" text="系统健康度"/><s:Group id="statusGroup"><s:Rect width="150" top="0" bottom="0" topLeftRadiusX="5" topRightRadiusX="5"bottomLeftRadiusX="5" bottomRightRadiusX="5"><s:fill><s:LinearGradient rotation="90"><s:GradientEntry id="gradientEntry1" color="0x60F300"/> <s:GradientEntry id="gradientEntry2" color="0x008605"/></s:LinearGradient></s:fill></s:Rect><s:Path id="path" data="{pathString}"><s:stroke><s:SolidColorStroke color="0" alpha="0.3"/></s:stroke></s:Path><s:Path data="{pathString}" mask="{maskGroup}"><s:stroke><s:SolidColorStroke color="white"/></s:stroke></s:Path><s:Group id="maskGroup" height="100%" width="5"><s:Rect width="100%" height="100%"><s:fill><s:SolidColor color="0xffffff"/></s:fill></s:Rect></s:Group><s:Label id="systemHealthLabel" color="0xffffff" text="{busiCi.healthScore}" verticalCenter="0" x="{path.width+12}"/></s:Group><!--<s:VGroup horizontalCenter="0" verticalCenter="0"><s:HGroup></s:HGroup></s:VGroup>--></s:VGroup></s:Group></s:ItemRenderer>

原创粉丝点击