|
鼠标滚轮缩放图片，双指移动缩放图片
鼠标移动拖动图片，单指移动拖动图片
Vue.component('imgControler', {
props:{
imgsrc: String
},
data: () => {
return {
isWin: isWin,
imgscale: 3,
imgLeft: 0,
imgTop: 0,
mOnDown: false,
mLastPosition: {x:0,y:0},
touchFirst: true,
isTwoTouch: false,
touchTwoFirst: true,
touchLastDistance: 0,
tLastPositon: {x:0,y:0},
}
},
template: `
<div class="img-c"
style='width:100%;height:100%;display:flex;justify-content:center;align-items:center;'
@mousedown.prevent='Down'
@mousemove.prevent='Move'
@mouseup.prevent='Up'
@touchmove.prevent='Move'
@touchend.prevent='Up'
>
<img :src='imgsrc' :style='{transform:"translate(" + imgLeft + "px," + imgTop + "px)" + " scale(" + imgscale + ")"}'></img>
</div>
`,
methods:{
Down(e){
this.mOnDown = true;
this.mLastPosition.x = e.pageX;
this.mLastPosition.y = e.pageY;
},
Move(e){
if (isWin) {
if (this.mOnDown) {
let currX = e.pageX,
currY = e.pageY;
let deltaX = currX - this.mLastPosition.x, deltaY = currY - this.mLastPosition.y;
this.imgLeft += deltaX;
this.imgTop += deltaY;
this.mLastPosition.x = currX;
this.mLastPosition.y = currY;
}
} else {
let touches = e.changedTouches;
if (touches.length === 1) {
if (this.isTwoTouch) {
return;
}
if (this.touchFirst) {
this.tLastPositon.x = touches[0].pageX;
this.tLastPositon.y = touches[0].pageY;
this.touchFirst = false;
} else {
let deltaX = touches[0].pageX - this.tLastPositon.x;
let deltaY = touches[0].pageY - this.tLastPositon.y;
this.imgLeft += deltaY;
this.imgTop -= deltaX;
this.tLastPositon.x = touches[0].pageX;
this.tLastPositon.y = touches[0].pageY;
}
} else if (touches.length === 2) {
this.isTwoTouch = true;
let t1 = {
x: touches[0].pageX,
y: touches[0].pageY
},
t2 = {
x: touches[1].pageX,
y: touches[1].pageY
};
if (this.touchTwoFirst) {
this.touchLastDistance = this.calDistance(t1, t2);
this.touchTwoFirst = false;
} else {
let currDistance = this.calDistance(t1, t2);
let factor = 0.1 * (currDistance - this.touchLastDistance);
this.setScale(factor);
touchLastDistance = currDistance;
}
}
}
},
calDistance(a, b) {
return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
},
Up(e){
this.mOnDown = false;
this.touchFirst = true;
this.touchTwoFirst = true;
this.isTwoTouch = false;
Object.assign(this.mLastPosition, {x: 0,y: 0});
this.touchLastDistance = 0;
},
setScale(delta){
let imgscale = this.imgscale;
imgscale += delta / 10;
this.imgscale = imgscale < 0.2 ? 0.2 : (imgscale > 6 ? 6 : imgscale);
}
},
created(){
},
mounted(){
let self = this;
if (window.addEventListener)//FF,火狐浏览器会识别该方法
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;//W3C
//统一处理滚轮滚动事件
function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
} else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
delta = -event.detail/3;
}
if (delta)
self.setScale(delta);
}
},
updated(){
// console.log('updated');
}
})
|