前端实验手札——拖拽旋转图片的实现及思路

让我们来看看以下这道题：

已知点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/...

勾上[记录上次旋转的弧度]后便是一个完整的拖拽旋转例子