浏览器手势识别原理

2023-10-28

以下内容转自:
链接:https://www.zhihu.com/question/20607813/answer/1396981185
来源:知乎
 

Stroke 是作者的一款开源鼠标手势,支持复杂手势。

对于这个问题,我觉得可以细分为这样两个子问题:

  1. 如何表示数据。
  2. 如何度量相似度

对于问题一,需要将用户划出的手势表示出来,同样的图形但大小不同应该识别成同一手势。我认为用一组单位向量是比较合适的。在 Stroke 的代码中,总是将用户划出的手势图形平分成 128 个向量,再将每个向量转换为单位向量(由于计算效率的原因实际上使用的是 127 倍的单位向量)。这样一来,无论用户划出的手势长或短、大或小,只要它们在结构上是一样的,那么表示它们的数据也是一样的。例如下图两种情况:

对于问题二,要比较单位向量的相似度,最自然想到的是使用余弦相似度来度量。即计算两个向量的余弦值,比较两组数据的每个相对应的向量,将它们产生的这 128 个余弦值累加起来,最终得到的结果应该会在 [-128, 128] 之间,数值越大表示越相似。此时,我们只需要设定一个阈值,超过这个阈值就认为匹配上了,若存在多个匹配成功的结果,则取最大值的即可。

关于具体实现,请点击以下链接:

https://github.com/poerin/Stroke/blob/master/Stroke/Gesture.cs​github.com/poerin/Stroke/blob/master/Stroke/Gesture.cs

以下内容转自:

浏览器鼠标手势原理简析 - 走看看

浏览器市场百家争鸣、百花齐放,每款浏览器都有自己的特色和亮点,但是基本功能都相差不大,其中一个比较通用的功能就是浏览器的鼠标手势,而且鼠标手势一般由8个中的两个或多个组成。例如淘宝浏览器的【回底部】是由组成,【刷新】是由组成。

鼠标手势在很多浏览器都有广泛使用,有浏览器自带的,可以直接使用,如360浏览器、sogou浏览器,也有需要用户安装扩展才能用的,如Chrome、Opera。鼠标手势之所以得到广大用户的亲睐,与其简单、作用范围广、功能常用有很大的关系。但是很少人知道鼠标手势的鼻祖是Opera浏览器。

那么鼠标手势是怎么实现的呢,从表现上看貌似很复杂,但是原理并不是想象的那么难。鼠标手势玩的就是算法,建立弧度向量表,根据鼠标轨迹的点计算方向,然后与预定义的鼠标手势进行对比,取出最相似的一组。这几个步骤当中都要用到不同的算法。首先是弧度向量表,以八个方向()的向量划分弧度,并按一定的精度建立一个弧度向量表。这还不够,在现实使用中,往往鼠标轨迹和定义的不是完全匹配,例如画直线可能会有点弯曲,斜向上的角度不一定正好是45度,当然这些问题都可以通过精度修正来解决,换句话说,就是允许有一定的误差。

VN:F [1.9.10_1130]

please wait...

Rating: 9.0/10 (2 votes cast)

浏览器鼠标手势原理简析, 9.0 out of 10 based on 2 ratings 转载务必注明出处Taobao QA Team,原文地址:http://qa.taobao.com/?p=15578

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

浏览器手势识别原理 的相关文章

