画布获取形状旋转值答案

【问题标题】：Canvas Get Shape Rotation Value画布获取形状旋转值
【发布时间】：2013-01-22 08:04:56
【问题描述】：

我一直在寻找一种方法来获取画布上形状的实际旋转 val/deg。

正如你在这里看到的，我有一个圆圈，中间有一个箭头。当您单击画布时，箭头开始旋转。再次单击停止箭头，它将向控制台输出为箭头 obj 存储的当前旋转值。

我数学不强，我从 Kineticjs 获取了动画代码，因为这是我正在使用的库。但是，我选择的代码可能是我返回的旋转值的罪魁祸首。

我的目标是找出箭头落在圆的 4 个四分之一上。如果我能以某种方式让当前的旋转脱离 360 度，我可以做类似的事情 -

var rotation = 360 / arrow.rotate.val

if(rotation <= 90) {
     console.log("First quarter")
}

我得到的只是一个完整的旋转 = 6.xxxxxxxxxxxxx

【问题讨论】：

【解决方案1】：

这些值是弧度，因此以“180”度为单位的半圈为 1*pi (3.1415[...])，以“360”度为单位的整圈为 2*pi (6.28.. ..)

获取值，我们称它为 v，并找出它是 Math.PI 的多少次：

var v = arrow.rotate.val;
var percent = 2*Math.PI/v;
var degrees = 360 * percent;

但真正的答案当然是“你不需要度数”。数字是从 0 到 6.28 还是从 0 到 360 无关紧要，只要您知道一整圈是哪个数字。在这种情况下，2*Math.PI，所以只需使用它 =)

【讨论】：

【解决方案2】：

其实你的代码确实有答案，attrs.rotation，它显示弧度(theta)

  console.log(arrowGrp.attrs.rotation)  //shows radian

您可以简单地将其更改为度数。

  console.log(arrowGrp.attrs.rotation * (180/Math.PI) % 360)  //shows degrees

仅供参考，在弧度和度数之间转换的公式是。

  degrees = radians * (180/Math.PI)
  radians = degrees * (Math.PI/180)

【讨论】：