前端實驗手札——拖拽旋轉圖片的實現及思路

讓咱們來看看如下這道題：

已知點A(x1,y1)和點B(x2,y2)，求兩點求與圓點O(x0,y0)的夾角θ的角度： ∠θ=arctan[(y2-y0)/(x2-x0)]-arctan[(y1-y0)/(x1-x0)]

是否有股熟悉的味道？涉及的數學知識是初中便開始教的三角函數。在拖拽旋轉圖片的實現中，最符合的就是上面這題的狀況，接下來好好說明一下。

分解公式

定義：

• 穿過點A和原點的直線與x軸夾角爲∠A
• 穿過點B和原點的直線與x軸夾角∠B

1. 先求∠A兩直角邊a=y1-y0和b=x1-x0
2. 根據反正切函數求出∠A，arctan(a/b)
3. 接着∠B兩直角邊a'=y2-y0和b'=x2-x0
4. 根據反正切函數求出∠B，arctan(a'/b')
5. 最後根據公式∠θ=∠A-∠B得出的夾角即是咱們須要求得的弧度。

弄清楚公式的結果

這裏不得不提的是反正切這類反三角函數：

反正切函數（inverse tangent）是數學術語，反三角函數之一，指函數y=tanx的反函數。計算方法：設兩銳角分別爲A，B，則有下列表示：若tanA=1.9/5，則 A=arctan1.9/5；若tanB=5/1.9，則B=arctan5/1.9。若是求具體的角度能夠查表或使用計算機計算。

通過按計算機推導出來的結論，反三角函數計算出來的結果是弧度，而一直使用的∠A角表示的實際上是角A的弧度。

弧度嚴格來講已是這次拖拽須要的結果，相信不是css大牛的各位接觸到的知識面還得提一下，像css關於旋轉的單位包含：

• rad：弧度(Radians)，圓共有2PI弧度。
• deg：度(Degress)，圓共有360度。
• turn：轉(Turns)，圓共1圈。

直接使用弧度設置選擇也是能夠的transform: rotate(.5 rad)，可是轉爲度(deg)能讓數值更直觀可讀。

弧度(rad)換算成角度(deg)： x=∠A*(180/π)

獲取所須要的兩點

這裏說說你們都知道的拖拽流程：

1. 點擊圖像
2. 移動鼠標
3. 鬆開鼠標

點擊圖像的時候採集所的點（設爲點A），在移動鼠標時記錄另外一個點（設爲點B），這樣手上就有兩個點。拖拽圍繞着圖片的中心旋轉，圖片中心做爲公式中的原點（設爲點O）使用。

在處理上，在點擊圖像時就計算出∠A的弧度，而後在移動鼠標的過程再計算∠B的弧度，並用∠A減∠B得出實際拖拽中旋轉了多少度，具體可看下面例子。

https://codepen.io/packy1980/...

勾上[記錄上次旋轉的弧度]後即是一個完整的拖拽旋轉例子