随机推荐

  • nginx实现负载均衡load balance

    目录 nginx实现负载均衡load balance 相关算法 负载均衡https的访问 后端的real server是否知道真正访问的用户的IP地址 健康检查 提升负载均衡的并发数量 七层负载均衡和四层负载均衡 七层负载均衡 四层负载均衡
  • Lucene 查询TopN的优化(二)

    在上一篇文章的结尾 我们总结了使用NumericDocValues优化查询TopN的原理 假设查询TopN的排序规则为按照正排值从小大小的顺序 即正排值越小 优先级越高 故在开启优化后 当收集器收到一个文档号 先根据文档号从正排索引中拿到正
  • js对象赋值、循环对象

    一般我们给对象的属性赋值时这样的 let a a value 值 如果在一个循环中 循环去给对象赋值的话 就会覆盖掉前面的值 而又想每次循环赋值的属性都不一样的话 就要这样 let a for let i 0 i lt 2 i let b
  • 小程序获取当前时间戳

    使用Date parse new Date 默认生成的时间戳是以毫秒为单位的 可以根据业务需求 通过除以1000 来转化为秒 因为生成的时间戳末尾是000 所以不用担心不是整除 控制台打印 可在js中引用以下代码 var timeStamp
  • 如何优雅地回退代码

    如何优雅地回退代码 先介绍一下这种场景 我们一个项目从 N 版本升到 A 版本时引入了另一项目的 jar 包 又陆续发布了 B C 版本 但在 C 版本后忽然发现了 A 版本引入的 jar 包有极大的性能问题 B C 版本都是基于 A 版本
  • 【应急响应】网站入侵篡改指南&Webshell内存马查杀&漏洞排查&时间分析

    网站入侵篡改指南 Webshell内存马查杀 漏洞排查 时间分析 章节内容点 IIS NET 注入 基于时间配合日志分析 Apache PHP 漏洞 基于漏洞配合日志分析 弱口令 基于后门配合日志分析 Webshell查杀 常规后门 内存马
  • LongAdder类和AtomicInteger类

    voliate关键在保证可见性但是不保证原子性 多线程下还是有线程安全问题 不使用voliate情况下 使用voliate情况下 换成使用线程安全的类 也可以使用LongAdder类来实现线程安全 LongAdder类 在 LongAdde
  • springboot+vue上传至云服务后出现的跨域问题

    一 情况简介 在学习spring boot vue3前后端分离项目时 前期一直是用的自己电脑进行的开发及运行测试 当时就出现了跨域的问题 经过上网查询后在VUE中进行代理跨域的设置即可 但当我把前后端项目打包放到云服务上后却又出现了跨域的问
  • git命令之新建仓库

    一 配置git用户名 1 安装git 配置用户名和邮箱 git config global user name 你的用户名 git config global user email 你的注册邮箱 2 使用git config global
  • LangChain(6)构建用户自己的Agent

    构建用户自己的Agent 编写简单的计算工具 编写有多个参数的工具 其它更高级的工具 LangChain 中有一些可用的Agent内置工具 但在实际应用中我们可能需要编写自己的Agent 编写简单的计算工具 pip install qU l
  • OllyDBG 入门

    一 OllyDBG 的安装与配置 OllyDBG 1 10 版的发布版本是个 ZIP 压缩包 只要解压到一个目录下 运行 OllyDBG exe 就可以了 汉化版的发布版本是个 RAR 压缩包 同样只需解压到一个目录下运行 OllyDBG
  • Java入门扫盲

    j2ee那是原来的叫法 现在叫javaEE 以前的规范分为三种 j2se j2me j2ee 分别是基础平台 小型移动设备程序和企业级应用 现在javaEE开发称为web开发也行吧 javaEE框架太多了 例如 spring hiberna
  • IOS MDM流程

    http www mbaike net ios 1552 html 一 MDM资料下载 BH US 11 Schuetz InsideAppleMDM WP pdf MDM流程及资料最全的PDF文档 二 MDM流程整理 1 创建和部署htt
  • Win10激活(家庭版升级到专业版)带你5分钟解决

    作为一名计算机专业的学生 将自己的电脑激活到专业版是我们的必经之路 接下来的内容希望对在座的各位同学有帮助 一 误删密钥导致windows处于未激活状态的解决方法 点击 激活 疑难解答 升级到专业版后 需要产品密钥才能激活 二 最快速有效的
  • ios英语口语800句应用源码

    前几天突发奇想做了个很水的应用 名字叫chinese 800 汉语口语800句 现在让别人传上去了 正在传 今天又改了一下变成了英语口语800句 加了广告条 ui 没有优化 我随便整的两个图片 有人会ps的可以再优化一下ui 应用含800个
  • 盘点免费好用的5款思维导图工具

    在日常生活 学习和工作之中 我们难免会面对纷乱繁杂的知识或信息 运用思维导图对信息和内容进行整理 可以直接有效且高效地将散点链接成为相关联的 有逻辑的整体 当我们善用思维导图对这些内容进行分类梳理 自然而然我们的效率就会得到很大程度的提升
  • 玩转软路由 篇四:软路由中OpenWRT作为旁路由的安装设置教程

    开篇说一些仁者见仁智者见智的话 先声明 这只是代表我自己近期浅陋的看法 看到很多人玩路由器 刷各种固件 什么爱快 高格 老毛子 OpenWRT什么的 自己也折腾过 也在恩山论坛里下载各路大神的固件使用 作为一个小白 就自然而然想到 这么多固
  • 3.2 二维随机变量的边缘分布

    思维导图 学习目标 要学习二维随机变量的边缘分布 我可能会按照以下步骤进行学习 理解二维随机变量的概念和表示方法 包括联合分布函数和联合分布律等概念 理解二维随机变量的边缘分布的概念和意义 即在已知联合分布的情况下 如何求出单独一个随机变量
  • 前端Javascript,ES6常见面试题

    一 Javascript js数据类型 及检测 共8种常用的6种类型 基本类型 Number String Boolean undefined Null 引用类型 object function 不常用2种类型 Symbol bigInt
  • 浏览器手势识别原理

    以下内容转自 链接 https www zhihu com question 20607813 answer 1396981185 来源 知乎 Stroke 是作者的一款开源鼠标手势 支持复杂手势 对于这个问题 我觉得可以细分为这样两个子问