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. 19.10.11学习日记随笔 mysql事务隔离性

    一天的感悟 学习事务的处理方式,其中反想自己学过的flask 默认是开启事务的,flask_sqlalchemy每次在提交时都是需要commit,或者失败是需要rollback回滚操作的,其实pyth ...

  2. Matplotlib数据可视化（7）：图片展示与保存

    In [1]: import os import matplotlib.image as mpimg from PIL import Image import matplotlib.pyplot as ...

  3. Java集合02——三分钟了解你必须掌握的两个Set

    上一篇文章我们说到了 List ,本章开始,我们将继续讲解Set相关的知识.关注公众号「Java面典」了解更多 Java 知识点. Set 是一个无重复对象的集合类.值的重复与否是根据对象的 hash ...

  4. node 微信退款

     基于node 的微信退款 申请微信退款:微信退款, 1.在前端页面访问 /refund var request = require('request'); var WxPayRefund = req ...

  5. codevs1743

    http://codevs.cn/problem/1743/ splay区间翻转. 数字在原序列中的位置保存在splay的data[]中.splay中点的编号为原序列的数字大小. 每次pushdown ...

  6. 【转】分布式架构的演进（JavaWeb）

    作者:李小翀 链接:https://www.zhihu.com/question/22764869/answer/31277656 来源:知乎 1.初始 初始阶段 的小型系统 应用程序.数据库.文件等 ...

  7. JDBC链接数据库。

    第一步,创建一个空包: 给包起个名字: 新建Modules: 给Modules起名: 创建libs文件: 点击file---->new---->project---->Directo ...

  8. url,解释器，响应器，版本控制，分页

    路由控制 -基本路由写法:咱们一直写的

  9. python浅学【网络服务中间件】之Redis

    一.关于NoSQL: NoSQL(NoSQL = Not Only SQL ),"不仅仅是SQL". 相比MySQL等关系型数据库,NoSQL为非关系型的数据存储 Nosql中比较 ...

  10. [Linux系统] CentOS7（RHEL7）重置root用户密码

    1.系统启动时,按"e"进入编辑界面 2.编辑内容 将rhgb quiet修改为 init=/bin/sh : 然后按 ctrl+x . 3.修改root密码 mount -o r ...