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

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

 

 

<?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>