使用js在網頁上記錄鼠標劃圈的小程序

Spin-Wheel

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

問題分析與實現

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

並且我找了一我的實現的手勢識別，是經過計算兩個點造成的角度來判斷，我開始也以爲這種方法不錯。可是我在具體實現的時候想到了另外一個方法。

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

如何計算扇區

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

這裏面我標識了10個點，咱們能夠發現鼠標在通過這10個點說明就是畫了一個圈，對吧。而後咱們看這些點有哪些規律？

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

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

而後考慮順時針問題

上面說了每一個扇區的計算方式，可是這個若是不考慮時針方向是不成立的，上面的計算方式必須是順時針才行。若是是逆時針則要反過來計算，因此一旦鼠標逆時針轉到，那麼也會計算扇區，只不過計算的扇區就不是本身想要的結果啦。

在此個人解決方法是，在計算了扇區後進行一次檢查，若是發現前一個扇區不是連續的就說明時針方向錯了，從新開始記錄軌跡。仍是以上面那個圖爲例子：

當P1-P3開始移動後，說明在【右上扇區】，而後判斷前一個扇區是否有通過，若是沒有通過說明當前扇區多是開始扇區，而後判斷後一個扇區是否有通過，若是沒有通過說明確實是首扇區，是正常的軌跡。反之則說明鼠標轉反了。

其餘的扇區以此類推。

最後發一下代碼

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