flex 開發卡片照片編輯篇（二）

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
3.     width="600" 
4.     height="510" 
5.     creationComplete="initUI();" 
6.     backgroundColor="#E6E6E6"  
7.     verticalScrollPolicy="off" 
8.     horizontalScrollPolicy="off"  
9.     borderColor="#ACA5A5" 
10.     borderStyle="solid" 
11.     borderThickness="2"  
12.     color="#AD4B40">
13. <mx:Script> 
14.         <![CDATA[
15.         import mx.controls.Image;
16.         import code.ProductHandlerBasic;
17.         import mx.core.BitmapAsset;
18.         import mx.controls.Label; 
19.         import mx.core.Container; 
20.         import flash.geom.Rectangle ;  
21.         import mx.managers.PopUpManager;  
22.         import mx.managers.PopUpManagerChildList 
23.         
24.         /*裁剪框*/
25.         private var _rectBorder:Sprite ;
26.            
27.         /*裁剪拉伸光標*/
28.         private var _cursor:Image ;
29.         
30.         /*裁剪框的座標寬度數據*/ 
31.         private var _w:Number = 0;
32.         private var _h:Number = 0 ; 
33.         private var _x:Number = 0 ;
34.         private var _y:Number = 0 ;
35.         private var _url:String ;
36.         
37.         
38.         private var mouseState:int = 0 ;//鼠標狀態，0 爲正常 1：爲按下
39.          
40.         /*臨時存放裁剪框座標大小信息*/
41.         private var _tempObj:Object = new Object() ; 
42.         
43.         /*存放鼠標座標減去裁剪邊框的座標*/ 
44.         private var _mx:Number ; 
45.         private var _my:Number ; 
46.         
47.         /*模板圖片框的顯示比例.根據此比例才能算出裁剪框的大小*/ 
48.         private var _targeimgtscale:Number = 1 ;
49.         
50.         /*模板上的圖片對象.*/
51.         private var _targetimg:Image ; //版式上的圖片 
52.         
53.         //光標是否在左邊界和右邊界的標識 
54.         private var _criticalFlag:Number ;
55.         
56.         private var _p:ProductHandlerBasic ;
57.         /*當前圖片相對應的bitmapasset對象*/
58.         private var _currentEditImg:Image ;
59.         
60.         [Embed(source="assets/03.gif")] 
61.         private var flag:Class;
63.          
64.     
65.         private function initUI():void{
66.         }
67.         public function set producthandlerBase(pro_:ProductHandlerBasic):void{
68.             this._p = pro_ ;
69.         } 
70.         public function get producthandlerBase():ProductHandlerBasic{
71.             return this._p ;
72.         }
74.         
75.         /**
76.          * 初始化照片編輯所需要的參數 。
77.          * @param _img :所要編輯的圖片Bitmap對像。模板框裏的圖片 。
78.          * @param _url :所要編輯的圖片url。由於_img是生成的bitmap而的不到source.所以再傳
79.          * @param _x   :裁剪框在編輯圖片中的x ;
80.          * @param -y   :................y
81.          */
82.         public function initphotoEditParams(img_t:Image,url_t:String,x_t:Number,y_t:Number,w_t:Number,h_t:Number):void{
83.             this._targeimgtscale = img_t.width/img_t.height ; 
84.             this._targetimg = img_t ; 
85.             this._x = x_t ;
86.             this._y = y_t ;
87.             this._w = w_t ; 
88.             this._h = h_t ;
89.             this._url = url_t ; 
90.             var request_t:URLRequest = new URLRequest(url_t);
91.             var loader_t:Loader = new Loader ();
92.             loader_t.load(request_t) ;
93.             loader_t.contentLoaderInfo.addEventListener(Event.COMPLETE,photoLoaderCompleteHandler) ;
95.         }
96.         /**所編輯圖片加載完成處理*/ 
97.         private function photoLoaderCompleteHandler(e:Event):void{
98.             var loader_t:Loader = e.currentTarget.loader as Loader ;
99.             var asset_:Bitmap = new Bitmap() ;
100.             var bitmapdata_t:BitmapData = new BitmapData(loader_t.width,loader_t.height);
101.             bitmapdata_t.draw(loader_t);
102.             asset_.bitmapData = bitmapdata_t ;
103.             /*創建當前需要編輯的用戶圖像*/
104.             _currentEditImg = new Image() ;
105.             _currentEditImg.source = asset_ ;
106.             _currentEditImg.width = bitmapdata_t.width ;
107.             _currentEditImg.height= bitmapdata_t.height ;
108.              
109.             _currentEditImg.x = (this.width-menuID.width-loader_t.width)/2 ;
110.             _currentEditImg.y = (this.height-loader_t.height)/2 ; 
111.              
112.             this.addChild(_currentEditImg) ;
114.             /*創建紅色矩形裁剪框*/
115.              _rectBorder = new Sprite() ; 
116.              _rectBorder.x = this._x ;
117.              _rectBorder.y = this._y ;
118.             /*設置裁剪區域邊框樣式*/      
119.             _rectBorder.graphics.lineStyle(2, 0xFF0000, 0.5, true, LineScaleMode.NONE, CapsStyle.ROUND);
120.             _rectBorder.graphics.beginFill(0x330000,0);            
121.             _rectBorder.graphics.drawRect(0,0,this._w,this._h);     
122.             _rectBorder.graphics.endFill();  
123.             this._currentEditImg.addChild(_rectBorder); 
125.             /*創建光標對象*/
126.             _cursor = new Image(); 
127.             /*一定要用這種方式給光標傳值,否則會初相亂七八糟的效果。真他媽的鬱悶,搞了好幾天才發現,估計是flex的bug*/
128.             _cursor.source = flag ;
129.             _cursor.width =  30 ;
130.             _cursor.height = 30 ;
131.             _cursor.visible = false ;
132.             
133.             this._currentEditImg.addChild(_cursor); 
134.             this._currentEditImg.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
135.             this._currentEditImg.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler) ;
136.             this._currentEditImg.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
137.             this._currentEditImg.addEventListener(MouseEvent.DOUBLE_CLICK,doubleClickHandler) ;
138.             this._currentEditImg.doubleClickEnabled = true ;
139.         }
141.         /**
142.          * 雙擊應用修改
143.          */ 
144.         private function doubleClickHandler(e:MouseEvent):void{
145.             this.applicationHandler() ;
146.         }  
148.         /**
149.          * 鼠標按下
150.          */
151.         private function mouseDownHandler(e:MouseEvent):void{
152.             this._tempObj.x = _rectBorder.x ;
153.             this._tempObj.y = _rectBorder.y ;
154.             this._tempObj.width = this._w ;
155.             this._tempObj.height = this._h ;
156.             this.mouseState = 1 ;
157.             
158.         }
159.         /**
160.          * 鼠標彈起
161.          */
162.         private function mouseUpHandler(e:MouseEvent):void{
163.              this.mouseState = 0 ;
164.              this._rectBorder.stopDrag() ; 
165.         } 
166.          
167.         /**
168.          * 鼠標移動及拖動處理
169.          */ 
170.         private function mouseMoveHandler(e:MouseEvent):void{ 
171.             _mx = mouseX - this._currentEditImg.x ; 
172.             _my = mouseY - this._currentEditImg.y ;  
173.             _cursor.x = _mx-_cursor.width/2 ;
174.             _cursor.y =  _my - _cursor.height/2 ; 
175.             this._cursor.visible = false ;
176.             Mouse.show();
177.             /*光標在左邊邊緣拖動*/
178.            if((_criticalFlag==1) && this.mouseState == 1){
179.                 leftDragHandler();
180.             }   
181.             /*光標在右邊邊緣拖動*/
182.             else if((_criticalFlag==2)  && this.mouseState == 1){ 
183.                 this.rightDragHandler();
184.             }
185.             /*光標在中間拖動*/
186.             else if((_criticalFlag==3) && this.mouseState ==1){
187.                 var rt:Rectangle = new Rectangle();
188.                 rt.x = rt.y = 0 ;     
189.                 rt.width =  _currentEditImg.width  - this._w ;
190.                 rt.height = _currentEditImg.height - _h ; 
191.                 this._rectBorder.startDrag(false,rt) ;
192.                 this.mouseState = 2 ; 
193.             }
194.             //在左邊緣 
195.             if(isLeftEdge()){  
196.                 this._cursor.visible = true ;    
197.                 Mouse.hide() ;  
198.                 _criticalFlag =1;
199.             } 
200.              
201.             else if(isRightEdge()){
202.                 this._cursor.visible = true ;
203.                 Mouse.hide() ;  
204.                 _criticalFlag =2;
205.             }else if(isInCutRect()){
206.                  _criticalFlag = 3;  
207.             }   
208.             else{  
209.                 _criticalFlag = 0 ;
210.             }
211.             e.updateAfterEvent() ; 
212.         }   
213.         
214.         /**
215.          * 在左邊緣上拖動處理
216.          */ 
217.         private function leftDragHandler():void{
218.             _rectBorder.graphics.clear();
219.             _rectBorder.graphics.lineStyle(2, 0xFF0000, 0.5, true, LineScaleMode.NONE, CapsStyle.ROUND);
220.             _rectBorder.graphics.beginFill(0xCCFF00, 0);      
221.             /*左邊邊界*/ 
222.             _rectBorder.x = _mx < 0?0:_mx ;      
223.             /*右邊邊界*/
224.             _rectBorder.x = _rectBorder.x >= (_w + _tempObj.x)?(_w + _tempObj.x):_rectBorder.x ;   
225.             /*裁剪框寬度*/
226.             _w = _tempObj.width + _tempObj.x - _rectBorder.x ;  
227.             /*裁剪框高度*/
228.             _h = _w / this._targeimgtscale ;           
229.             var h2:Number = this._currentEditImg.height - this._tempObj.y ;   
230.             /*是否撐到最大*/
231.             if(_h>h2){                                         
232.                 _rectBorder.x = this._tempObj.x + this._tempObj.width -h2*this._targeimgtscale;
233.                 _w = h2* this._targeimgtscale ;
234.                 this._h = h2 ;  
235.             }        
236.             _rectBorder.graphics.drawRect(0, 0, _w, _h );  
237.             _rectBorder.graphics.endFill();    
238.         }
239.         
240.         private function rightDragHandler():void{
241.             _rectBorder.graphics.clear();
242.             _rectBorder.graphics.lineStyle(2, 0xFF0000, 0.5, true, LineScaleMode.NONE, CapsStyle.ROUND);
243.             _rectBorder.graphics.beginFill(0xCCFF00, 0);   
244.             _w= _mx > _currentEditImg.width?_currentEditImg.width:_mx ;//右邊界判斷
245.             _w = (_w <= this._tempObj.x)?_tempObj.x:_w ;  //左邊界判斷 
246.             _w = _w-this._tempObj.x ; //求出矩形寬度
247.             _h = _w/ this._targeimgtscale ; //求出高度
248.             _rectBorder.y = _tempObj.height + _tempObj.y - _h; //求出最大允許高度
249.             if (_rectBorder.y < 0) {                       
250.                 _h = _tempObj.height + _tempObj.y ;//最大寬度爲矩形寬度
251.                 _rectBorder.y = 0;             
252.                 _w =  _h * this._targeimgtscale ; //求出高度 
253.                 
254.             }
255.             _rectBorder.graphics.drawRect(0, 0, _w,_h);   
256.             _rectBorder.graphics.endFill();  
257.         }
258.         
259.          
260.         /**
261.          * 拖動整個裁剪矩形
262.          */ 
263.         private function isStartMiddleDrag():Boolean{
264.             if((_criticalFlag==3) && this.mouseState ==1){
265.                 return true ;
266.             }  
267.             return false ;
268.         }
270.         
271.         /**   
272.          * 檢查光標是否在左邊界上  
273.          * @return boolean
274.          */                 
275.         private function isLeftEdge():Boolean {  
276.             /**檢查左邊界*/        
277.              
278.             if(_mx<0){
279.                 return false ;
280.             }  
281.             if (_mx>=(this._rectBorder.x -BORDER1) &
282.                 _mx<=(this._rectBorder.x + BORDER1) &&   
283.                 _my>this._rectBorder.y &&     
284.                 _my<(this._rectBorder.y +_h)) {  
285.                     return true ;           
286.             }          
287.             return false ;   
288.         } 
289.          
290.         /**
291.          * 檢查光標是否在右邊界上
292.          */  
293.         private function isRightEdge():Boolean {
294.             if(_mx>this._currentEditImg.width){ 
295.                 return false;
296.             } 
297.             if (_mx>=(this._rectBorder.x + _w - BORDER1) && _mx<=(this._rectBorder.x+_w+BORDER1) &
298.                 _my>this._rectBorder.y&&  _my<(this._rectBorder.y+_h)) { 
299.                     return true ;             
300.             }       
301.             return false ; 
302.         }
303.         /**  
304.          * 判斷光標標是否在裁剪區域裏面
305.          * @return true 如果光標在裏面  
306.          */          
307.         private function isInCutRect():Boolean {   
308.             if (_mx>(this._rectBorder.x +BORDER1) && 
309.                 _mx<(this._rectBorder.x + _w - BORDER1) &
310.                 _my>(this._rectBorder.y + BORDER1) &&    
311.                 _my<(this._rectBorder.y + _h -BORDER1)) {
312.                     return true ; 
313.             }     
314.             return false ;    
315.         }  
316.         private function applicationHandler():void{
317.      
318.             //照片編輯，保存座標參數  
319.             _p.saveCurrentPageData(_p.currentpageNum,_p.currentphotoNum,_url,_rectBorder.x,_rectBorder.y,_w,_h);
320.             _p.loadphotoToStage(_targetimg,_p.currentphotoNum,false,this._url) 
321.             this.cancleHandler()
322.         }     
323.         private function cancleHandler():void{
324.             
325.             this._currentEditImg.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
326.             this._currentEditImg.removeEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
327.             this._currentEditImg.removeEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
328.             this._currentEditImg.removeEventListener(MouseEvent.DOUBLE_CLICK,doubleClickHandler);
329.             PopUpManager.removePopUp(this);
330.         } 
332.         public  var BORDER1:Number = 10 ; 
333.         
334.         private function mouseOverHelp():void{
335.             this.helphintID.visible = true ;
336.             this.removeChild(this.helphintID);
337.             this.addChildAt(this.helphintID,this.numChildren);
339.         } 
340.         private function mouserOutHelp():void{
341.             this.helphintID.visible = false ;
342.         } 
343.          
344.         ]]> 
345. </mx:Script>   
346.   
348.         <mx:Canvas id="menuID" x="530" y="0" width="70" height="510" backgroundColor="#DCDCDC" borderStyle="solid" borderThickness="2">
349.                 <mx:Button x="4" y="10" id="helpID"  mouseOver="mouseOverHelp();" label="幫助"  mouseOut="mouserOutHelp();" fontWeight="bold" fontSize="12" height="30" width="56" fillAlphas="[1.0, 1.0]" fillColors="[#333333, #333333]" borderColor="#C8C8C8" color="#FFFFFF" cornerRadius="3"/>
350.                 <mx:Button x="4" y="464" label="取消" click="cancleHandler()" fontSize="12" fontWeight="bold" fontFamily="Verdana" height="30" color="#FFFFFF" themeColor="#0C00FF" cornerRadius="3" width="56" fillAlphas="[1.0, 1.0]" fillColors="[#004D99, #004D99]" borderColor="#C8C8C8"/>
351.                 <mx:Button x="4" y="424" label="應用" click="applicationHandler()" fontSize="12" fontWeight="bold" color="#FFFFFF" height="30" themeColor="#0000FF" fillAlphas="[1.0, 1.0]" cornerRadius="3" alpha="1.0" width="56" fillColors="[#004D99, #004D99]" borderColor="#C8C8C8"/>
352.         </mx:Canvas> 
353.         <mx:Canvas   id="helphintID"  visible="false" x="{menuID.x-helphintID.width}" y="{this.helpID.y}" verticalScrollPolicy="off" horizontalScrollPolicy="off" backgroundColor="#FFFFFF" borderStyle="solid" borderThickness="3">
354.             <mx:Text x="8" y="2" text="紅色框內爲您需要的照片內容，光標落在紅色框內時，按住鼠標左鍵任意角度拖動可移動框的位置； 光標落在紅色框左右兩條邊線時，會變成左右方向的箭頭形狀，此時按住鼠標左鍵左右拖動可等比例改變框的大小； 移動紅色框的位置或改變紅色框的大小直到取得您滿意的照片內容後，雙擊照片區域或點擊“應用”按鈕返回製作頁面； 點擊“取消”按鈕也可返回製作頁面，且不會對照片的位置和大小做任何改變。" width="292" height="220" fontSize="12" fontWeight="normal" color="#454545"/>
355.         </mx:Canvas>
357.      
358.        
359. </mx:Canvas>