移动端多指事件

最新推荐文章于 2024-07-15 12:53:41 发布
最新推荐文章于 2024-07-15 12:53:41 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： 移动端 多指事件
ios下的多指事件
        ios下的默认api.

            多指事件   ==>   gesturestart
                             gesturechange
                             gestureend

        e.scale  ===> 缩放的倍数         相乘   eg: 0.5*0.2
        e.rotation ===> 旋转的度数         相加   eg: 75deg+45deg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name='viewport' content='user-scalable=no,width=device-width'>
    <title>ios多指事件</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
        #box {width: 100px; height: 100px; background: #ddd;}
    </style>
</head>
<body>
    <div id="box"></div>
    <script src='./js/transform.js'></script>
    <script type="text/javascript">
        /*
            ios下的默认api.
                多指事件   ==>   gesturestart
                                 gesturechange
                                 gestureend

            e.scale  ===> 缩放的倍数         相乘   eg: 0.5*0.2
            e.rotation ===> 旋转的度数         相加   eg: 75deg+45deg.

            transform残影问题.     添加translateZ(0)

         */
         document.addEventListener('touchstart',function(e){
            var e = e || window.event;
            e.preventDefault();
         })
         box.addEventListener('gesturestart',touch,false);
         box.addEventListener('gesturechange',touch,false);
         box.addEventListener('gestureend',touch,false);
         var startS = 1,
             startR = 0;
         // cssTransform(box,'scale','0.5');
         function touch(e) {

             switch(e.type){
                case 'gesturestart':
                    startS = cssTransform(box,'scale');
                    startR = cssTransform(box,'rotate');
                    break;
                case 'gesturechange':
                    var nowS = e.scale;
                    var nowR = e.rotation;
                    cssTransform( box,'scale', nowS*startS);
                    cssTransform( box,'rotate', nowR+startS);
                    break;
                case 'gestureend':
                    break;
             }
         }

    </script>


</body>
</html>

这里写图片描述

Android下的多指事件
需要封装

Android下的多指事件封装,判断是否是多指事件.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Android下的多指事件封装</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
        #box {width: 100px; height: 100px; background: #ddd;}
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        /*
            touches.
            判断是不是多指事件.
         */
         var callback = {
            start(){
                this.style.background = 'red';
            },
            move(){
                this.innerHTML = num++;
            },
            end(){
                this.style.background = '';
            }
         },
         // 开关
         isGesture = false,
         num = 0;
         gesture(box,callback);
        function gesture(obj,callback){
            obj.addEventListener('touchstart',function (e) {
                var touches = e.touches;
                if(touches.length >= 2){ //是否为多指.2
                    isGesture = true;
                    callback.start&&callback.start.call(this);
                };
            })
            obj.addEventListener('touchmove',function (e) {
                var touches = e.touches;
                if(touches.length >= 2 && isGesture){ //是否为多指.2
                    isGesture = true;
                    callback.move&&callback.move.call(this);
                };
            })
            obj.addEventListener('touchend',function (e) {
                if(isGesture) {
                    callback.end&&callback.end.call(this);
                }
                isGesture = false;
            })
        }
    </script>
