extjs框架下如何实现利用鼠标滚轮放大、缩小、拖动图片？

以下内容需要一定的ExtJs以及Js知识基础

Extdefine('windowViewPicWin',{//定义一个类继承window 所有配置都在该类里 包括地址等
    extend : 'ExtwindowWindow',
    title : '大图查看',
    bodyStyle: {
            background: 'url(背景地址) repeat'//此处给窗口加个背景图
        },
    bodyPadding : '1 1 1 1',
    autoShow : true,
    modal : true,
    alwaysOnTop : true,
    scrollable : true,
    width : 900,
    height : 500,
    config : {
        src : null, //需要展示的地址
        clickX: null,//存放鼠标按下时指针X的位置
            clickY: null,//存放鼠标按下时指针Y的位置
            isMoving: false,//一个标识 作为判断当前鼠标是否按下状态 即拖拽中状态
            offset : 12 //放大倍数 默认12倍 与原图放大缩小
    },
    initComponent : function(){
        var me = this;
        var minWidth = mewidth-9; //用作在window里的最小宽
        var minHeight = meheight-54; //用作在window里的最小高（window的head大概54px）
        ExtapplyIf(me,{
            items : [{
                xtype : 'image',
                width : minWidth,
                height : minHeight,
                src : megetSrc(),
                listeners : {
                    afterrender: {
                        fn : meonAfterRender,//监听渲染完成事件
                        scope : me
                    }
                }
            }]
        })
        mecallParent(arguments);
    },
    onAfterRender : function(img, eOpts){
        var win = imgup('window');
        var minPicWidth = imggetWidth();
        var minPicHeight = imggetHeight();
        Extget(imggetId())on({  //获得ExtdomElement 添加事件 这个区别于原生的element元素 这里是ExtJs自己包装的element元素
            'mousewheel': {   //监听鼠标滚轮事件(火狐浏览器叫DOMMouseScroll)，extjs增加监听事件前面没有on区别于普通js，他是on('事件名':{})
                fn : function(e){
                    epreventDefault();
                    var type = egetWheelDelta();
                    winzoom(Extget(imggetId()),wingetOffset(),type>0true:false,minPicWidth,minPicHeight,win,egetX(),egetY())
                }
            },
            'mousedown': {
                fn: function(e){
                    documentgetElementById(imggetId())stylecursor = "move";
                    estopEvent();
                        winsetClickX(egetX());
                        winsetClickY(egetY());
                        winsetIsMoving(true);
                }
            },
            'mouseup': {
                fn: function(e){
                    if(wingetIsMoving()){
                        winsetClickX(null);
                            winsetClickY(null);
                            winsetIsMoving(false);
                    }
                }
            },
            'mousemove': {
                fn: function(e){
                    if(wingetIsMoving()){
                        var left = egetX()-wingetClickX();//x偏移量
                        var top = egetY()-wingetClickY();//y偏移量
                        if( imggetX()>(wingetX()+50)
                            ||imggetY()>(wingetY()+100)){
                            documentgetElementById(imggetId())stylecursor = "not-allowed";
                            winsetIsMoving(false);
                            var task = new ExtutilDelayedTask(function(){
                                winsetScrollX(0,false);
                                winsetScrollY(0,false);
                                imgsetX(wingetX()-5);
                                imgsetY(wingetY()+45);
                                documentgetElementById(imggetId())stylecursor = "move";
                            });
                            taskdelay(1000);
                        }else if((imggetX()+imggetWidth())<(wingetX()+wingetWidth()-50)
                                ||imggetY()+imggetHeight()<wingetY()+wingetHeight()-100){
                            documentgetElementById(imggetId())stylecursor = "not-allowed";
                            winsetIsMoving(false);
                            var task = new ExtutilDelayedTask(function(){
                                winsetScrollX(imggetWidth(),false);
                                winsetScrollY(imggetHeight(),false);
                                    imgsetX(wingetX()-(imggetWidth()-wingetWidth()));
                                    imgsetY(wingetY()-(imggetHeight()-wingetHeight()));
                                    documentgetElementById(imggetId())stylecursor = "move";
                            });
                            taskdelay(1000);
                        }else {
                            imgsetX(wingetLastMarginX()+left);
                            imgsetY(wingetLastMarginY()+top);
                        }
                    }
                }
            }
        });
    },
    /
      放大缩小
      el:dom对象
      offset:放大缩小的倍数
      type: true/false 放大缩小的标识
      mw: 最小宽度
      mh: 最小高度
      win: 外面的window(标定scroll用) x:鼠标x坐标 y:鼠标y坐标
     /
    zoom : function(el, offset, type, mw, mh, win, x, y) {  
        var width = elgetWidth();  
        var height = elgetHeight();  
        var nwidth = type  (width  offset) : (width / offset);  
        var nheight = type  (height  offset) : (height / offset); 
        elsetWidth(nwidth<=mw  mw : nwidth);
        elsetHeight(nheight<=mh  mh : nheight);
        //修正参数
        var elX = elgetX(),
            elY = elgetY(),
            elW = elgetWidth(),
            elH = elgetHeight(),
            winX = wingetX(),
            winY = wingetY(),
            winW = wingetWidth(),
            winH = wingetHeight();
        if(elX>=winX+50 || elY>winY+100){ //左上角距离偏大
            elsetX(winX);
            elsetY(winY+45);
        }else if(elX+elW<winX+winW-50 || elY+elH<winY+winH-100){ //右下角距离偏大
            elsetX(winX-(elW-winW));
            elsetY(winY-(elH-winH));
        }else { //正常
            var left = (x-elgetX())(offset-1);  //当前鼠标位置x偏移量
            var top = (y-elgetY())(offset-1);  //当前鼠标位置y偏移量
            if(type){
                        winsetScrollX(wingetScrollX()+left,false);
                winsetScrollY(wingetScrollY()+top,false);
                }else{
                        winsetScrollX(wingetScrollX()-left/offset<=00:wingetScrollX()-left/offset,false);
                    winsetScrollY(wingetScrollY()-top/offset<=00:wingetScrollY()-top/offset,false);
                }
            }
    }
});

