Spin-Wheel
實(shí)現(xiàn)鼠標(biāo)在網(wǎng)頁上轉(zhuǎn)圈時(shí)記錄轉(zhuǎn)動(dòng)圈數(shù)的小程序，每轉(zhuǎn)一圈記錄一次，同時(shí)要是順時(shí)針方向的。
問題分析與實(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í)別，是通過計(jì)算兩個(gè)點(diǎn)形成的角度來判斷，我開始也覺得這種方法不錯(cuò)。但是我在具體實(shí)現(xiàn)的時(shí)候想到了另一個(gè)方法。
我的實(shí)現(xiàn)方法：把一個(gè)圓分為4個(gè)等分，也就是扇區(qū)：左上，左下，右上，右下。然后通過記錄鼠標(biāo)經(jīng)過的點(diǎn)與前一個(gè)點(diǎn)坐標(biāo)來判斷是在哪個(gè)扇區(qū)，只要四個(gè)扇區(qū)都經(jīng)過了就表示劃了一個(gè)圓。這樣做的話對(duì)鼠標(biāo)軌跡要求不高，只要走的方向?qū)托辛恕?/p>
如何計(jì)算扇區(qū)
那么來看看如何知道是在哪個(gè)扇區(qū)呢？因?yàn)槭髽?biāo)在剛開始時(shí)只是在某一個(gè)點(diǎn)上，只有移動(dòng)了一段距離后才知道在哪。我們看一下下面的圖：
這里面我標(biāo)識(shí)了10個(gè)點(diǎn)，我們可以發(fā)現(xiàn)鼠標(biāo)在經(jīng)過這10個(gè)點(diǎn)說明就是畫了一個(gè)圈，對(duì)吧。然后我們看這些點(diǎn)有哪些規(guī)律？
比如,假如我們鼠標(biāo)是從P1開始移動(dòng)的，然后移動(dòng)到P2，再到P3，可以發(fā)現(xiàn)x軸是越來越大的，同時(shí)y軸也是越來越大。也就是說我們只要將鼠標(biāo)移動(dòng)的軌跡記錄下來，然后逐個(gè)點(diǎn)進(jìn)行分析，只要符合上面規(guī)律的就可以理解為在【右上扇區(qū)】。
同理，我們?cè)倏碢3->P6,則發(fā)現(xiàn)x軸是越來越小，而y軸是越來越大的，說明是【右下扇區(qū)】，后面兩個(gè)扇區(qū)以此類推。
然后考慮順時(shí)針問題
上面說了每個(gè)扇區(qū)的計(jì)算方式，但是這個(gè)如果不考慮時(shí)針方向是不成立的，上面的計(jì)算方式必須是順時(shí)針才行。如果是逆時(shí)針則要反過來計(jì)算，所以一旦鼠標(biāo)逆時(shí)針轉(zhuǎn)到，那么也會(huì)計(jì)算扇區(qū)，只不過計(jì)算的扇區(qū)就不是自己想要的結(jié)果啦。
在此我的解決方法是，在計(jì)算了扇區(qū)后進(jìn)行一次檢查，如果發(fā)現(xiàn)前一個(gè)扇區(qū)不是連續(xù)的就說明時(shí)針方向錯(cuò)了，重新開始記錄軌跡。還是以上面那個(gè)圖為例子：
當(dāng)P1-P3開始移動(dòng)后，說明在【右上扇區(qū)】，然后判斷前一個(gè)扇區(qū)是否有經(jīng)過，如果沒有經(jīng)過說明當(dāng)前扇區(qū)可能是開始扇區(qū)，然后判斷后一個(gè)扇區(qū)是否有經(jīng)過，如果沒有經(jīng)過說明確實(shí)是首扇區(qū)，是正常的軌跡。反之則說明鼠標(biāo)轉(zhuǎn)反了。
其他的扇區(qū)以此類推。
最后發(fā)一下代碼
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式