</body>
</html>
Android下的多指事件scale原理
scale = 移动过的两指距离  / 按下时两指距离

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Android下的多指事件scale</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
        #box {width: 100px; height: 100px; background: #ddd;}
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        /*
            touches.
            判断是不是多指事件.
         */
         var callback = {
                start(){
                    this.style.background = 'red';
                },
                move(e){
                    // 之前的比例.  需要添上系数. 变化大.0.1
                    var oddS = cssTransform( this,'scale' );
                    cssTransform( this,'scale',e.scale*oddS );
                },
                end(){
                    this.style.background = '';
                }
             },
            // 开关
             isGesture = false,
             num = 0,
             startDis = 0;
        function getPiontScale(Piont1,Piont2){
            // 勾股定理.
            var x = Piont1.pageX - Piont2.pageX,
                y = Piont1.pageY - Piont2.pageY;
            return Math.sqrt(Math.pow(x, 2) + Math.pow(y,2));
        }
        gesture(box,callback);
        function gesture(obj,callback){
            obj.addEventListener('touchstart',function (e) {
                var touches = e.touches;
                if(touches.length >= 2){ //是否为多指.2
                    isGesture = true;
                    // 两点距离.
                    startDis = getPiontScale(touches[0],touches[1]);
                    callback.start&&callback.start.call(this);
                };
            })
            obj.addEventListener('touchmove',function (e) {
                var touches = e.touches;
                if(touches.length >= 2 && isGesture){ //是否为多指.2
                    isGesture = true;
                    // 缩放后两指的距离
                    var nowDis = getPiontScale(touches[0],touches[1]);
                    // 比例.
                    e.scale = nowDis/startDis;
                    callback.move&&callback.move.call(this,e);
                };
            })
            obj.addEventListener('touchend',function (e) {
                if(isGesture) {
                    callback.end&&callback.end.call(this);
                }
                isGesture = false;
            })
        }
    </script>
</body>
</html>
Android下的多指事件rotation原理
旋转的角度 = 两个角度的差值(同一象限.)

利用反正弦 知道x,y ==>求出弧度 再转换为角度.

这里写图片描述

                // 之前的比例.  需要添上系数. 变化大.0.1
                var oddS = cssTransform( this,'scale' ),
                    oddR = cssTransform(this,'rotate');
                // 缩放相乘
                cssTransform( this,'scale',e.scale*oddS );
                // 旋转相加
                cssTransform( this,'rotate',e.rotation + oddR );

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Android下的多指事件rotation</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
        #box {width: 100px; height: 100px; background: #ddd;}
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        /*
            touches.
            判断是不是多指事件.
         */
         var callback = {
                start(){
                    this.style.background = 'red';
                },
                move(e){
                    // 之前的比例.  需要添上系数. 变化大.0.1
                    var oddS = cssTransform( this,'scale' ),
                        oddR = cssTransform(this,'rotate');
                    // 缩放相乘
                    cssTransform( this,'scale',e.scale*oddS );
                    // 旋转相加
                    cssTransform( this,'rotate',e.rotation + oddR );
                },
                end(){
                    this.style.background = '';
                }
             },
            // 开关
             isGesture = false,
             num = 0,
             start = {
                distance: 0,
                deg : 0
             };
        function getPiontScale(Piont1,Piont2){
            // 勾股定理.
            var x = Piont1.pageX - Piont2.pageX,
                y = Piont1.pageY - Piont2.pageY;
            return Math.sqrt(Math.pow(x, 2) + Math.pow(y,2));
        }
        // 弧度转换为角度
        function getDeg(Piont1,Piont2){
            var x = Piont1.pageX - Piont2.pageX,
                y = Piont1.pageY - Piont2.pageY;
            // 反正弦tan
            return Math.atan2(y,x)*180/Math.PI;
        }
        gesture(box,callback);
        function gesture(obj,callback){
            obj.addEventListener('touchstart',function (e) {
                var touches = e.touches;
                if(touches.length >= 2){ //是否为多指.2
                    isGesture = true;
                    // 两点距离.
                    start.distance = getPiontScale(touches[0],touches[1]);
                    start.deg = getDeg(touches[0],touches[1]);
                    callback.start&&callback.start.call(this);
                };
            })
            obj.addEventListener('touchmove',function (e) {
                var touches = e.touches;
                if(touches.length >= 2 && isGesture){ //是否为多指.2
                    isGesture = true;
                    // 缩放后两指的距离
                    var nowDis = getPiontScale(touches[0],touches[1]),
                        nowDeg = getPiontScale(touches[0],touches[1]);
                    // 比例.
                    e.scale = nowDis/start.distance;
                    // 旋转的角度 = 两个角度的差值(同一象限.)
                    e.rotation = nowDeg - start.deg;
                    callback.move&&callback.move.call(this,e);
                };
            })
            obj.addEventListener('touchend',function (e) {
                if(isGesture) {
                    callback.end&&callback.end.call(this);
                }
                isGesture = false;
            })
        }
    </script>