当鼠标移动到上时，显示一个虚线框，框内显示鼠标所在位置处的放大后的细节？
想真正地做到这个功能，有点难度。
鼠标指到小的时候，记住鼠标在的相对位置（比例）。实现简单。
根据上面的相对位置（比例），计算在大中对应的位置。实现简单。
在大对应位置截取一定高度和宽度的内容。实现稍难，需要能够读取图形文件。
把读取到的内容显示到一个方形的图形控件中，中心点随鼠标移动而移动。实现简单。
我的理解正确吧。实现过程中较难的部分，我也没做过，建议找找相关资料。

人类使用PS的比使用CAD和SU的多！
所以反PS的才是反人类！
在PS当按住空格键后，鼠标就会变成抓手工具。
PS抓手工具主要用于平移图象的。
在处理的时候，通常会放大后再处理，那时就只会显示一小块，这时，你可以按住空格，就会出现手形工具，你就可以方便的移动了，放开空格又恢复以前的工具了。文字工具除外快捷键是H,实时的快捷键是空格

//检测在chinamap_mc对象上发生的鼠标事件
chinamap_mcaddEventListener(MouseEventMOUSE_DOWN,Pickup);
chinamap_mcaddEventListener(MouseEventMOUSE_UP,Place);
//拖动影片剪辑
function Pickup(e:MouseEvent ):void {
ecurrentTargetstartDrag();

//拖动时显示阴影
var _shadow:DropShadowFilter = new DropShadowFilter();
_shadowdistance=10;
_shadowalpha=05;
_shadowcolor = 0xFFFFFF;
etargetfilters=[_shadow];
//鼠标的形状改为小手
Mousecursor = MouseCursorHAND ;
}
//停止拖动影片剪辑
function Place(e:MouseEvent):void {
ecurrentTargetstopDrag();
//将目标对象颜色设置为与源对象一致
etargetfilters=null;
if (etargetdropTarget is Shape){
etargetdropTargettransformcolorTransform=etargettransformcolorTransform;
}
//恢复鼠标的箭头形状
Mousecursor = MouseCursorARROW;
}

3个事件，
鼠标点击的时候mousedown
记录鼠标位置
鼠标移动mousemove事件
再记录位置
鼠标离开，mouseup
计算出位置差，跟的location属性改变位置

---