通常的前端开发业务中用算法的场景比拟少,用算法比拟多的场景往往是 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;
所以咱们能够依据后果值的正负来判断方向,依据算出的正玄值来得出旋转的角度。