使用js在网页上记录鼠标划圈的小程序

Spin-Wheel

实现鼠标在网页上转圈时记录转动圈数的小程序,每转一圈记录一次,同时要是顺时针方向的。

问题分析与实现

这个小程序的难点在于如何知道鼠标完成了一个转圈的动作,而且人工使用鼠标划圈时也不会是一个标准的圆,通常都是很不规律的。这点上我网上找了找发现浏览器的鼠标手势实现了。

而且我找了一个人实现的手势识别,是通过计算两个点形成的角度来判断,我开始也觉得这种方法不错。但是我在具体实现的时候想到了另一个方法。

我的实现方法:把一个圆分为4个等分,也就是扇区:左上,左下,右上,右下。然后通过记录鼠标经过的点与前一个点坐标来判断是在哪个扇区,只要四个扇区都经过了就表示划了一个圆。这样做的话对鼠标轨迹要求不高,只要走的方向对就行了。

如何计算扇区

那么来看看如何知道是在哪个扇区呢?因为鼠标在刚开始时只是在某一个点上,只有移动了一段距离后才知道在哪。我们看一下下面的图:

这里面我标识了10个点,我们可以发现鼠标在经过这10个点说明就是画了一个圈,对吧。然后我们看这些点有哪些规律?

比如,假如我们鼠标是从P1开始移动的,然后移动到P2,再到P3,可以发现x轴是越来越大的,同时y轴也是越来越大。也就是说我们只要将鼠标移动的轨迹记录下来,然后逐个点进行分析,只要符合上面规律的就可以理解为在【右上扇区】。

同理,我们再看P3->P6,则发现x轴是越来越小,而y轴是越来越大的,说明是【右下扇区】,后面两个扇区以此类推。

然后考虑顺时针问题

上面说了每个扇区的计算方式,但是这个如果不考虑时针方向是不成立的,上面的计算方式必须是顺时针才行。如果是逆时针则要反过来计算,所以一旦鼠标逆时针转到,那么也会计算扇区,只不过计算的扇区就不是自己想要的结果啦。

在此我的解决方法是,在计算了扇区后进行一次检查,如果发现前一个扇区不是连续的就说明时针方向错了,重新开始记录轨迹。还是以上面那个图为例子:

当P1-P3开始移动后,说明在【右上扇区】,然后判断前一个扇区是否有经过,如果没有经过说明当前扇区可能是开始扇区,然后判断后一个扇区是否有经过,如果没有经过说明确实是首扇区,是正常的轨迹。反之则说明鼠标转反了。

其他的扇区以此类推。

最后发一下代码

代码我丢到github上了,https://github.com/mini188/Spin-Wheel

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏梦里茶室

毫秒级检测!你见过带GPU的树莓派吗?

树莓派3B+英特尔神经计算棒进行高速目标检测 转载请注明作者梦里茶 ? 代码: 训练数据预处理: https://gist.github.com/ahan...

4.1K8
来自专栏磐创AI技术团队的专栏

Tensorboard 详解(上篇)

2163
来自专栏简书专栏

基于xgboost的波士顿房价预测kaggle实战

2018年8月24日笔记 这是作者在波士顿房价预测项目的第3篇文章,在查看此篇文章之前,请确保已经阅读前2篇文章。 第2篇文章链接:https://www....

1.5K3
来自专栏ATYUN订阅号

自定义对象检测问题:使用TensorFlow追踪星球大战中的千年隼号宇宙飞船

大多数的大型科技公司(如IBM,谷歌,微软,亚马逊)都有易于使用的视觉识别API。一些规模较小的公司也提供类似的产品,如Clarifai。但没有公司能够提供对象...

4585
来自专栏人工智能LeadAI

Spark新愿景:让深度学习变得更加易于使用

01 前 言 Spark成功的实现了当年的承诺,让数据处理变得更容易,现在,雄心勃勃的Databricks公司展开了一个新的愿景:让深度学习变得更容易。 当然牛...

3785
来自专栏小巫技术博客

A008-drawable资源

关于drawable资源笔者之前有写过两篇文章: Android-自定义图像资源的使用(1) Android-自定义图像资源的使用(2) 这里笔者就不做过多的赘...

802
来自专栏人工智能LeadAI

毫秒级检测!你见过带GPU加速的树莓派吗?

75810
来自专栏视觉求索无尽也

Markdown:插入数学公式

1K2
来自专栏数据小魔方

粗边面积图

今天给大家分享的是一种在财经杂志上常见的粗边面积图。 ▽▼▽ 这种图表制作起来步骤并不复杂,主要是排版和图表元素格式化需要一些精加工。 ? ●●●●● 下面是制...

2665
来自专栏葡萄城控件技术团队

ActiveReports 报表应用教程 (3)---图表报表

葡萄城ActiveReports报表的图表控件支持绝大多数常用的二维和三维图表类型,包括XY图表和财务图表。通过使用图表控件的定制功能,如修改坐标轴、图注、图例...

2357

扫码关注云+社区

领取腾讯云代金券