js移动端双指缩放和旋转

最新推荐文章于 2024-04-30 11:43:42 发布

金大光

最新推荐文章于 2024-04-30 11:43:42 发布

阅读量2.2w

点赞数 9

分类专栏： JavaScript[0] 文章标签：双指操作 javascript 移动端缩放旋转

本文链接：https://blog.csdn.net/qq_17757973/article/details/54604625

版权

JavaScript[0] 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

在iOS上有一组双指事件gesturestart、gesturechange、gestureend
gesturestart触发条件是当屏幕上有两根或以上手指并且第二根手指放在当前元素上
当两根手指移动时触发gesturechange，可以得到两个值
event.scale 缩放比例
event.rotation 旋转角度
但是这一组事件只能在iOS上使用，安桌上是没有的
在安卓上需要用touchstart、touchmove、touchend去实现
这里写图片描述
利用第一组两个点的x轴、y轴坐标求出两个点之间的距离，在得到第二组点的距离相除，得到缩放比例
利用第一组点的夹角与第二组点的夹角相减得到旋转角度
下面是我写的一个方法

function setGesture(el){
    var obj={}; //定义一个对象
    var istouch=false;
    var start=[];
    el.addEventListener("touchstart",function(e){
        if(e.touches.length>=2){  //判断是否有两个点在屏幕上
            istouch=true;
            start=e.touches;  //得到第一组两个点
            obj.gesturestart&&obj.gesturestart.call(el); //执行gesturestart方法
        };
    },false);
    document.addEventListener("touchmove",function(e){
        e.preventDefault();
        if(e.touches.length>=2&&istouch){
            var now=e.touches;  //得到第二组两个点
            var scale=getDistance(now[0],now[1])/getDistance(start[0],start[1]); //得到缩放比例，getDistance是勾股定理的一个方法
            var rotation=getAngle(now[0],now[1])-getAngle(start[0],start[1]);  //得到旋转角度，getAngle是得到夹角的一个方法
            e.scale=scale.toFixed(2);
            e.rotation=rotation.toFixed(2);
            obj.gesturemove&&obj.gesturemove.call(el,e);  //执行gesturemove方法
        };
    },false);
    document.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));
};
function getAngle(p1, p2) {
    var x = p1.pageX - p2.pageX,
        y = p1.pageY- p2.pageY;
    return Math.atan2(y, x) * 180 / Math.PI;
};

调用方法

    var box=document.querySelector("#box");
    var boxGesture=setGesture(box);  //得到一个对象
    boxGesture.gesturestart=function(){  //双指开始
        box.style.backgroundColor="yellow";
    };
    boxGesture.gesturemove=function(e){  //双指移动
        box.innerHTML = e.scale+"<br />"+e.rotation;
        box.style.transform="scale("+e.scale+") rotate("+e.rotation+"deg)";//改变目标元素的大小和角度
    };
    boxGesture.gestureend=function(){  //双指结束
        box.innerHTML="";
        box.style.cssText="background-color:red";
    };