TWaver网元动态转动效果

最近有客户提了一个网元动态旋转的需求，用TWaver实现起来还是很方便的，效果如下图所示：
主要实现功能：
1:网元动态旋转
2:网元选中效果，被选中网元快速转到最前端后停止旋转，取消选中自动重启旋转
3:根据鼠标位置自动调整旋转方向
4:可以在程序中修改fw/bw/fh/bh调整图片显示效果。

代码如下所示：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

				layout="absolute"

				creationComplete="test()"

				width="100%"

				height="100%"

				xmlns:ns="http://www.servasoftware.com/2009/twaver/flex">

	<mx:Script>

		<![CDATA[

			import mx.events.ResizeEvent;



			import twaver.Collection;

			import twaver.Consts;

			import twaver.ElementBox;

			import twaver.IData;

			import twaver.IElement;

			import twaver.Layer;

			import twaver.Node;

			import twaver.SelectionChangeEvent;

			import twaver.SelectionModel;

			import twaver.Styles;

			import twaver.SubNetwork;

			import twaver.Utils;

			import twaver.core.util.l.u;

			private var box:ElementBox = new ElementBox();



			private var _rotationList:Collection = new Collection();

			private var rectIndexMap:Object = {};

			private var indexRectMap:Object = {};

			private var rList:Collection = new Collection();

			private var _startAngle:Number = 90;

			private var timer:Timer;

			private var _selectNode:Node;



			private var _clockSise:Boolean = false;



			private var _stopAngle:Number = 0;

			private var _needStop:Boolean = false;



			[Embed(source="images/1.png")]

			public static const p1:Class;

			[Embed(source="images/2.png")]

			public static const p2:Class;

			[Embed(source="images/3.png")]

			public static const p3:Class;

			[Embed(source="images/4.png")]

			public static const p4:Class;

			[Embed(source="images/5.png")]

			public static const p5:Class;

			[Embed(source="images/6.png")]

			public static const p6:Class;

			[Embed(source="images/7.png")]

			public static const p7:Class;

			[Embed(source="images/8.png")]

			public static const p8:Class;



			public function get clockSise():Boolean

			{

				return _clockSise;

			}



			public function set clockSise(value:Boolean):void

			{

				if(this.clockSise==value){

					return;

				}

				_clockSise = value;

			}

			private function resetClockSize( point:Point):void {

				if (_needStop == true) {

					return;

				}

				if (point.x > this.network.width / 2) {

					clockSise = false;

				} else {

					clockSise = true;

				}

			}



			public function get selectNode():Node

			{

				return _selectNode;

			}



			public function set selectNode(value:Node):void

			{

				if(this.selectNode==value){

					return;

				}

				_selectNode = value;

				if(this.selectNode==null){

					_needStop = false;

					timer.delay = 30;

					if(!timer.running){

						timer.start();

					}

				}else{

					var rect:Rectangle = indexRectMap[this.selectNode] as Rectangle;

					var left:Boolean = (rect.x+rect.width/2)<network.width/2;

					if(left){

						clockSise = false;

					}else{

						clockSise = true;

					}

					var index:int = rotationList.getItemIndex(this.selectNode);



					var size:int = this.rotationList.count;

					var step:Number = 360/size;

					_stopAngle = 90 - index * step;

					_needStop = true;

					timer.delay = 5;

					if(!timer.running){

						timer.start();

					}

				}

			}



			public function start():void{

				timer.start();

			}

			public function stop():void{

				if(timer!=null){

					timer.stop();

				}

			}



			public function get startAngle():Number

			{

				return _startAngle;

			}



			public function set startAngle(value:Number):void

			{

				_startAngle = (value+360)%360;

				this.measureRotation();

			}



			public function get rotationList():Collection

			{

				return _rotationList;

			}



			public function set rotationList(value:Collection):void

			{

				_rotationList = value;

				this.box.layerBox.clear();

				var size:int = this.rotationList.count;

				for(var i:int = 0;i<size;i++){

					var l:Layer = new Layer("r:"+i);

					box.layerBox.add(l);

				}

				this.measureRotation();

			}

			private function measureRotation():void{

				rectIndexMap = {};

				indexRectMap = {};

				rList.clear();

				var size:int = this.rotationList.count;

				if(size==0){

					return;

				}

				var w:Number = this.network.width;

				var h:Number = this.network.height;



				var fw:Number = 1.0 / 3 * w;

				var bw:Number = 1.0 / 6 * w;

				var fh:Number = h / 2.5;

				var bh:Number = h / 7.0;



				var m:Number = (fw - bw) / 4;

				var cw:Number = m * 2 + bw;

				var halfcw:Number = cw / 2;

				var x:Number = halfcw + 15;

				w = w - halfcw * 2 - 30;

				var y:Number = bh / 2 + 10;

				h = h - fh / 2 - bh / 2 - 20;



				var step:Number = 360.0 / size;

				for(var i:int = 0;i<size;i++){

					var n:Node =  this.rotationList.getItemAt(i) as Node;

					var p:Point = this.getPointAtEllipse(x,y,w,h,startAngle+step*i);

					var px:Number = p.x;

					var py:Number = p.y;

					var pm:Number = (py - y) / h * (fw - bw) / 2;

					var ww:Number = pm * 2 + bw;

					var hh:Number = (py - y) / h * (fh - bh) + bh;

					var rect:Rectangle = new Rectangle(px - ww / 2, py - hh / 2, ww, hh);

					n.setSize(rect.width,rect.height);

					n.setCenterLocation(px,py);

					rectIndexMap[rect] = n;

					indexRectMap[n] = rect;

					rList.addItem(rect);

				}

				rList.sort(rectSort);



				for(var j:int = 0;j<size;j++){

					var rr:Rectangle = rList.getItemAt(j) as Rectangle;

					var nn:Node = rectIndexMap[rr];

					nn.layerID = "r:"+j;

				}

			}



			private function rectSort(r1:Rectangle,r2:Rectangle):int{

				if (r1.width> r2.width) {

					return 1;

				}

				if (r1.width < r2.width) {

					return -1;

				}

				return 0;

			}



			public function  getPointAtEllipse(x:Number,   y:Number,   w:Number,   h:Number,   angled:Number):Point {

				var angle:Number =angled / 180.0 * Math.PI;

				var px:Number = x + (Math.cos(angle) * 0.5 + 0.5) * w;

				var py:Number = y + (Math.sin(angle) * 0.5 + 0.5) * h;

				return new Point(px, py);

			}



			private function init():void{

				timer=new Timer(30);

				timer.addEventListener(TimerEvent.TIMER,function():void{

					if(clockSise){

						startAngle = startAngle+1;

					}else{

						startAngle = startAngle-1;

					}

					if(_needStop){

						var abs:Number = Math.abs(startAngle-(_stopAngle+360)%360);

						if(abs<2){

							timer.stop();

						}

					}

				});

				network.addEventListener(MouseEvent.MOUSE_MOVE,function(e:MouseEvent):void{

					var p:Point = network.getLogicalPoint(e);

					resetClockSize(p);

				});

				network.addEventListener(MouseEvent.MOUSE_DOWN,function(e:MouseEvent):void{

					var p:Point = network.getLogicalPoint(e);

					var element:IElement = network.getElementByMouseEvent(e);

					selectNode = element as Node;

					resetClockSize(p);

				});

				network.addEventListener(ResizeEvent.RESIZE,function():void{

					measureRotation();

				});

			}



			private function test():void{

				init();

				Utils.registerImageByClass("p1", p1);

				Utils.registerImageByClass("p2", p2);

				Utils.registerImageByClass("p3", p3);

				Utils.registerImageByClass("p4", p4);

				Utils.registerImageByClass("p5", p5);

				Utils.registerImageByClass("p6", p6);

				Utils.registerImageByClass("p7", p7);

				Utils.registerImageByClass("p8", p8);

				var list:Collection = new Collection();

				for(var i:int = 1;i<9;i++){

					var sub:Node = new Node();

					sub.setStyle(Styles.SELECT_STYLE,Consts.SELECT_STYLE_BORDER);

					sub.setStyle(Styles.IMAGE_STRETCH,Consts.STRETCH_FILL);

					sub.setStyle(Styles.SELECT_COLOR,"0x00ff00");



					sub.setStyle(Styles.LABEL_POSITION,Consts.POSITION_CENTER);

					sub.image = "p"+i;

					sub.name = "sub"+i

					list.addItem(sub);

					box.add(sub);

				}

				this.rotationList = list;

				network.elementBox = box;

				this.start();

			}



		]]>

	</mx:Script>

	<ns:Network id="network" width="100%" height="100%" backgroundColor="0xffffff">



	</ns:Network>

</mx:Application>