touch--单点

targetTouches、 changeTouches

多点：

targetTouches--当前物体上的手指数

*不同物体上的手指不会互相干扰

不需要做多点触摸的时候---平均值：

x=∑ 所有手指x /n
y=∑ 所有手指y /n

手势识别：
1.
2.

--------------------------------------------------------------------------------

多点触摸：
1.避免影响——消除干扰
平均坐标
2.需要多点——手势
i.旋转 后角度-前角度
ii.缩放 后距离/前距离

--------------------------------------------------------------------------------

Math.atan(b/a);
Math.atan2(b, a);

--------------------------------------------------------------------------------

角度：360
弧度：2·PI

360角度=2PI弧度
1角度=PI/180弧度
n角度=n*PI/180弧度

2PI弧度=360角度
1弧度=180/PI角度
n弧度=n*180/PI角度

--------------------------------------------------------------------------------

1.思路：
旋转 角度-角度
缩放 距离/距离
2.弧度：
弧度 换算 角度

--------------------------------------------------------------------------------

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <title></title>

    <style media="screen">

    body {height:2000px;}

    .box {width:200px; height:200px; background:#CCC; border:1px solid black; position:absolute; line-height:200px; text-align:center; font-size:40px; left:50%; top:150px; margin-left:-100px; transform: rotate(0deg)}

    </style>

    <script>

    function calcAng(touch1, touch2){

      let x=touch1.clientX-touch2.clientX;

      let y=touch1.clientY-touch2.clientY;

      return Math.atan2(y, x)*180/Math.PI;

    }

    window.onload=function (){

      let oBox=document.getElementsByClassName('box')[0];

      let ang1,ang2;

      let ang=0,old_ang;

      document.addEventListener('touchstart', function (ev){

        if(ev.targetTouches.length>=2){

          ang1=calcAng(ev.targetTouches[0], ev.targetTouches[1]);

          old_ang=ang;

        }

      }, false);

      document.addEventListener('touchmove', function (ev){

        if(ev.targetTouches.length>=2){

          ang2=calcAng(ev.targetTouches[0], ev.targetTouches[1]);

          ang=old_ang+ang2-ang1;

          oBox.style.transform=`rotate(${ang}deg)`;

        }

      }, false);

    };

    </script>

  </head>

  <body>

    <input type="text" name="" value="">

    <input type="button" value="按钮" onclick="document.querySelector('.box').style.background='yellow';">

    <div class="box">asdfasdf</div>

  </body>

</html>

缩放

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <title></title>

    <style media="screen">

    body {height:2000px;}

    .box {width:200px; height:200px; background:#CCC; border:1px solid black; position:absolute; line-height:200px; text-align:center; font-size:40px; left:50%; top:150px; margin-left:-100px; transform:scale(1);}

    </style>

    <script>

    function calcDistance(touch1, touch2){

      return Math.sqrt(Math.pow(touch1.clientX-touch2.clientX, 2), Math.pow(touch1.clientY-touch2.clientY, 2));

    }

    window.onload=function (){

      let oBox=document.getElementsByClassName('box')[0];

      let dis1,dis2;

      let scale=1.0,old_scale;

      document.addEventListener('touchstart', function (ev){

        if(ev.targetTouches.length>=2){

          dis1=calcDistance(ev.targetTouches[0], ev.targetTouches[1]);

          old_scale=scale;

        }

      }, false);

      document.addEventListener('touchmove', function (ev){

        if(ev.targetTouches.length>=2){

          dis2=calcDistance(ev.targetTouches[0], ev.targetTouches[1]);

          scale=old_scale*dis2/dis1;

          oBox.style.transform=`scale(${scale})`;

        }

      }, false);

    };

    </script>

  </head>

  <body>

    <div class="box">asdfasdf</div>

  </body>

</html>

touch多点触摸事件的更多相关文章

  1. WPF4多点触摸事件

    原文 WPF4多点触摸事件 UIElement在WPF4下添加了很多支持多点触摸的事件,通过它们可以在硬件支持的情况下处理多点触摸,以下通过代码来说明通过处理这些事件,我们可以做些什么: 一.触摸相关 ...

  2. 移动web开发，12个触摸及多点触摸事件常用Js插件

    如今移动互联网已经占据了主流地位,越来越多的开发者开始从桌面转向移动平台.与桌面开发不同的是,在移动领域中,不同的操作系统.大量不同屏幕尺寸的移动设备.触摸手势操作等,这都给开发者带来了一定的难度和挑 ...

  3. WPF中的多点触摸事件

    UIElement在WPF4下添加了很多支持多点触摸的事件,通过它们可以在硬件支持的情况下处理多点触摸,以下通过代码来说明通过处理这些事件,我们可以做些什么: 一.触摸相关的多种事件,跟鼠标事件是对应 ...

  4. javascript触摸事件touch使用

    详细内容请点击 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距.最近一个W3C工作组正合力制定这一触摸事件规范.        在本文深入研究iOS和 ...

  5. 移动端-js触摸事件

    开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...

  6. Cocos2d-x实例：单点触摸事件

    addChild(boxC,30, kBoxC_Tag);                                                                        ...

  7. Cocos2d-x中触摸事件

    理解一个触摸事件可以从时间和空间两方面考虑. 1.触摸事件的时间方面 触摸事件的在时间方面,如下图所示,可以有不同的“按下”.“移动”和“抬起”等阶段,表示触摸是否刚刚开始.是否正在移动或处于静止状态 ...

  8. Swift - 触摸事件（点击，移动，抬起等）说明及用例

    在iOS开发中,UIGestureRecognizer可以方便的响应处理手势事件. 而如果要想更精细的处理,我们还需要借助touchesBegan,touchesMoved,touchesEnded等 ...

  9. Cocos2d-x示例：单点触摸事件

    为了让大家掌握Cocos2d-x中的事件机制,以下我们以触摸事件为例.使用事件触发器实现单点触摸事件.该实比如图8-3所看到的,场景中有三个方块精灵,显示顺序如图8-3所看到的,拖拽它们能够移动它们. ...

随机推荐

  1. 利用Java实现指定文件夹下的照片以自定义格式移动

    前几天本猿的大学同学,一个漂亮的小姐姐工作时遇到了一个问题,她的需求是,在公司局域网的电脑上下载大量的图片重命名成指定得1.2.3.....以此类推,需要当天完成,我就临时给写了一个小demo. 我的 ...

  2. js 面向对象 打气球小游戏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. kerberos系列之zookeeper的认证配置

    本篇博客介绍配置zookeeper的kerberos配置 一.zookeeper安装 1.解压安装包和重命名和创建数据目录 tar -zxvf /data/apache-zookeeper-3.5.5 ...

  4. 74. pNextID、pNextVal、pNID的区别

    pNextID是平台调用单个新增组件的时候调用的: pNextVal是平台批量新增的时候调用: pNID应该是自己写的 :

  5. Symantec(赛门铁克）非受管检测

    为了查找局域网内没有安装赛门铁克客户端的IP,采用Symantec Endpoint Protect Manager 的非受管检测机制进行网段扫描. 非受管检测机制的原理是:每台电脑开机时都会向同网段 ...

  6. Cobait Strike的socks与ew代理使用

    cobait strike介绍 Cobalt Strike 一款以 metasploit 为基础的 GUI 的框架式渗透测试工具,集成了端口转发.服务扫描,自动化溢出,多模式端口监听,win exe  ...

  7. Django模型层ORM学习笔记

    一. 铺垫 1. 连接Django自带数据库sqlite3 之前提到过Django自带一个叫做sqlite3的小型数据库,当我们做本地测试时,可以直接在sqlite3上测试.不过该数据库是小型的,在有 ...

  8. RoBERTa

    2019-10-19 21:46:18 问题描述:谈谈对RoBERTa的理解. 问题求解: 在XLNet全面超越Bert后没多久,Facebook提出了RoBERTa(a Robustly Optim ...

  9. 条件随机场 CRF

    2019-09-29 15:38:26 问题描述:请解释一下NER任务中CRF层的作用. 问题求解: 在做NER任务的时候,神经网络学习到了文本间的信息,而CRF学习到了Tag间的信息. 加入CRF与 ...

  10. 【笔记3-26】Python语言基础

    编译型语言和解释型语言 编译型语言 C 先编译 解释型语言 Python 边执行边编译 Python的介绍 吉多·范罗苏姆 1991 解释型语言 Life is short you need Pyth ...