移动端多指操作二安卓篇 (兼容性处理)

不念不忘少年蓝@ 2023-06-15 06:38 11阅读 0赞

> 说在前面

上篇文章说了ios上的多指操作，那为什么不放在一起，把安卓的也一起讲了，因为安卓的存在兼容问题，**gesturestart，gesturechange等事件安卓上都是没有的**，这些只存在于ios设备上，所以这些事件安卓设备上无效，需要自己封装。

#### 第一步：定义一个匿名自执行函数 ####

匿名自执行函数的优势在前面的文章有，这里不多说。

(function (w) { 
    
    })(window);

#### 第二步: 基本架构实现 ####

(function (w) { 
    	//给w gesture 方法
    	w.gesture = function (ele,callback) { 
    		
    	}
    })();

#### 第三步: 添加封装的功能函数 ####

(function (w) { 
    	//给w gesture 方法
    	w.gesture = function (ele,callback) { 
    		 let isStart = false;
                //判断是否触发了触摸事件
                ele.addEventListener('touchstart',function (event) { 
                    if(event.touches.length >= 2){ 
                        isStart = true ;
                        //记录两个触点间的初始距离
                        this.startDistance =getDistance(event.touches[0],event.touches[1]);
        
                        //记录两个触点的初始角度
                        this.startDeg =getDeg(event.touches[0],event.touches[1]);
        
                        //判断是否传入回调，调用回调函数
                        if(callback && typeof callback['start'] === "function"){ 
                            callback['start']();
                        }
                    }
                });
                ele.addEventListener('touchmove',function (event) { 
                    //判断移动时屏幕上的触点个数
                    if(event.touches.length >= 2){ 
                        //计算两个触点的实时距离
                        const currDistance = getDistance(event.touches[0], event.touches[1]);
                        //记录两个触点的实时角度
                        const currDeg = getDeg(event.touches[0], event.touches[1]);
                        //计算实时距离与初始距离的比例，传入event的属性中
                        event.scale = currDistance / this.startDistance;
                        //计算实时角度与初始角度的差值，传入event的属性中
                        event.rotation = currDeg - this.startDeg;
        
                        //判断是否传入回调，调用回调函数
                        if(callback && typeof callback['change'] === "function"){ 
                            //将event传回去
                            callback['change'](event);
                        }
                    }
                });
                // 手指离开当前元素时，先判断当前的触点是否小于2，是否曾触发过touchstart事件
                ele.addEventListener('touchend',function (event) { 
                    if(event.touches.length < 2 && isStart){ 
                        //此时调用end回调
                        if (callback && typeof(callback['change']) === 'function') { 
                            callback['end']();
                        }
                        //重置isStart为false
                        isStart = false;
                    }
                });
        
                // 获取两个点之间的距离
                function getDistance(touch1,touch2) { 
                    const a = touch1.clientX - touch2.clientX;
                    const b = touch1.clientY - touch2.clientY;
                    //勾股定理，得出两点距离长度
                    return Math.sqrt(a * a + b * b);
                }
                // 获取两个触点的角度
                function getDeg(touch1,touch2) { 
                    const x = touch1.clientX - touch2.clientX;
                    const y = touch1.clientY - touch2.clientY;
                    //tan值 = 对边Y / 临边X
                    const radian = Math.atan2(y, x);
                    return radian * 180 / Math.PI;
                }
    	}
    })();

> 那么，这个库就已经封装好了，引入调用就ok

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
            <title>Document</title>
            <style>
                #con{ 
                    width: 300px;
                    height: 300px;
                    line-height: 100px;
                    text-align: center;
                    font-size: 48px;
                    color: black;
                    position: absolute;
                    top: 50px;
                    left: 50px;
                    background: greenyellow;
                }
            </style>
            <script src="./android.js"></script>
        </head>
        <body>
            <div id="con">
    
            </div>
            <script>
                var  con = document.getElementById('con');
                gesture(con,{ 
                    start:function () { 
                    // alert("触发了多指操作")
                    },
                    change:function (event) { 
                        alert("移动了")
                    }   
                })
            </script>
        </body>
    </html>

这里只是简单的处理，大家可以在此基础上再进行优化和新功能添加。

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

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

相关阅读

相关移动端开发兼容性问题汇总

*最新更新时间：2019年09月07日13:27:20* [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：移动端开发兼容性问题...

冷不防/ 2024年04月18日 13:30/ 0 赞/ 90 阅读

相关 6.安卓移动端开发

开发概览 ![在这里插入图片描述][cf0e8c0e8d68415aa1267b3cd54ffaf8.png] [Android官网][Android] > `提供

冷不防/ 2024年03月16日 21:51/ 0 赞/ 62 阅读

相关移动端兼容性问题

1、iOS10.2.1系统中，屏幕滚动的时候，元素的fixed定位会失效；解决方案：给要滚动的元素加上以下样式 .content｛ height

灰太狼/ 2023年06月20日 06:28/ 0 赞/ 14 阅读

相关移动端多指操作二安卓篇 (兼容性处理)

> 说在前面上篇文章说了ios上的多指操作，那为什么不放在一起，把安卓的也一起讲了，因为安卓的存在兼容问题，gesturestart，gesturechange等事件安卓上

不念不忘少年蓝@/ 2023年06月15日 06:38/ 0 赞/ 12 阅读

相关安卓IOS移动端兼容问题总结

之前一直是在维护项目，等到自己开发新项目的时候才发现各种问题，特此记录 1. 滚动条问题在ios上出现的滚动条滑动的时候会出现特别卡顿，不流畅的现象，解决办法是在有滚动

超、凢脫俗/ 2023年06月10日 14:22/ 0 赞/ 26 阅读

相关安卓、IOS兼容性

安卓、IOS兼容性 1、IOS下input默认样式(圆角、阴影) 解决方案 input { -webkit-appearance: none

ゝ一纸荒年。/ 2023年03月13日 06:14/ 0 赞/ 14 阅读

相关 Ios和安卓的兼容性（一）

1.iOS手机将数字自动识别为电话，变成蓝色，有下划线 <meta name="format-detection" content="telephone=n

╰半橙微兮°/ 2022年10月10日 12:56/ 0 赞/ 217 阅读

相关安卓 CSS absolute 兼容性问题

看代码，大家都懂得 <div style="position: relative"> <div style="position: absolute;

╰半橙微兮°/ 2022年09月25日 15:18/ 0 赞/ 217 阅读

相关移动端兼容性问题解决方案

移动端兼容性问题解决方案参考文章： [（1）移动端兼容性问题解决方案][1] （2）https://www.cnblogs.com/biglion/p/5985546.

川长思鸟来/ 2022年08月28日 04:53/ 0 赞/ 278 阅读

相关移动端兼容性问题记录

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 移动端兼容性问题记录 1. IOS12上并且使用

矫情吗；*/ 2022年01月14日 03:07/ 0 赞/ 289 阅读