zoukankan      html  css  js  c++  java
  • 使用js在网页上记录鼠标划圈的小程序

    Spin-Wheel

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

    问题分析与实现

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

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

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

    image

    如何计算扇区

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

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

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

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

    然后考虑顺时针问题

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

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

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

    其他的扇区以此类推。

    最后发一下代码

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

  • 相关阅读:
    linux之awk命令
    HDU 2097 Sky数 进制转换
    HDU 2077 汉诺塔IV
    HDU 2094 产生冠军 dfs加map容器
    HDU 2073 叠框
    HDU 2083 简易版之最短距离
    HDU 2063 过山车 二分匹配
    天梯 1014 装箱问题
    天梯 1214 线段覆盖
    天梯 1098 均分纸牌
  • 原文地址:https://www.cnblogs.com/5207/p/6524900.html
Copyright © 2011-2022 走看看