</body>
</html>
多指缩放,旋转实例

封装好的.geture.js


/*
    多指事件.gesture(obj,callback)


    var callback = {
        start(e){
        },
        move(e){

        },
        end(e){
        }
     }
 */

function getPiontScale(Piont1,Piont2){
    // 勾股定理.
    var x = Piont1.pageX - Piont2.pageX,
        y = Piont1.pageY - Piont2.pageY;
    return Math.sqrt(Math.pow(x, 2) + Math.pow(y,2));
}
// 弧度转换为角度
function getDeg(Piont1,Piont2){
    var x = Piont1.pageX - Piont2.pageX,
        y = Piont1.pageY - Piont2.pageY;
    // 反正弦tan   对边/临边
    return Math.atan2(y,x)*180/Math.PI;
}
function gesture(obj,callback){
    // 开关
    var isGesture = false,
    //初始值
     start = {
            distance: 0,
            deg : 0
     };
    obj.addEventListener('touchstart',function (e) {
        e.stopPropagation();
        var touches = e.touches;
        if(touches.length >= 2){ //是否为多指.2
            isGesture = true;
            // 两点距离.
            start.distance = getPiontScale(touches[0],touches[1]);
            start.deg = getDeg(touches[0],touches[1]);
            callback.start&&callback.start.call(this);
        };
    })
    obj.addEventListener('touchmove',function (e) {
        var touches = e.touches;
        if(touches.length >= 2 && isGesture){ //是否为多指.2
            // 缩放后两指的距离
            var nowDis = getPiontScale(touches[0],touches[1]),
                nowDeg = getPiontScale(touches[0],touches[1]);
            // 比例.
            e.scale = nowDis/start.distance;
            // 旋转的角度 = 两个角度的差值(同一象限.)
            e.rotation = nowDeg - start.deg;
            callback.move&&callback.move.call(this,e);
        };
    })
    obj.addEventListener('touchend',function (e) {
        if(isGesture) {
            callback.end&&callback.end.call(this);
        }
        isGesture = false;
    })
}

将图片进行缩放旋转

         // 防止残影.
        cssTransform(Canvas,'translateZ',0);
        // 添加多指事件;
        // 初始值
        var startS = 1,
            startR = 0;
        gesture(bg,{
            start(e){
                // 获取
                startS = cssTransform(Canvas,'scale');
                startR = cssTransform(Canvas,'rotate');
            },
            move(e){
                var scaleVal = stratS*e.scale,
                    rotateVal = startR+e.rotation;
                // 缩放边界值.
                if(scaleVal > 1.5){
                    scaleVal = 1.5;
                }else if(scaleVal < 0.5){
                    scaleVal = 0.5;
                }
                cssTransform(Canvas,'scale',scaleVal);
                cssTransform(Canvas,'rotate',rotateVal);
            },
            end(e){

            }
        });

界面

这里写图片描述

