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. Eureka停更了?试试Zookpper和Consul

    在Spring Cloud Netflix中使用Eureak作为注册中心,但是Eureka2.0停止更新,Eureka1.0 进入了维护状态.就像win7一样,同样可以用,但是官方对于新出现的问题并不 ...

  2. linux4.1.36 解决 SPI 时钟找不到 不生成设备 device

    最初的问题是 编译内核添加了 spi 支持,配置了 board 后,加载25q64驱动不执行probe 函数. 然后发现是,spi-s3c24xx.c 中的 probe 没有执行完就退出了 没有生成 ...

  3. scrapy 执行同个项目多个爬虫

    一开始我们默认都是只有一个爬虫的,所以执行的代码都是在项目下创建一个py文件 from scrapy import cmdline cmdline.execute('scrapy crawl 爬虫名' ...

  4. redis的批量操作命令pipeline(PHP实现)

    redis执行一条命令有四个过程:发送命令.命令排队.命令执行.返回结果:整个过程是一个往返时间(RTT).如果有n条命令,就会消耗n次RTT.Redis的客户端和服务端可能部署在不同的机器上.在两地 ...

  5. OFD电子证照模版制作工具 --(采用wpf开发)

    前言  ofd应用的范围非常广,电子证照是其中非常重要的一个应用.同一类电子证照具有相同的板式.元数据:所以电子证照非常适合用模版来制作.模版就是板式样式固定,每个具体的证照只是文字或图片内容不同.比 ...

  6. css 实战技巧

    css 看起来比较简单,但是要想做的好也不是那么容易,我们在平时开发中,主要用css 来美化我们的html结构,所有我觉得css 还是挺重要的,这里记录整理一些关于css 的技巧以及容易忘记的知识点. ...

  7. SyntaxError: unexpected character after line continuation character

    SyntaxError: unexpected character after line continuation character 待解决问题:在运行.py文件时报错SyntaxError: un ...

  8. OPENGL图形渲染管线图解

    OPENGL固定图形渲染管线可以粗略地认为由下面的阶段衔接而成: 顶点颜色,光照,材质三个输入在光栅化前控制绘制管线的操作.光照和材质不能单独使用.顶点颜色,光源颜色,材质颜色都有alpha值,它们的 ...

  9. HTML每日学习笔记(0)

    2019.7.14 1.属性为 HTML 元素提供附加信息,总是在 HTML 元素的开始标签中规定. 例子:<h1 align="center"> 对齐方式 <b ...

  10. C++之 ostream详细用法

    前言 在 C++中,ostream表示输出流,英文”output stream“的简称.在 C++中常见的输出流对象就是标准输出流cout,很少自定义ostream的对象,更多的是直接使用cout.那 ...