运用flex编写一个模拟表盘

主文件：

<?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:demo="demo.*">
	<s:layout>
		<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<demo:demo_watchComp verticalScrollPolicy="off" horizontalScrollPolicy="off"/>
</s:Application>

 

 

1、demo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="canvas1_creationCompleteHandler(event)" 
		   xmlns:s="library://ns.adobe.com/flex/spark" 
		   xmlns:mx="library://ns.adobe.com/flex/mx" width="300" height="280">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			[Bindable]
			private var af:Number = 0;
			[Bindable]
			private var at:Number = 0;
			
			[Bindable]
			private var timer:Timer = new Timer(1000);
			
			protected function canvas1_creationCompleteHandler(event:FlexEvent):void
			{
				timer.addEventListener(TimerEvent.TIMER, timerHandle); //定时器事件注册
				timer.start();//启动定时器
				//处理图片为bitmap并设置为光滑效果
				(bg.content as Bitmap).smoothing = true;
				(pt.content as Bitmap).smoothing = true;
			}
			private function timerHandle(event:TimerEvent):void
			{
				at = Number((Math.random()*120));
				rotate1.play(); //启动旋转
				af = at;
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<!--旋转组件-->
		<mx:Rotate id="rotate1" target="{hg}" angleFrom="{af}" angleTo="{at}"/>
	</fx:Declarations>
	<mx:Image id="bg" x="0" y="0" width="300" height="280" source="images/watch.png"/>
	<s:HGroup x="0" y="140" width="300" height="10" id="hg">
		<mx:Image width="150" height="5" source="images/poiter.png" id="pt"/>
	</s:HGroup>
	
</mx:Canvas>

2、素材

指针图片：

 

3、最后运行的效果图：