算法在前端中的一些应用-旋转

通常的前端开发业务中用算法的场景比较少，用算法比较多的场景往往是H5游戏和活动页比较多。

下面分享开发场景中的算法应用。

旋转

先思考一下，下图中的旋转如何实现？

手机扫码体验

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

难点是如何简便的判断出手指拖动转化成旋转的角度与方向

比较好的办法使用向量积

先复习数学上的向量积的知识

模长：（在这里θ表示两向量之间的夹角（共起点的前提下）（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;

所以我们可以根据结果值的正负来判断方向，根据算出的正玄值来得出旋转的角度。