javascript - 如何从 SVG 坐标系中的 3 个 x/y 点查找旋转度数

Question

抱歉，我应该知道这一点。我在 SVG 2d 坐标系上有 2 个点。我需要获得度数(0-360)，我现在能返回的就是 0-180 返回 0，0-180 上没有负号或正号...我可以找到接近的问题，但没有一个会导致 0 -360。

这是 JavaScript 代码:

// center point, say 200,200
var rx = that.get("rotateOriginX");     // ember code but substitute 200,200 if you want  
var ry = that.get("rotateOriginY");

// I create third point (directly up on coordinate system)
// 200, 190 - line straight up and down to angle vertex above
var p1x = rx;        
var p1y = ry - 10;   // this is negative 10 to go up because svg y axis starts in upper left

// mouse position variable, this can be 360 degrees around vertex
var p2x = d3.mouse(this.parentNode.parentNode)[0];   
var p2y = d3.mouse(this.parentNode.parentNode)[1];

// I have three points now
var p0c = Math.sqrt(Math.pow(rx-p1x, 2) + Math.pow(ry-p1y, 2));
var p1c = Math.sqrt(Math.pow(rx-p2x, 2) + Math.pow(ry-p2y, 2));
var p0p1 = Math.sqrt(Math.pow(p2x-p1x, 2) + Math.pow(p2y-p1y, 2));

// this always returns 0-180-0 but is not signed (+/-) 
// ALL I WANT IS 0-360 so I can rotate a shape to user's preference as determined by mouse
var degrees = (180 * (Math.acos((p1c*p1c+p0c*p0c-p0p1*p0p1)/(2*p1c*p0c))) / Math.PI);

Answer 1

1. acos,asin

   • 属于 4 象限
   • 但在整个范围内并不精确
   • 它们几乎没有其他问题，例如需要夹紧......

2. atan(dy/dx)

   • 仅二象限
   • 这是因为atan(dy/dx)失去了原始dx,dy的符号

3. 4 象限 atan(dy/dx) = atan2(dy,dx) 或 atanxy(dx,dy)

   • 它只是带有 dx,dy 决策表的一些符号的 atan 来处理所有象限
   • 这是我的 atanxy在 C++ 中