Js 跟手轉動的羅盤指針

或許跟手拖拽已經足夠廣泛，但是跟手沿着圓弧轉動的羅盤指針，卻依然足夠挑戰，先來看看咱們要實現的小目標，查看效果(請用手機打開，或者用chrome的手機模式打開)

任務分解、分析

1、 跟手拖拽的通常套路

1. touchstart 的時候記錄初始位置：ox，oy
2. touchmove 的過程當中移動到新的位置：x = x1-ox, y = x1 - oy
3. touchend 的時候，這步好像也不須要幹啥

2、圓弧轉盤轉動的通常作法

1. 設定圓心轉動的原點
2. 動態的修改旋轉的角度（或者弧度）

3、合二爲一
如何將手勢動做反應到圓弧的角度或者弧度變動上，這是問題的癥結所在，起初我也爲此而困頓不已

先是經過設定某一位移而旋轉固定的角度，可是很難肯定圓弧的有效位移，就算肯定了有效位移，當旋轉到一百八十度以後也蒙圈，反着動了~~
並且這種不均勻的運動實在也難以服衆

糾結之際，我拿起了紙和筆，從新尋找靈感：

注意到圖片紅色的點是圓心，綠色的點是 touchstart 時候記錄下的起始點，藍色的點是 touchmove 的過程當中不斷變化的目標點。咱們的目標很明確，計算指針變化的角度（或弧度），用我僅有的初中數學知識思考得知，知道三角形的每一個頂點，是能夠求出每一個頂角的角度。運用三角形的餘弦定理，求弧度值：

//得到point2頂角的弧度值
    //point1傳入起始點，point2傳入圓心，point3傳入結束點，可求得指針運動的夾角弧度
    function getAngle(point1, point2, point3) {
        var bb = (point2.y - point1.y)*(point2.y - point1.y) + (point2.x - point1.x)*(point2.x - point1.x);
        var aa = (point3.y - point1.y)*(point3.y - point1.y) + (point3.x - point1.x)*(point3.x - point1.x);
        var cc = (point3.y - point2.y)*(point3.y - point2.y) + (point3.x - point2.x)*(point3.x - point2.x);
        var cosa = (bb + cc - aa)/(2*Math.sqrt(bb)*Math.sqrt(cc));
        return Math.acos(cosa);
    }複製代碼

剛纔只考慮了順時針的狀況，不能忽略逆時針的方向：

這種狀況的弧度值爲 -getAngle(point1, point2, point3)，這並不難理解，難點在於如何判斷究竟是逆時針仍是順時針，能夠經過以下的面積量的方法來判斷順時針仍是逆時針

//經過面積量的方法來判斷順時針仍是逆時針
    //point1傳入圓心，point2傳入起始點，point3傳入終點
    function duration(point1, point2, point3) {
        var sp = (point1.x-point3.x)*(point2.y-point3.y)-(point1.y-point3.y)*(point2.x-point3.x);
        console.log(sp);
        if(sp>0) {//順時針
            return 1
        } else if(sp<0) {="" 逆時針="" return="" -1="" }="" else="" 0;="" }<="" code="">
  
  
  

 複製代碼

完整的程序代碼

go ~~

結語

Js 特效，有時候代碼不須要不少，可是找到其中的規律再轉化爲機器認識的語言絕非易事，難就難在這個數學建模的過程，須要一點想象力，能夠給予的經驗就是，拿起你的筆和紙，去畫，靈感自來

歡迎來到個人會客廳：