开发板Linux手指滑动方向,移动应用滑动屏幕方向判断解决方案,JS判断手势方向...
问题分类
滑动屏幕打开相应功能操作。
问题描述
1、用户手动滑动屏幕,根据滑动的方向,打开相应的功能(如:向上滑摇钱树经验明细,向下滑打开任务明细,向左滑打开聚宝盆物品查看等功能),滑动事件捕获问题。
2、大家都知道,划动都有角度问题,如:向330度方向滑动手机,要计算出它的方向问题。
3、HTML5提供的滑动事件,只能读取到起点和终点坐标,计算角度问题。
4、手机屏幕坐标与标准坐标系转换问题。
解决方案
1、滑动屏幕事件使用Html5 的touchstart滑动开始事件和touchend滑动结束事件。
2、方向的判断,以起点做平面坐标系,与终点连线做直线,直线与x正半轴计算角度;我们以45度角为方向分割线,如:只要滑动角度大于等于45度且小于135度,则判断它方向为向上滑。
3、使用Math.atan2来计算起点与终点形成的直线角度。
4、仔细对比标准坐标系与屏幕坐标系,我们发现,标准坐标系,上半轴为负值,要实现转换,只需要调换Y坐标起点与终于位置即可。
处理代码如下:
//返回角度
function GetSlideAngle(dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
}
//根据起点和终点返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑动
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
varresult = 0;
//如果滑动距离太短
if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
var angle = GetSlideAngle(dx, dy);
if(angle >= -45 && angle < 45) {
result = 4;
}else if (angle >= 45 && angle < 135) {
result = 1;
}else if (angle >= -135 && angle < -45) {
result = 2;
}
else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
}
return result;
}
//滑动处理
var startX, startY;
document.addEventListener('touchstart',function (ev) {
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY;
}, false);
document.addEventListener('touchend',function (ev) {
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
var direction = GetSlideDirection(startX, startY, endX, endY);
switch(direction) {
case 0:
alert("没滑动");
break;
case 1:
alert("向上");
break;
case 2:
alert("向下");
break;
case 3:
alert("向左");
break;
case 4:
alert("向右");
break;
default:
}
}, false);
如何高效的用判断用js判断ie6
用js判断ie6的方法有很多,如: 1. var isIE=!!window.ActiveXObject; var isIE6=isIE&&!window.XMLHttpRequest ...
js判断IP js判断域名
开发板Linux手指滑动方向,移动应用滑动屏幕方向判断解决方案,JS判断手势方向...相关推荐
- 开发板Linux手指滑动方向,移动端 手指滑动方向获取
var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Mat ...
- NUC980开发板Linux系统EC20模块 移植 串口 PPP拨号
NUC980开发板Linux系统EC20模块 移植 串口 PPP拨号 1. EC20模块连接 2. Linux内核配置 3. 交叉编译PPP 4. 拨号脚本 5. 进行拨号 1. EC20模块连接 在 ...
- firefly-rk3288j开发板--linux I2C实验之eeprom驱动
firefly-rk3288j开发板–linux I2C实验之eeprom驱动 1 准备工作 开发板:aio-rk3288j SDK版本:rk3288_linux_release_20210304 下 ...
- 迅为IMX6ULL开发板Linux学习教程
1800+页使用手册(持续更新)+入门视频教程+实战视频教程 关注VX公众号:迅为电子 , 回复 :终结者,免费获取产品资料 让教程更细致,终结入门难! 所有教程由迅为原创,是迅为工作多年的工程师 ...
- firefly-rk3288j开发板--linux NFC实验之RC522驱动
firefly-rk3288j开发板–linux NFC实验之RC522驱动 1 准备工作 开发板:aio-rk3288j SDK版本:rk3288_linux_release_20210304 下载 ...
- 基于全志A33开发板linux系统移植学习记录(Boot0)
基于全志A33开发板linux系统移植学习记录 第一章 Boot0基于ARMGCC的编译与修改 文章目录 基于全志A33开发板linux系统移植学习记录 前言 一.全志A33简介以及上电引导流程 二. ...
- 【迅为iMX6Q】开发板 Linux 5.15.71 RTL8211E 以太网驱动适配
相关参考 [迅为iMX6Q]开发板 u-boot 2022.04 SD卡 启动 [迅为iMX6Q]开发板 u-boot 2020.04 RTL8211E 以太网驱动适配 [迅为iMX6Q]开发板 Li ...
- at91sam9260ek开发板linux移植文档,AT91SAM9260EK开发板 Linux 移植 移植 文档
AT91SAM9260EK开发板 Linux 移植 移植 文档 AT91SAM9260EKAT91SAM9260EKAT91SAM9260EKAT91SAM9260EK 开发板开发板开发板开发板 Li ...
- Linux移植:正点原子阿尔法IMX6ULL开发板Linux内核源码移植详细步骤(4.1.15版本内核)
Linux移植:正点原子阿尔法IMX6ULL开发板Linux内核源码移植详细步骤(4.1.15版本内核) 文章目录 Linux移植:正点原子阿尔法IMX6ULL开发板Linux内核源码移植详细步骤(4 ...
最新文章
- python汉字编码错误_python解决汉字编码问题:Unicode Decode Error
- php lyadmin,index.php
- 讨论IM软件企业知识—会谈session的概念,附连到IM软件层次图
- html5 canvas获取坐标系,HTML5 Canvas坐标变换
- django models索引_sql – 为什么Django显式地在唯一字段上创建索引
- Python+matplotlib自定义坐标轴位置、颜色、箭头
- 构造函数创建私有变量(防继承)
- Mysql中实现多表关联查询更新操作
- 笔记7:winfrom的一些知识点(一)
- 计算机考试vb试题英语成绩,计算机二级考试vb试题_vb试题及参考答案
- RFSoC应用笔记 - RF数据转换器 -15- API使用指南之Libmetal与结构体说明
- 信道估计matlab代码
- 照片幻灯片java_Java的POI向幻灯片中插入图片算法设计
- C++:什么是RAII? | 智能指针的初步讲解 | 智能指针是为了避免什么问题?| 被遗弃的auto_ptr
- [PHP]md5加密
- 【代码】Android和java平台 DES加密解密互通程序及其不能互通的原因
- 恒源云(GPUSHARE)_Teacher Forcing训练小技巧来啦~
- Intel opreation mode
- 列表表达式爬取红牛分公司数据
- 【presto 】presto 新版本升级详情