Flex实现web版图片查看器

项目需求：

在web端实现图片浏览，具有放大、缩小、滚轴放大缩小、移动、旋转以及范围控制。

成果图：

核心代码：

1、放大：此处放大是点击按钮，按1.5倍高宽进行放大。

                img.width = img.width *1.5;
                img.height = img.height *1.5;

2、缩小：此处缩小是点击按钮，按0.5倍高宽进行缩小。
                img.width = img.width *0.5;
                img.height = img.height *0.5;

3、旋转：此处旋转是按顺时针旋转90度。
                img.rotation = img.rotation - 90;

4、滚轴放大缩小：

--先添加滚轴监听

systemManager.addEventListener(MouseEvent.MOUSE_WHEEL, doMouseWheel);

--判断当滚轴向前或向后移动时，作出相应反应
            private function doMouseWheel(evt:MouseEvent):void
            {

                //滚轴向前，放大图片
                if(evt.delta > 0)
                {
                    img.width = img.width *1.5;
                    img.height = img.height *1.5;
                }
                else
                {
                    img.width = img.width * 0.5;
                    img.height = img.height * 0.5;                    
                }
            }

5、移动：图片查看最难的在于移动时的范围控制（不让图片超过图片查看窗口）

--首先添加鼠标按下、弹起的监听事件
            private function pan():void
            {
                img.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDowns);
                img.addEventListener(MouseEvent.MOUSE_UP,onMouseUps);        
            }   

--鼠标按下、弹起响应事件（并设定范围）
            private function onMouseDowns(evt:MouseEvent):void
            {                

                //拖拽事件，在600*400的矩形范围内拖拽
                evt.currentTarget.startDrag(false,new Rectangle(0,0,600-img.width,400-img.height));
                evt.currentTarget.addEventListener(MouseEvent.MOUSE_UP,onMouseUps);
            }
            private function onMouseUps(evt:MouseEvent):void

            { 
                evt.currentTarget.stopDrag();
                evt.currentTarget.removeEventListener(MouseEvent.MOUSE_UP,onMouseUps);
            }    

--在施行这样的方法时，会出现一个bug，即鼠标按下拖拽的时候，当鼠标超出窗体时（可能是失去焦点了），即使鼠标弹起也不会触发MouseUp事件

--所以，添加一个监听，超出窗体则不执行拖拽了
            protected function bdImg_mouseOutHandler(event:MouseEvent):void
            {
                this.stopDrag();
            }

PS：需要在装image的容器外添加上Scroller ，目的是切割图片，防止图片显示超过容器部分。

            <s:Scroller id="sc">
                <s:Group id="gp" height="100%" width="100%">
                    <s:Image id="img"
                                  horizontalCenter="0"
                                  verticalCenter="0"/>                
                </s:Group>            
            </s:Scroller>