Spin-Wheel
實(shí)現(xiàn)鼠標(biāo)在網(wǎng)頁(yè)上轉(zhuǎn)圈時(shí)記錄轉(zhuǎn)動(dòng)圈數(shù)的小程序，每轉(zhuǎn)一圈記錄一次，同時(shí)要是順時(shí)針?lè)较虻摹?/p>
問(wèn)題分析與實(shí)現(xiàn)
這個(gè)小程序的難點(diǎn)在于如何知道鼠標(biāo)完成了一個(gè)轉(zhuǎn)圈的動(dòng)作，而且人工使用鼠標(biāo)劃圈時(shí)也不會(huì)是一個(gè)標(biāo)準(zhǔn)的圓，通常都是很不規(guī)律的。這點(diǎn)上我網(wǎng)上找了找發(fā)現(xiàn)瀏覽器的鼠標(biāo)手勢(shì)實(shí)現(xiàn)了。
而且我找了一個(gè)人實(shí)現(xiàn)的手勢(shì)識(shí)別，是通過(guò)計(jì)算兩個(gè)點(diǎn)形成的角度來(lái)判斷，我開(kāi)始也覺(jué)得這種方法不錯(cuò)。但是我在具體實(shí)現(xiàn)的時(shí)候想到了另一個(gè)方法。
我的實(shí)現(xiàn)方法：把一個(gè)圓分為4個(gè)等分，也就是扇區(qū)：左上，左下，右上，右下。然后通過(guò)記錄鼠標(biāo)經(jīng)過(guò)的點(diǎn)與前一個(gè)點(diǎn)坐標(biāo)來(lái)判斷是在哪個(gè)扇區(qū)，只要四個(gè)扇區(qū)都經(jīng)過(guò)了就表示劃了一個(gè)圓。這樣做的話對(duì)鼠標(biāo)軌跡要求不高，只要走的方向?qū)托辛恕?/p>
如何計(jì)算扇區(qū)
那么來(lái)看看如何知道是在哪個(gè)扇區(qū)呢？因?yàn)槭髽?biāo)在剛開(kāi)始時(shí)只是在某一個(gè)點(diǎn)上，只有移動(dòng)了一段距離后才知道在哪。我們看一下下面的圖：
這里面我標(biāo)識(shí)了10個(gè)點(diǎn)，我們可以發(fā)現(xiàn)鼠標(biāo)在經(jīng)過(guò)這10個(gè)點(diǎn)說(shuō)明就是畫(huà)了一個(gè)圈，對(duì)吧。然后我們看這些點(diǎn)有哪些規(guī)律？
比如,假如我們鼠標(biāo)是從P1開(kāi)始移動(dòng)的，然后移動(dòng)到P2，再到P3，可以發(fā)現(xiàn)x軸是越來(lái)越大的，同時(shí)y軸也是越來(lái)越大。也就是說(shuō)我們只要將鼠標(biāo)移動(dòng)的軌跡記錄下來(lái)，然后逐個(gè)點(diǎn)進(jìn)行分析，只要符合上面規(guī)律的就可以理解為在【右上扇區(qū)】。
同理，我們?cè)倏碢3->P6,則發(fā)現(xiàn)x軸是越來(lái)越小，而y軸是越來(lái)越大的，說(shuō)明是【右下扇區(qū)】，后面兩個(gè)扇區(qū)以此類(lèi)推。
然后考慮順時(shí)針問(wèn)題
上面說(shuō)了每個(gè)扇區(qū)的計(jì)算方式，但是這個(gè)如果不考慮時(shí)針?lè)较蚴遣怀闪⒌?，上面的?jì)算方式必須是順時(shí)針才行。如果是逆時(shí)針則要反過(guò)來(lái)計(jì)算，所以一旦鼠標(biāo)逆時(shí)針轉(zhuǎn)到，那么也會(huì)計(jì)算扇區(qū)，只不過(guò)計(jì)算的扇區(qū)就不是自己想要的結(jié)果啦。
在此我的解決方法是，在計(jì)算了扇區(qū)后進(jìn)行一次檢查，如果發(fā)現(xiàn)前一個(gè)扇區(qū)不是連續(xù)的就說(shuō)明時(shí)針?lè)较蝈e(cuò)了，重新開(kāi)始記錄軌跡。還是以上面那個(gè)圖為例子：
當(dāng)P1-P3開(kāi)始移動(dòng)后，說(shuō)明在【右上扇區(qū)】，然后判斷前一個(gè)扇區(qū)是否有經(jīng)過(guò)，如果沒(méi)有經(jīng)過(guò)說(shuō)明當(dāng)前扇區(qū)可能是開(kāi)始扇區(qū)，然后判斷后一個(gè)扇區(qū)是否有經(jīng)過(guò)，如果沒(méi)有經(jīng)過(guò)說(shuō)明確實(shí)是首扇區(qū)，是正常的軌跡。反之則說(shuō)明鼠標(biāo)轉(zhuǎn)反了。
其他的扇區(qū)以此類(lèi)推。
