Spin-Wheel

實現鼠標在網頁上轉圈時記錄轉動圈數的小程序，每轉一圈記錄一次，同時要是順時針方向的。

問題分析與實現

這個小程序的難點在于如何知道鼠標完成了一個轉圈的動作，而且人工使用鼠標劃圈時也不會是一個標準的圓，通常都是很不規律的。這點上我網上找了找發現瀏覽器的鼠標手勢實現了。

而且我找了一個人實現的手勢識別，是通過計算兩個點形成的角度來判斷，我開始也覺得這種方法不錯。但是我在具體實現的時候想到了另一個方法。

我的實現方法：把一個圓分為4個等分，也就是扇區：左上，左下，右上，右下。然后通過記錄鼠標經過的點與前一個點坐標來判斷是在哪個扇區，只要四個扇區都經過了就表示劃了一個圓。這樣做的話對鼠標軌跡要求不高，只要走的方向對就行了。

如何計算扇區

那么來看看如何知道是在哪個扇區呢？因為鼠標在剛開始時只是在某一個點上，只有移動了一段距離后才知道在哪。我們看一下下面的圖：

這里面我標識了10個點，我們可以發現鼠標在經過這10個點說明就是畫了一個圈，對吧。然后我們看這些點有哪些規律？

比如,假如我們鼠標是從P1開始移動的，然后移動到P2，再到P3，可以發現x軸是越來越大的，同時y軸也是越來越大。也就是說我們只要將鼠標移動的軌跡記錄下來，然后逐個點進行分析，只要符合上面規律的就可以理解為在【右上扇區】。

同理，我們再看P3->P6,則發現x軸是越來越小，而y軸是越來越大的，說明是【右下扇區】，后面兩個扇區以此類推。

然后考慮順時針問題

上面說了每個扇區的計算方式，但是這個如果不考慮時針方向是不成立的，上面的計算方式必須是順時針才行。如果是逆時針則要反過來計算，所以一旦鼠標逆時針轉到，那么也會計算扇區，只不過計算的扇區就不是自己想要的結果啦。

在此我的解決方法是，在計算了扇區后進行一次檢查，如果發現前一個扇區不是連續的就說明時針方向錯了，重新開始記錄軌跡。還是以上面那個圖為例子：

當P1-P3開始移動后，說明在【右上扇區】，然后判斷前一個扇區是否有經過，如果沒有經過說明當前扇區可能是開始扇區，然后判斷后一個扇區是否有經過，如果沒有經過說明確實是首扇區，是正常的軌跡。反之則說明鼠標轉反了。

其他的扇區以此類推。

最后發一下代碼

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