html - 画布获取形状旋转值

Question

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

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

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

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

var rotation = 360 / arrow.rotate.val

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

然而，我得到的只是一个完整的旋转 = 6.xxxxxxxxxxxx

score 0 · Accepted Answer

Actually, your code does have the answer, attrs.rotation, which shows radians(theta)

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

You can simply change this to degree.

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

FYI, Formulas to convert between radians and degrees are.

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

score 0 · Accepted Answer

这些值是弧度，因此以“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 回答 2