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

Spin-Wheel

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

问题分析与实现

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

并且我找了一我的实现的手势识别，是经过计算两个点造成的角度来判断，我开始也以为这种方法不错。可是我在具体实现的时候想到了另外一个方法。

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

如何计算扇区

那么来看看如何知道是在哪一个扇区呢？由于鼠标在刚开始时只是在某一个点上，只有移动了一段距离后才知道在哪。咱们看一下下面的图：

这里面我标识了10个点，咱们能够发现鼠标在通过这10个点说明就是画了一个圈，对吧。而后咱们看这些点有哪些规律？

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

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

而后考虑顺时针问题

上面说了每一个扇区的计算方式，可是这个若是不考虑时针方向是不成立的，上面的计算方式必须是顺时针才行。若是是逆时针则要反过来计算，因此一旦鼠标逆时针转到，那么也会计算扇区，只不过计算的扇区就不是本身想要的结果啦。

在此个人解决方法是，在计算了扇区后进行一次检查，若是发现前一个扇区不是连续的就说明时针方向错了，从新开始记录轨迹。仍是以上面那个图为例子：

当P1-P3开始移动后，说明在【右上扇区】，而后判断前一个扇区是否有通过，若是没有通过说明当前扇区多是开始扇区，而后判断后一个扇区是否有通过，若是没有通过说明确实是首扇区，是正常的轨迹。反之则说明鼠标转反了。

其余的扇区以此类推。

最后发一下代码

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