利用Flex实现仪表盘

闲来无事做了个简单的Flex样例：

说明：创建Flex工程(太简单了所以：略）

首先看下：文件目录结构

本文中用到的文件 chartWatch.mxml   RateWatch.mxml  p.jpg    png.jpg 

 

创建一个新的组建：RateWatch.mxml 

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"  
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="300" height="300"   
		 creationComplete="canvas1_creationCompleteHandler()"
		 >	 
	<fx:Declarations>
		<!--旋转 对应的目标设定为HGroup的Id值 设置角度  设置旋转的圆心-->
		<mx:Rotate  target="{h}" id="rot" angleTo="{angle2}" angleFrom="{anglef}" originX="150" originY="0"  />
		
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			[Bindable]
			private var  angle2:Number; //当前角度
			[Bindable]
			private var anglef:Number = 0; //初始角度
			private var  timer:Timer = new Timer(2000); //定时器，2秒钟旋转一次
			
			
		 
			//初始加载的时候的函数
			protected function canvas1_creationCompleteHandler():void
			{
				 timer.addEventListener(TimerEvent.TIMER,timerHandler); //为定时器添加执行函数
				 timer.start();//开启定时器
				( rt.content as Bitmap ).smoothing = true; // 利用Bitmap进行光滑处理
				
			}
			//定时处理的函数
			private function timerHandler(e :TimerEvent) :void{
				angle2 = Math.random()*240; //在0-240之间取值
				rot.play();//对旋转进行播放
				anglef = angle2; //将初始角度设置为当前角度在下一次执行前的角度初始化				 
			 
			}
			
			
		]]>
	</fx:Script>
	<mx:Image id="img" x="0" y="0" width="300" height="300" horizontalAlign="center"
			  source="images/png.jpg" verticalAlign="middle">				
	</mx:Image>
	<s:HGroup id="h" x="0" y="150" width="300" height="4" gap="0" verticalAlign="middle">
		<mx:Image id="rt" x="0"  y= "0" width="150" height="4" source="images/p.jpg">			 
		</mx:Image>
	</s:HGroup>	 
</mx:Canvas>

在应用程序中添加新创建的组件：

chartWatch.mxml

 

<?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" xmlns:comp="comp.*">
	
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle">
			
		</s:VerticalLayout>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<!-- 将上下的滑条和左右的滑动条效果去掉 -->
	<comp:RateWatch width="300" height="300" horizontalScrollPolicy="off" verticalScrollPolicy="off" >
	</comp:RateWatch>
</s:Application>

原始图片：p.jpg

原始图片： png.jpg

 

效果图：( http://www.macower.com)