<div class="show-box" ref="rotate" @mousedown="moveImg" @mousewheel.prevent="rollImg($event,)">
<img :src="singleList.fileImgUrl" class="uploadimg" ref="img" :style="{transform:'scale('+multiples/100+') rotate('+rotate +'deg)'}"/>
</div>
<div class="img-plus" @click="toBIgChange()"><span class="tip">放大</span></div>
<div class="img-minus" @click="toSmallChange()"><span class="tip">缩小</span></div>
<div class="img-rotate" @click="toRotate()"><span class="tip">旋转</span></div>
</div>
以下内容需要一定的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的位置
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)
}
}
}
})