维克多噗噗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Unity事件重写——外加移动端多指触控并解决冲突
qq_51147038的博客
12-02 1053
萌新报道 首先放上事件重写脚本 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class EventTriggerManager : EventTrigger//需继承自EventTrigger { //重写事件脚本 public static new GameObject gameObject;//触发
移动端的多指事件以及原生JS封装通用多指事件
weixin_37632943的博客
07-18 664
移动端的多指事件以及用原生JS封装通用多指事件 IOS的多指事件 事件类型： gesturestart: 手指触碰当前元素，屏幕上有两个或者两个以上的手指 gesturechange:手指触碰当前元素，屏幕上有两个或者两个以上的手指位置在发生移动。 gestureend:在gesturestart后, 屏幕上只剩下两根以下（不包括两根）的手指 Event额外新增的属性 属性 rotation :...
H5移动端开发基础（四）多指操作、案例-相册
yangwei2048的博客
12-11 1176
多指操作、案例-相册多指操作旋转缩放实现安卓多指事件案例-相册 多指操作 // gesturestart：手指触碰元素，屏幕上有两个或两个以上的手指 oBox.addEventListener('gesturestart', function(e){ // TODO ... }, false); // gesturechange：手指触碰元素，屏幕上有两个或两个以上的手指，位置在发生移动 oBo...
javascript七基础学习系列二千零四十八：手势事件
最新发布
m0_68635815的博客
07-15 411
一个手指放到屏幕上时，gesturestart 事件会首先触发，然后紧接着触发这个手指的touchstart。如果两个手指或其中一个手指移动，则会触发gesturechange 事件。与触摸事件类似，每个手势事件的event 对象都包含所有标准的鼠标事件属性：bubbles、与触摸事件的例子一样，以上代码简单地将每个事件对应到一个处理函数，然后输出每个事件的信息。只有在两个手指同时接触事件接收者时，这些事件才会触发。幕，就会触发gestureend 事件，紧接着触发该手指的touchend 事件。
移动端多指操作方法封装
binginsist的博客
02-22 1130
Document #box { margin: 100px auto; width: 100px; height: 100px; background-color: red; } document.addEventListener('touchstart', function(e) { e.preventDefault(); }); window.onload = fun
android 多个手指同时点击,处理多点触控手势  |  Android 开发者  |  Android Developers...
weixin_33392336的博客
05-25 1171
多点触控手势是指多个指针(手指)同时轻触屏幕。这节课介绍了如何检测涉及多个指针的手势。请参阅以下相关资源：跟踪多个指针当多个指针同时轻触屏幕时，系统会生成以下触摸事件：您可以通过每个指针的索引和 ID 跟踪索引：ID：每个指针还有一个 ID 映射，该映射在触摸事件之间保持不变，让您能够在整个手势中跟踪单个指针。单个指针在动作事件中的显示顺序是未定义的。因此，不同事件中的触控点索引可能会不一样，但只...
移动端手指放大缩小插件与js
10-19
移动端手指放大缩小功能是指利用触摸屏的多点触控技术实现用户通过手势控制屏幕上内容的缩放级别。该功能在移动设备上尤为重要，因为它可以提高用户在浏览网页或使用应用程序时的体验。为了实现这一点，开发者经常...
移动端js触摸事件详解
10-21
多点触摸事件是移动端触摸事件中的高阶用法，它允许开发者处理多个触摸点的信息。在PC上，由于缺少触摸输入设备，很难测试多点触摸功能。但是，如果开发者拥有像AppMacBook这样的现代设备，那么可以在桌面环境中模拟...
js移动端事件基础及常用事件库详解
10-19
本文从移动端事件基础讲起，详细介绍了移动事件和PC端事件的区别，以及如何处理移动端特有的TOUCH事件和GESTURE事件。针对移动端click事件的延迟问题，提供了通过TOUCH事件模拟click和使用fastclick.js库的解决方案...
移动端基础事件总结与应用
08-31
在移动端开发中，事件处理是构建交互式应用的关键部分。本文将深入探讨移动端的基础事件，主要包括触摸事件和设备加速度事件。了解并掌握这些事件，能够帮助开发者创建更丰富的用户体验。 1. 触摸事件 触摸事件是...
Android中多点触控以及手势的基础知识
宋金时的专栏
03-11 1万+
现在一般的android手机都会使用电容触摸屏，所以基本上都会支持多点触控，同样在android系统中应用程序可以使用多点触控的事件来完成各种手势和场景需求，下面简单讲一下如何使用多点触控： 1、相关接口和事件介绍 MotionEvent.getAction() 对于单点触控，我们由MotionEvent.getAction()就可以得到以下几种事件：ACTION_DOWN、ACTION_UP等 MotionEvent.ACTION_MASK 而对于多点触控，我们需要由MotionEvent.g
android触摸测试，支持多指同时划动
04-13
android触摸测试，支持多指同时划动，主要用于安卓系统下对触摸驱动的测试，代码中也加了多指坐标点的打印，可以帮助排查触摸问题。当然安卓的开发者选项中也有指针的显示界面，但自己写的代码可以灵活增加一些日志对排查问题更简单。本次是因为有个项目触摸划动轨迹经常飞掉，所以写下这个测试代码，最终看日志查到是触摸驱动上报的点有问题。
js 双指缩放，双指放大，双击放大，移动端双指放大缩小
07-11
双指缩放，图片双指缩放，在图片上有固定的坐标，并且点击固定坐标有相对应的事件触发，demo
移动端双指事件不稳定_吃鸡双指、三指、四指都怎么设置，一看你就明白了
weixin_39538451的博客
11-29 566
点击上方蓝色字关注我们~"吃鸡这款游戏大家都不陌生，从发布到现在这款游戏一直热度很高。这款操作简单的游戏一直深受各种手游玩家的热爱，特别是各种各样的游戏主播，他们玩起来我们看着他们那行云流水般的操作都叹为观止。一般他们这种手游的职业玩家都是多指位操作，下面小编个大家分别带来双指、三指、四指的简单教学，赶快来学学吧。1双指这个操作大家都不会陌生因为我们刚玩游戏的时候游戏的键位就是适合双指的...
android15种手势
qq_39636838的博客
02-25 3419
1、单次触击(Touch)： 一只手指按下，提起2、双次触击(Double Touch)：两只手指按下，提起，其中一只手指按下，提起3、拖拽(Drag)，轻滑(Swipe)和快掷(Fling)： 一只手指按下，移动再提起4、长按：一只手指按下，稍后再提起5、长按拖动：一只手指按下后稍后，移动，再提起6、双触拖动：一只手指按下后提起，再按下后，拖动，再提起7、捏放(Pinch Open)：双指...
移动端原生手势事件
weixin_43294560的博客
08-13 1009
touchstart 当手指接触屏幕时触发 touchmove 当已经接触屏幕的手指开始移动的时候触发 touchend 当手指离开屏幕时触发 touchcancel 可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件 1、由于触摸会导致屏幕动来动去,使用时先阻止默认事件 event.preventDefault() 2、event对象包含的额外参数 (1)touches：表示当前跟踪的触摸操作的touch对象的数组。
JS实现通过双指捏合，对div进行放大缩小
JulyNight的博客
02-08 3090
【代码】JS实现通过双指捏合，对div进行放大缩小。
移动端双指缩放事件(原生)，e.originalEvent.touches
热门推荐
唐策的博客
09-06 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;双指缩放事件&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=
移动端vue滑动事件
11-08
移动端Vue滑动事件是指在Vue框架下，通过绑定指令实现对移动端触摸事件的响应。常见的移动端Vue滑动事件有v-tap、v-longtap、v-swipeleft、v-swiperight、v-swipeup、v-swipedown等。其中，v-tap表示轻触事件，v-longtap表示长按事件，v-swipeleft表示向左滑动事件，v-swiperight表示向右滑动事件，v-swipeup表示向上滑动事件，v-swipedown表示向下滑动事件。通过绑定这些指令，可以实现对移动端用户的操作响应，从而提升用户体验。 代码示例： ``` <template> <div v-tap="handleTap" v-swipeleft="handleSwipeLeft" v-swiperight="handleSwipeRight"> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: 'Hello World!' } }, methods: { handleTap() { console.log('Tap!') }, handleSwipeLeft() { console.log('Swipe Left!') }, handleSwipeRight() { console.log('Swipe Right!') } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值