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

一时失言乱红尘 2022-05-23 08:44 185阅读 0赞

使用：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 条评论，185人围观）

还没有评论，来说两句吧...

相关阅读

相关安卓屏幕旋转

代码设置竖向旋转,横向拿着手机点击跳转之后先先横向显示界面然后自动旋转为竖向解决方法清单文件里Activity添加 android:screenOrientation="n

梦里梦外;/ 2023年10月05日 11:43/ 0 赞/ 39 阅读

相关安卓实现图片缩放、压缩、裁剪

安卓实现图片缩放、压缩、裁剪 1、缩放 2、压缩 3、裁剪 4、项目中开始的时候：Bitmap是个什么东西？后面：真香！ 1、缩放

Dear 丶/ 2023年07月13日 13:46/ 0 赞/ 57 阅读

相关安卓用手指触碰屏幕缩放和移动，三指触碰屏幕旋转图片

[原文链接][Link 1] package com.multitouch.example; import android.app.Activity

电玩女神/ 2022年09月26日 01:51/ 0 赞/ 199 阅读

相关 OpenCV-Python图像的缩放、翻转和旋转

图像的缩放 opencv中对[图像进行放缩][Link 1]有两种方式可以实现，一种是使用指定尺寸放缩；一种是使用缩放比例放缩。指定尺寸 `cv2.

喜欢ヅ旅行/ 2022年09月16日 04:58/ 0 赞/ 409 阅读

相关安卓实现照片缩放[不旋转]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools

缺乏、安全感/ 2022年09月02日 12:46/ 0 赞/ 205 阅读

相关安卓Bitmap实现手势缩放、旋转、拖动

1、创建一个类MyImageView import android.content.Context; import android.graphics.Ma

妖狐艹你老母/ 2022年09月02日 12:00/ 0 赞/ 348 阅读

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

使用：setGesture(init); 参数说明：init是一个对象 init:\{ el:element//元素, (必填) start:fn//gestures

一时失言乱红尘/ 2022年05月23日 08:44/ 0 赞/ 186 阅读

相关多指操作的旋转和缩放（安卓版+mac版的）

想要在手机上实现多指操作的旋转和缩放，我们知道可以使用gesturestart、gestureend、gesturechange三个事件实现，但是，这三个事件只有在ios下才有

朱雀/ 2022年05月23日 08:42/ 0 赞/ 182 阅读

相关 Android 安卓动画属性动画 - 缩放动画

引入属性动画的出现，弥补了补间动画的不足之处，补间动画，只是改变了表面上的东西，但是其中属性并未改变，而属性动画相反，改变了表面上的东西，并且也更改了其属性。 ---

深藏阁楼爱情的钟/ 2022年05月14日 06:17/ 0 赞/ 319 阅读

相关 Android 安卓动画补间动画 - 缩放动画

补间动画之缩放动画实现效果:点击按钮后实现按钮放大效果补间动画概念:就是从一个画面过渡到另一个画面时让人看到中间动画效果！ -------------------

淡淡的烟草味﹌/ 2022年05月14日 02:26/ 0 赞/ 363 阅读