Flex【原创】移动设备相册图片浏览功能 

 

Flex实现移动设备相册图片浏览功能

Flex4.6（IOS/Android）

首先贴上代码结构图：

 

分析2个重要视图：

1：ScanListView 作为firstView，用List呈现一个相片列表

 

2: ScanTabView 点击List的子元素进入手势左右切换浏览相片视图

 

分析2个重要组件：

1：ScanView 呈现照片的容器 封装手势左右切换相片的相关事件

      
          
               
                
                
                
                
            
           
                movePrecision){
     //right                        prev();                    }else if((event.stageX - oldPoint.x) < movePrecision){
     //left                        next();                    }                }            }                        private function prev():void{                if(selectedIndex == 0)                {                    selectedIndex = 0;                    active = false;                    mblbl.visible = true;                    pageNotice.source = firsttImgClass;                    PopUpManager.addPopUp(pageNotice,this);                    PopUpManager.centerPopUp(pageNotice);                    focusIn.end();                    focusIn.play();                    return;                }                selectedIndex--;                imgFade.end();                imgFade.play();            }                        private function next():void{                if(selectedIndex == dataProvider.length - 1)                {                    selectedIndex = dataProvider.length - 1;                    active = false;                    mblbl.visible = true;                    pageNotice.source = lastImgClass;                    PopUpManager.addPopUp(pageNotice,this);                    PopUpManager.centerPopUp(pageNotice);                    focusIn.end();                    focusIn.play();                    return;                }                selectedIndex++;                imgFade.end();                imgFade.play();            }                        protected function pagePrompt_clickHandler(event:MouseEvent):void            {                active = true;                focusOut.end();                focusOut.play();                pageNotice.source = null;                mblbl.visible = false;            }                        public function reset():void{                imgG.scaleX = 1.0;                imgG.scaleY = 1.0;                imgG.rotation = 0;            }                    ]]>    
           
           
           
       
      

 

2： ImageView 照片组件 封装对相片操作：缩放，旋转，平移的相关事件

      
          
                maxScale) {                    m = this.transform.matrix;                    m.translate( -p.x, -p.y);                    m.scale(maxScale/this.scaleX, maxScale/this.scaleY);                    m.translate(p.x, p.y);                    this.transform.matrix = m;                } else if (this.scaleX < minScale) {                    m = this.transform.matrix;                    m.translate( -p.x, -p.y);                    m.scale(minScale/this.scaleX, minScale/this.scaleY);                    m.translate(p.x, p.y);                    this.transform.matrix = m;                }            }                        private function handleRotate(e:TransformGestureEvent):void {                var p:Point  = this.localToGlobal(new Point(e.localX, e.localY));                p = parent.globalToLocal(p);                var m:Matrix = this.transform.matrix;                m.translate(-p.x, -p.y);                m.rotate(e.rotation * (Math.PI / 180));                m.translate(p.x, p.y);                this.transform.matrix = m;            }                        private function handleDrag(e:TransformGestureEvent):void {                this.x += e.offsetX;                this.y += e.offsetY;            }                        private function stopImgDrag():void{                if(!this.hasEventListener(TransformGestureEvent.GESTURE_PAN))                {                    this.addEventListener(TransformGestureEvent.GESTURE_PAN, handleDrag);                    this.imgDragEnable = false;                }            }                        private function startImgDrag():void{                if(this.hasEventListener(TransformGestureEvent.GESTURE_PAN))                {                    this.removeEventListener(TransformGestureEvent.GESTURE_PAN, handleDrag);                    this.imgDragEnable = true;                }            }                    ]]>    
           
               
            
           
               
                     
                  
             
           
       
      

 

 效果图：

 

源码下载地址：

请大家多多指教~