html - Canvas Get Shape Rotation Value

Question

キャンバス上の形状の実際の回転値/度を取得する方法を無限に探してきました。

ご覧のとおり、中央に矢印の付いた円があります。キャンバスをクリックすると、矢印が回転し始めます。もう一度クリックして矢印を停止すると、矢印objに保存されている現在の回転値がコンソールに出力されます。

私は数学が苦手で、Kineticjsからアニメーションコードを取得しました。これは私が使用しているライブラリです。ただし、選択したコードが、返されるローテーション値の原因である可能性があります。

私の目的は、矢印が円の4分の4のどれに着地するかを把握することです。どういうわけか現在の回転を360度から外すことができれば、次のようなことができます-

var rotation = 360 / arrow.rotate.val

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

しかし、私が得るのは1回転だけです= 6.xxxxxxxxxxxxx

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まで実行されるかは、1ターンがどの数字であるかを知っている限り関係ありません。この場合、2 * Math.PIなので、それを使用してください=）

score 0 · Accepted Answer

実際、あなたのコードには、ラジアン（シータ）を示すattrs.rotationという答えがあります。

  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)

2 に答える 2