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

简介: 笔记

上篇文章说了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>

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


目录
相关文章
|
1月前
|
Java 数据库 Android开发
【专栏】Kotlin在Android开发中的多线程优化,包括线程池、协程的使用,任务分解、避免阻塞操作以及资源管理
【4月更文挑战第27天】本文探讨了Kotlin在Android开发中的多线程优化,包括线程池、协程的使用,任务分解、避免阻塞操作以及资源管理。通过案例分析展示了网络请求、图像处理和数据库操作的优化实践。同时,文章指出并发编程的挑战,如性能评估、调试及兼容性问题,并强调了多线程优化对提升应用性能的重要性。开发者应持续学习和探索新的优化策略,以适应移动应用市场的竞争需求。
|
1月前
|
Java Android开发
Android系统 获取用户最后操作时间回调实现和原理分析
Android系统 获取用户最后操作时间回调实现和原理分析
45 0
|
1月前
|
Linux Android开发
测试程序之提供ioctl函数应用操作GPIO适用于Linux/Android
测试程序之提供ioctl函数应用操作GPIO适用于Linux/Android
27 0
|
14天前
|
XML API 开发工具
Android Bitmap 加载与像素操作
Android Bitmap 加载与像素操作
13 2
|
1月前
|
编解码 人工智能 测试技术
安卓适配性策略:确保应用在不同设备上的兼容性
【4月更文挑战第13天】本文探讨了提升安卓应用兼容性的策略,包括理解平台碎片化、设计响应式UI(使用dp单位,考虑横竖屏)、利用Android SDK的兼容工具(支持库、资源限定符)、编写兼容性代码(运行时权限、设备特性检查)以及优化性能以适应低端设备。适配性是安卓开发的关键,通过这些方法可确保应用在多样化设备上提供一致体验。未来,自动化测试和AI将助力应对设备碎片化挑战。
|
1月前
|
存储 开发工具 Android开发
Android系统 权限组管理和兼容性
Android系统 权限组管理和兼容性
30 0
|
1月前
|
XML Java API
Android 浅度解析:系统框架层修改,编译,推送相关操作
Android 浅度解析:系统框架层修改,编译,推送相关操作
52 0
|
10月前
|
数据库 Android开发 数据库管理
Android使用Room操作SQLite数据库让其变得无比高效和简洁(进一步完善用RecyclerView显示数据库中的数据)
Android使用Room操作SQLite数据库让其变得无比高效和简洁(进一步完善用RecyclerView显示数据库中的数据)
56 0
|
1月前
|
Android开发
[Android]视图的控触操作-MotionEvent
[Android]视图的控触操作-MotionEvent
40 0
|
1月前
|
算法 Java 数据安全/隐私保护
Android App开发之利用JNI实现加密和解密操作实战(附源码 简单易懂)
Android App开发之利用JNI实现加密和解密操作实战(附源码 简单易懂)
108 0