首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

简陋的动态仪表盘跟进度条

2012-09-08 
简陋的动态仪表盘和进度条由于项目需要,要自己做一个仪表盘和一个进度条,于是用几个矩形模拟了一下,自己玩

简陋的动态仪表盘和进度条

由于项目需要,要自己做一个仪表盘和一个进度条,于是用几个矩形模拟了一下,自己玩了一下,还不错

?

?

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"   minWidth="955" minHeight="600"><fx:Declarations><!-- 仪表盘转动 --><s:Rotate id="rotater" angleTo="{sl.value}" duration="300" target="{rec}"/><!-- 进度条走动 --><s:Resize id="resizer" duration="300" target="{pb}" widthTo="{sl.value}"/></fx:Declarations><!-- 模拟仪表盘指针(关键在于设定正确的旋转中心 transformX,transformY) --><s:Rect id="rec" x="100" y="100" width="100" height="20" transformX="90" transformY="10"><s:fill><s:SolidColor color="#C0C0C0"/></s:fill></s:Rect><!-- 进度条边框 --><s:Rect x="100" y="150" width="182" height="10"><s:stroke><s:SolidColorStroke color="#000000" weight="1"/></s:stroke></s:Rect><!-- 进度条 --><s:Rect id="pb" x="101" y="151" width="1" height="8"><s:fill><s:SolidColor color="#F0F0F0"/></s:fill></s:Rect><!-- 模拟数据加载 --><s:HSlider id="sl" x="100" y="200" change="rotater.play();resizer.play()" liveDragging="true"   maximum="180" minimum="0"/></s:Application>
?

?


简陋的动态仪表盘跟进度条

?

热点排行
Bad Request.