Posted on 2012-06-05 17:54
TWaver 閱讀(1378)
評論(0) 編輯 收藏
最近有客戶提了一個網元動態旋轉的需求，用TWaver實現起來還是很方便的，效果如下圖所示：
主要實現功能：
1:網元動態旋轉
2:網元選中效果，被選中網元快速轉到最前端后停止旋轉，取消選中自動重啟旋轉
3:根據鼠標位置自動調整旋轉方向
4:可以在程序中修改fw/bw/fh/bh調整圖片顯示效果
代碼如下所示：
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3 layout="absolute"
4 creationComplete="test()"
5 width="100%"
6 height="100%"
7 xmlns:ns="http://www.servasoftware.com/2009/twaver/flex">
8 <mx:Script>
9 <![CDATA[
10 import mx.events.ResizeEvent;
11
12 import twaver.Collection;
13 import twaver.Consts;
14 import twaver.ElementBox;
15 import twaver.IData;
16 import twaver.IElement;
17 import twaver.Layer;
18 import twaver.Node;
19 import twaver.SelectionChangeEvent;
20 import twaver.SelectionModel;
21 import twaver.Styles;
22 import twaver.SubNetwork;
23 import twaver.Utils;
24 import twaver.core.util.l.u;
25 private var box:ElementBox = new ElementBox();
26
27 private var _rotationList:Collection = new Collection();
28 private var rectIndexMap:Object = {};
29 private var indexRectMap:Object = {};
30 private var rList:Collection = new Collection();
31 private var _startAngle:Number = 90;
32 private var timer:Timer;
33 private var _selectNode:Node;
34
35 private var _clockSise:Boolean = false;
36
37 private var _stopAngle:Number = 0;
38 private var _needStop:Boolean = false;
39
40 [Embed(source="images/1.png")]
41 public static const p1:Class;
42 [Embed(source="images/2.png")]
43 public static const p2:Class;
44 [Embed(source="images/3.png")]
45 public static const p3:Class;
46 [Embed(source="images/4.png")]
47 public static const p4:Class;
48 [Embed(source="images/5.png")]
49 public static const p5:Class;
50 [Embed(source="images/6.png")]
51 public static const p6:Class;
52 [Embed(source="images/7.png")]
53 public static const p7:Class;
54 [Embed(source="images/8.png")]
55 public static const p8:Class;
56
57 public function get clockSise():Boolean
58 {
59 return _clockSise;
60 }
61
62 public function set clockSise(value:Boolean):void
63 {
64 if(this.clockSise==value){
65 return;
66 }
67 _clockSise = value;
68 }
69 private function resetClockSize( point:Point):void {
70 if (_needStop == true) {
71 return;
72 }
73 if (point.x > this.network.width / 2) {
74 clockSise = false;
75 } else {
76 clockSise = true;
77 }
78 }
79
80 public function get selectNode():Node
81 {
82 return _selectNode;
83 }
84
85 public function set selectNode(value:Node):void
86 {
87 if(this.selectNode==value){
88 return;
89 }
90 _selectNode = value;
91 if(this.selectNode==null){
92 _needStop = false;
93 timer.delay = 30;
94 if(!timer.running){
95 timer.start();
96 }
97 }else{
98 var rect:Rectangle = indexRectMap[this.selectNode] as Rectangle;
99 var left:Boolean = (rect.x+rect.width/2)<network.width/2;
100 if(left){
101 clockSise = false;
102 }else{
103 clockSise = true;
104 }
105 var index:int = rotationList.getItemIndex(this.selectNode);
106
107 var size:int = this.rotationList.count;
108 var step:Number = 360/size;
109 _stopAngle = 90 - index * step;
110 _needStop = true;
111 timer.delay = 5;
112 if(!timer.running){
113 timer.start();
114 }
115 }
116 }
117
118 public function start():void{
119 timer.start();
120 }
121 public function stop():void{
122 if(timer!=null){
123 timer.stop();
124 }
125 }
126
127 public function get startAngle():Number
128 {
129 return _startAngle;
130 }
131
132 public function set startAngle(value:Number):void
133 {
134 _startAngle = (value+360)%360;
135 this.measureRotation();
136 }
137
138 public function get rotationList():Collection
139 {
140 return _rotationList;
141 }
142
143 public function set rotationList(value:Collection):void
144 {
145 _rotationList = value;
146 this.box.layerBox.clear();
147 var size:int = this.rotationList.count;
148 for(var i:int = 0;i<size;i++){
149 var l:Layer = new Layer("r:"+i);
150 box.layerBox.add(l);
151 }
152 this.measureRotation();
153 }
154 private function measureRotation():void{
155 rectIndexMap = {};
156 indexRectMap = {};
157 rList.clear();
158 var size:int = this.rotationList.count;
159 if(size==0){
160 return;
161 }
162 var w:Number = this.network.width;
163 var h:Number = this.network.height;
164
165 var fw:Number = 1.0 / 3 * w;
166 var bw:Number = 1.0 / 6 * w;
167 var fh:Number = h / 2.5;
168 var bh:Number = h / 7.0;
169
170 var m:Number = (fw - bw) / 4;
171 var cw:Number = m * 2 + bw;
172 var halfcw:Number = cw / 2;
173 var x:Number = halfcw + 15;
174 w = w - halfcw * 2 - 30;
175 var y:Number = bh / 2 + 10;
176 h = h - fh / 2 - bh / 2 - 20;
177
178 var step:Number = 360.0 / size;
179 for(var i:int = 0;i<size;i++){
180 var n:Node = this.rotationList.getItemAt(i) as Node;
181 var p:Point = this.getPointAtEllipse(x,y,w,h,startAngle+step*i);
182 var px:Number = p.x;
183 var py:Number = p.y;
184 var pm:Number = (py - y) / h * (fw - bw) / 2;
185 var ww:Number = pm * 2 + bw;
186 var hh:Number = (py - y) / h * (fh - bh) + bh;
187 var rect:Rectangle = new Rectangle(px - ww / 2, py - hh / 2, ww, hh);
188 n.setSize(rect.width,rect.height);
189 n.setCenterLocation(px,py);
190 rectIndexMap[rect] = n;
191 indexRectMap[n] = rect;
192 rList.addItem(rect);
193 }
194 rList.sort(rectSort);
195
196 for(var j:int = 0;j<size;j++){
197 var rr:Rectangle = rList.getItemAt(j) as Rectangle;
198 var nn:Node = rectIndexMap[rr];
199 nn.layerID = "r:"+j;
200 }
201 }
202
203 private function rectSort(r1:Rectangle,r2:Rectangle):int{
204 if (r1.width> r2.width) {
205 return 1;
206 }
207 if (r1.width < r2.width) {
208 return -1;
209 }
210 return 0;
211 }
212
213 public function getPointAtEllipse(x:Number, y:Number, w:Number, h:Number, angled:Number):Point {
214 var angle:Number =angled / 180.0 * Math.PI;
215 var px:Number = x + (Math.cos(angle) * 0.5 + 0.5) * w;
216 var py:Number = y + (Math.sin(angle) * 0.5 + 0.5) * h;
217 return new Point(px, py);
218 }
219
220 private function init():void{
221 timer=new Timer(30);
222 timer.addEventListener(TimerEvent.TIMER,function():void{
223 if(clockSise){
224 startAngle = startAngle+1;
225 }else{
226 startAngle = startAngle-1;
227 }
228 if(_needStop){
229 var abs:Number = Math.abs(startAngle-(_stopAngle+360)%360);
230 if(abs<2){
231 timer.stop();
232 }
233 }
234 });
235 network.addEventListener(MouseEvent.MOUSE_MOVE,function(e:MouseEvent):void{
236 var p:Point = network.getLogicalPoint(e);
237 resetClockSize(p);
238 });
239 network.addEventListener(MouseEvent.MOUSE_DOWN,function(e:MouseEvent):void{
240 var p:Point = network.getLogicalPoint(e);
241 var element:IElement = network.getElementByMouseEvent(e);
242 selectNode = element as Node;
243 resetClockSize(p);
244 });
245 network.addEventListener(ResizeEvent.RESIZE,function():void{
246 measureRotation();
247 });
248 }
249
250 private function test():void{
251 init();
252 Utils.registerImageByClass("p1", p1);
253 Utils.registerImageByClass("p2", p2);
254 Utils.registerImageByClass("p3", p3);
255 Utils.registerImageByClass("p4", p4);
256 Utils.registerImageByClass("p5", p5);
257 Utils.registerImageByClass("p6", p6);
258 Utils.registerImageByClass("p7", p7);
259 Utils.registerImageByClass("p8", p8);
260 var list:Collection = new Collection();
261 for(var i:int = 1;i<9;i++){
262 var sub:Node = new Node();
263 sub.setStyle(Styles.SELECT_STYLE,Consts.SELECT_STYLE_BORDER);
264 sub.setStyle(Styles.IMAGE_STRETCH,Consts.STRETCH_FILL);
265 sub.setStyle(Styles.SELECT_COLOR,"0x00ff00");
266
267 sub.setStyle(Styles.LABEL_POSITION,Consts.POSITION_CENTER);
268 sub.image = "p"+i;
269 sub.name = "sub"+i
270 list.addItem(sub);
271 box.add(sub);
272 }
273 this.rotationList = list;
274 network.elementBox = box;
275 this.start();
276 }
277
278 ]]>
279 </mx:Script>
280 <ns:Network id="network" width="100%" height="100%" backgroundColor="0xffffff">
281
282 </ns:Network>
283 </mx:Application>