项目需求说是附件打开文档查看的时候,需要通过手势缩放来查看文档内容。作为新人小白,没啥思路,第一个想法就是找度娘。在网上查过很快就找到了想关的内容,看过后,也实验了一番,总是会有点小问题,今天在这也就是做一个记录整理下。
直接贴代码:
// 图片的缩放
window.onload = function() {
function setGesture(el){
var obj = {}; //定义一个对象
var istouch = false;
var start = [];
//监听touchstart事件
el.addEventListener("touchstart",function(e){
if(e.touches.length >= 2){ //判断是否有两个点在屏幕上
istouch = true;
start = e.touches; //得到第一组两个点
obj.gesturestart && obj.gesturestart.call(el); //执行gesturestart方法
};
},false);
//监听touchmove事件
el.addEventListener("touchmove",function(e){
if(e.touches.length >= 2 && istouch){
var now = e.touches; //得到第二组两个点
var scale = getDistance(now[0],now[1])/getDistance(start[0],start[1]); //得到缩放比例,getDistance是勾股定理的一个方法
e.scale = scale.toFixed(2);
obj.gesturemove && obj.gesturemove.call(el,e); //执行gesturemove方法
}
},false);
//监听touchend事件
el.addEventListener("touchend",function(e){
if(istouch){
istouch=false;
obj.gestureend && obj.gestureend.call(el); //执行gestureend方法
};
},false);
return obj;
};
//两点的距离
function getDistance(p1, p2) {
var x = p2.pageX - p1.pageX,
y = p2.pageY - p1.pageY;
return Math.sqrt((x * x) + (y * y));
};
//方法调用(这里是根据需要来实现调用)
var imgpreview = document.getElementById("viewer");
//有时候会出现平布大小不兼容,这边做一个兼容处理
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
imgpreview.style.width = w+"px";
imgpreview.style.height = h+"px";
var boxGesture = setGesture(imgpreview);
boxGesture.gesturemove=function(e){ //双指移动
imgpreview.style.transform="scale("+e.scale+")";//改变目标元素的大小
if (e.scale > 3) {
imgpreview.style.transform="scale(4)";
}
};
}
gesturestart、gesturemove、gestureend在网上看到说是这些方法对ios和安卓能够兼容,就也加上了,不过具体在ios上展示是什么样的我还不知道,目前是只测试了安卓手机的。
这个方法我是在原生前端页面作为一个js方法调用的,也可以根据vue语法进行改造,不过在vue中我没有添加ios的兼容方法,对vue中引入这个方法还不知道怎么弄,会报错所以我就放弃了。
贴一下我在vue中用到的,跟上面的方法一样,只是写法转换一下