touch多点触摸事件
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多点触摸事件的更多相关文章
- WPF4多点触摸事件
原文 WPF4多点触摸事件 UIElement在WPF4下添加了很多支持多点触摸的事件,通过它们可以在硬件支持的情况下处理多点触摸,以下通过代码来说明通过处理这些事件,我们可以做些什么: 一.触摸相关 ...
- 移动web开发,12个触摸及多点触摸事件常用Js插件
如今移动互联网已经占据了主流地位,越来越多的开发者开始从桌面转向移动平台.与桌面开发不同的是,在移动领域中,不同的操作系统.大量不同屏幕尺寸的移动设备.触摸手势操作等,这都给开发者带来了一定的难度和挑 ...
- WPF中的多点触摸事件
UIElement在WPF4下添加了很多支持多点触摸的事件,通过它们可以在硬件支持的情况下处理多点触摸,以下通过代码来说明通过处理这些事件,我们可以做些什么: 一.触摸相关的多种事件,跟鼠标事件是对应 ...
- javascript触摸事件touch使用
详细内容请点击 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距.最近一个W3C工作组正合力制定这一触摸事件规范. 在本文深入研究iOS和 ...
- 移动端-js触摸事件
开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...
- Cocos2d-x实例:单点触摸事件
addChild(boxC,30, kBoxC_Tag); ...
- Cocos2d-x中触摸事件
理解一个触摸事件可以从时间和空间两方面考虑. 1.触摸事件的时间方面 触摸事件的在时间方面,如下图所示,可以有不同的“按下”.“移动”和“抬起”等阶段,表示触摸是否刚刚开始.是否正在移动或处于静止状态 ...
- Swift - 触摸事件(点击,移动,抬起等)说明及用例
在iOS开发中,UIGestureRecognizer可以方便的响应处理手势事件. 而如果要想更精细的处理,我们还需要借助touchesBegan,touchesMoved,touchesEnded等 ...
- Cocos2d-x示例:单点触摸事件
为了让大家掌握Cocos2d-x中的事件机制,以下我们以触摸事件为例.使用事件触发器实现单点触摸事件.该实比如图8-3所看到的,场景中有三个方块精灵,显示顺序如图8-3所看到的,拖拽它们能够移动它们. ...
随机推荐
- seo搜索优化教程05-SEO常用专业术语
SEO常用的专业术语很多,星辉信息科技专门抽空进行了整理,主要如下:. SEO 根据搜索引擎规则来进行搜索引擎优化,进而使得在搜索结果中获得较好的排名 关键词 关键词也叫keywords,表示在搜索引 ...
- 2020centos解决“nginx 403 Forbidden"错误的故事
最近折腾一个放在日本的vps,网速还可以,就是经常丢包. 原本配置了Nginx的做代理服务器,我想反正服务器空闲者,放点我自己的资料 配置了一个静态html文件,方便自己随时查看 结果,不停的修改ng ...
- 玩转 .NET Core 3.0:逐浪CMS新版发布,建站更简单、网站更安全
2019年11月11日,在大家都忙于网上体会“双11 ”的热闹气氛的时候,逐浪CMS开发者团队正在做着新版本发布的最后工作.此次更新是基本于 .NET Core 3.0开发,也是全国首个基于 .NET ...
- 学习ConcurrentHashMap并发写机制
1. 前言 上篇文章讲了 Unsafe 类中 CAS 的实现,其实是在为这篇文章打基础.不太熟悉的小伙伴请移步Unsafe 中 CAS 的实现.本篇文章主要基于 OpenJDK8 来做源码解析. 2. ...
- 3L-最好、最坏、平均、均摊时间复杂度
关注公众号 MageByte,设置星标点「在看」是我们创造好文的动力.后台回复 "加群" 进入技术交流群获更多技术成长. 本文来自 MageByte-青叶编写 上次我们说过 时间复 ...
- BrowserSync(保存代码后,自动刷新浏览器)
摘要 Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项 ...
- Python离线项目迁移部署
最近遇到了一个场景:需要将Python项目文件打包到无法联网的主机上部署执行,本篇文章记录针对于该场景的处理方案. 说明: 源主机(可联网):安装了Python3和pip3 目标主机(无法联网):需安 ...
- ASP.NET MVC5实现芒果分销后台管理系统(一):系统结构设计,集成AutoMapper,Log4net
在构思完系统思维脑图后,小墨回到家中,便摩拳擦掌开始了开发工作.要想迅速完成系统开发,前期系统设计和准备尤其重要,因为小墨做过太多大大小小的业务系统,准备工作也是十分顺利. 系统结构 整个系统工程结构 ...
- Clipboard.SetText()卡住问题
调用 Clipboard.SetText(),每次都抛出异常:"CLIPBRD_E_CANT_OPEN" 调查后发现,实际上SetText有成功的将文本复制到Clipboard,但 ...
- emWin模拟器Visual Studio开发时无法printf打印的问题
1.emWin模拟器 为了方便用户学习evWin框架,Segger设计了一个PC仿真的工具,可以测试绝大部分GUI的功能,除了方便使用者学习之外,还可以加速项目开发进度.毕竟在PC上用Visual S ...