ExtJs 完美实现图片在Window窗口中通过鼠标滚轮放大缩小以及点击拖拽

ExtJs 完美实现图片在Window窗口中通过鼠标滚轮放大缩小以及点击拖拽

以下内容需要一定的ExtJs以及Js知识基础
ExtJs 完美实现图片在Window中通过鼠标滚轮放大缩小以及点击拖拽

以下内容需要一定的ExtJs以及Js知识作为基础，不过我会尽量详细解释。

Ext.define('window.ViewPicWin',{//定义一个类继承window 所有配置都在该类里 包括图片地址等
	extend : 'Ext.window.Window',
	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的位置
        	lastMarginX: null,
        lastMarginY: null,
        	isMoving: false,//一个标识 作为判断当前鼠标是否按下状态 即图片拖拽中状态
        	offset : 1.2 //放大倍数 默认1.2倍 与原图放大缩小
	},
	initComponent : function(){
		var me = this;
		var minWidth = me.width-9; //用作图片在window里的最小宽
		var minHeight = me.height-54; //用作图片在window里的最小高（window的head大概54px）
		Ext.applyIf(me,{
			items : [{
				xtype : 'image',
				width : minWidth,
				height : minHeight,
				src : me.getSrc(),
				listeners : {
					afterrender: {
						fn : me.onAfterRender,//监听图片渲染完成事件
						scope : me
					}
				}
			}]
		})
		me.callParent(arguments);
	},
	
	onAfterRender : function(img, eOpts){
		var win = img.up('window');
		var minPicWidth = img.getWidth();
		var minPicHeight = img.getHeight();
		Ext.get(img.getId()).on({  //获得Ext.dom.Element 添加事件 这个区别于原生的element元素 这里是ExtJs自己包装的element元素
			'mousewheel': {   //监听鼠标滚轮事件(火狐浏览器叫DOMMouseScroll)，extjs增加监听事件前面没有on区别于普通js，他是on('事件名':{...})
				fn : function(e){
					e.preventDefault();
					var type = e.getWheelDelta();
					win.zoom(Ext.get(img.getId()),win.getOffset(),type>0?true:false,minPicWidth,minPicHeight,win,e.getX(),e.getY())
				}
			},
			'mousedown': {
				fn: function(e){
					document.getElementById(img.getId()).style.cursor = "move";
					e.stopEvent();
			       		win.setClickX(e.getX());
			        	win.setClickY(e.getY());
			        	win.setIsMoving(true);
				}
			},
			'mouseup': {
				fn: function(e){
					if(win.getIsMoving()){
						win.setClickX(null);
				         	win.setClickY(null);
				         	win.setIsMoving(false);
					}
				}
			},
			'mousemove': {
				fn: function(e){
					if(win.getIsMoving()){
						var left = e.getX()-win.getClickX();//x偏移量
						var top = e.getY()-win.getClickY();//y偏移量
						
						if( img.getX()>(win.getX()+50)
						    ||img.getY()>(win.getY()+100)){
						    document.getElementById(img.getId()).style.cursor = "not-allowed";
						    win.setIsMoving(false);
						    var task = new Ext.util.DelayedTask(function(){
						    	win.setScrollX(0,false);
		  						win.setScrollY(0,false);
						    	img.setX(win.getX()-5);
						   		img.setY(win.getY()+45);
						   		document.getElementById(img.getId()).style.cursor = "move";
						    });
						    task.delay(1000);
						}else if((img.getX()+img.getWidth())<(win.getX()+win.getWidth()-50)
						        ||img.getY()+img.getHeight()=winX+50 || elY>winY+100){ //左上角距离偏大
  	   		el.setX(winX);
  	  		el.setY(winY+45);
  		}else if(elX+elW