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()<win.getY()+win.getHeight()-100){
						    document.getElementById(img.getId()).style.cursor = "not-allowed";
						    win.setIsMoving(false);
						    var task = new Ext.util.DelayedTask(function(){
								win.setScrollX(img.getWidth(),false);
		  						win.setScrollY(img.getHeight(),false);
						    		img.setX(win.getX()-(img.getWidth()-win.getWidth()));
						    		img.setY(win.getY()-(img.getHeight()-win.getHeight()));
						    		document.getElementById(img.getId()).style.cursor = "move";
						    });
						    task.delay(1000);
						}else {
						    img.setX(win.getLastMarginX()+left);
						    img.setY(win.getLastMarginY()+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 = el.getWidth();  
		var height = el.getHeight();  
		var nwidth = type ? (width * offset) : (width / offset);  
		var nheight = type ? (height * offset) : (height / offset); 
		el.setWidth(nwidth<=mw ? mw : nwidth);
		el.setHeight(nheight<=mh ? mh : nheight);
		//修正参数
		var elX = el.getX(),
			elY = el.getY(),
			elW = el.getWidth(),
			elH = el.getHeight(),
			winX = win.getX(),
			winY = win.getY(),
			winW = win.getWidth(),
			winH = win.getHeight();
		
		if(elX>=winX+50 || elY>winY+100){ //左上角距离偏大
  	   		el.setX(winX);
  	  		el.setY(winY+45);
  		}else if(elX+elW<winX+winW-50 || elY+elH<winY+winH-100){ //右下角距离偏大
  	   		el.setX(winX-(elW-winW));
  	  		el.setY(winY-(elH-winH));
  		}else { //正常
  	   		var left = (x-el.getX())*(offset-1);  //当前鼠标位置x偏移量
   			var top = (y-el.getY())*(offset-1);  //当前鼠标位置y偏移量
  	   		if(type){
	      	    	    win.setScrollX(win.getScrollX()+left,false);
		  	    win.setScrollY(win.getScrollY()+top,false);
	      		}else{
	      	    	    win.setScrollX(win.getScrollX()-left/offset<=0?0:win.getScrollX()-left/offset,false);
		    	    win.setScrollY(win.getScrollY()-top/offset<=0?0:win.getScrollY()-top/offset,false);
	       		}
  	     	}
  	}
});