封装安卓下的多指操作的旋转和缩放

使用:setGesture(init);

参数说明:init是一个对象

init:{

el:element//元素, (必填)
start:fn//gesturestart要做的操作,(可选)
change:fn//gesturechange要做的操作,(可选)
end:fn//gestureend要做的操作(可选)
}
补充小知识:

勾股定理:已知直角三角形的两条直角边,求斜边的长度

ok:看代码吧:

function getDis(point1,point2){//用于计算两个手指之间的直线距离  
    var x = point2.x - point1.x;
    var y = point2.y - point1.y;
    return Math.sqrt(x*x + y*y);
}
// Math.atan2(y,x) 斜率 由一条直线与X轴正方向所成角的正切 返回值弧度  
// 角度转弧度: deg*Math.PI/180  
//弧度转角度: rad*180/Math.PI   
function getDeg(point1,point2){//用于计算两个两个手指之间形成的直线与x轴的夹角  
    var x = point2.x - point1.x;
    var y = point2.y - point1.y;
    return Math.atan2(y,x)*180/Math.PI;
}
function setGesture(init){
    var el = init.el;
    var isGestrue = false;
    var startPoint = [];
    if(!el){//如果没有传入元素,则不执行下面的操作  
        return;
    }
    el.addEventListener('touchstart', function(e) {
        if(e.touches.length >= 2){//当屏幕上的手指的个数大于等于2的时候执行类似多指操作中的start事件  
            isGestrue = true; //记录当前用户触发了gesture  
            startPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};//记录第一个手指的坐标  
            startPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY}; //记录第二个手指的坐标  
            init.start&&init.start.call(el,e);
        }
    });
    el.addEventListener('touchmove', function(e) {
        if(isGestrue&&e.touches.length >= 2){
            var nowPoint = [];
            nowPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};
            nowPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY};
            var startDis = getDis(startPoint[0],startPoint[1]);//计算start时两个手指之间的直线距离  
            var nowDis = getDis(nowPoint[0],nowPoint[1]);//计算手指移动时连个手指之间的距离  
            var startDeg = getDeg(startPoint[0],startPoint[1]);计算start时两个手指形成的直线与x轴的夹角
            var nowDeg = getDeg(nowPoint[0],nowPoint[1]);计算手指移动时两个手指形成的直线与y轴的夹角
            e.scale = nowDis/startDis;//计算缩放比  
            e.rotation = nowDeg - startDeg;//计算旋转角  
            init.change&&init.change.call(el,e);
        }
    });
    el.addEventListener('touchend', function(e) {
        if(isGestrue){
            if(e.touches.length < 2 || e.targetTouches.length < 1){
                isGestrue = false;
                init.end&&init.end.call(el,e);
            }
        }
    });  
}



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值