算法在前端中的一些應用-旋轉

一般的前端開發業務中用算法的場景比較少，用算法比較多的場景每每是H5遊戲和活動頁比較多。

下面分享開發場景中的算法應用。

旋轉

先思考一下，下圖中的旋轉如何實現 ？

手機掃碼體驗

體驗連接: http://auto.163.com/special/h...

=========================================================

難點是如何簡便的判斷出手指拖動轉化成旋轉的角度與方向

比較好的辦法使用 向量積

先複習數學上的向量積的知識

模長：（在這裏θ表示兩向量之間的夾角（共起點的前提下）（0°≤θ≤180°），它位於這兩個矢量所定義的平面上。）

方向：a向量與b向量的向量積的方向與這兩個向量所在平面垂直，且遵照右手定則。（一個簡單的肯定知足「右手定則」的結果向量的方向的方法是這樣的：若座標系是知足右手定則的，當右手的四指從a以不超過180度的轉角轉向b時，豎起的大拇指指向是c的方向。）

假設 a 向量的座標爲(ax, ay, ax)，b 向量的座標爲 (bx, by, bz)，i，j，k的值爲1。向量的z值爲0。也就是向量只在x，y平面。

上面的公式能夠化簡爲 a x b = axby - aybx

上圖中a位置座標(1, 2, 0) b位置座標(2, 1, 0)，也就是ab 都在xy平面內。

當向量從a位置旋轉到b位置，根據上面的公式計算的結果爲-3;

當向量從b位置旋轉到a位置，根據上面的公式計算的結果爲3;

因此咱們能夠根據結果值的正負來判斷方向，根據算出的正玄值來得出旋轉的角度。