在javascript中计算旋转矩形的中点

我试图找到旋转矩形的中点。

我制作了一个javascript函数来实现这一点，但它输出的答案不正确。我不明白我的数学哪里出错了，或者我没有把所有的东西都转换成弧度

您能告诉我如何让函数正确计算旋转矩形的中点吗？

这个JSFIDLE演示了我如何获得不正确的中点值：

---

矩形中的角度不是45度，因此需要找到角度

function getMidPoint( /*int*/ x, /*int*/ y, /*int*/ width, /*int*/ height, /*int(in degrees)*/ angle )
{
   width         = width/2;
   height        = height/2   
   var dist      = Math.sqrt( (Math.pow(width,2)) + (Math.pow(height,2)) );
   var ang       = Math.atan(width/height);
   var degtorad  = Math.PI/180;
   x            += Math.cos(degtorad *angle+ang) * dist;
   y            += Math.sin(degtorad *angle+ang) * dist;
   return {px: x, py: y};
}

var p  = getMidPoint(50,90,200,300,0);
var p2 = getMidPoint(10,500,600,100,0);
alert("p1: "+p.px+","+p.py);     // Should be 150,240 right?
alert("p2: "+p2.px+","+p2.py);   // Should be 310,550 right?

---

如果我们从给定宽度w和高度h的矩形开始，则其顶点位于：

• （0,0）
• （0，h）
• （w，0）
• （w，h）

因此，该中心是所有这些指标的平均值

c = (2w,2h)/4
  = (w/2,h/2)
  = (w', h') // rename for convenience

使用“绕原点逆时针旋转”：

给我们

Mc = (w' cos a - h' sin a, w' sin a + h' cos a)
   = (w' c' - h' s',       w' s' + h' c') // rename for convenience

转换到原始坐标系（只需添加x，y坐标）：

因此，在代码中：

function getMidPoint(x, y, width, height, angle_degrees) {
    var angle_rad = angle_degrees * Math.PI / 180;
    var cosa = Math.cos(angle_rad);
    var sina = Math.sin(angle_rad);
    var wp = width/2;
    var hp = height/2;
    return { px: ( x + wp * cosa - hp * sina ),
             py: ( y + wp * sina + hp * cosa ) };
}

---

矩形的质心是中心，顶点上4个点的质心也是中心。一般来说，我们可以求出顶点坐标的平均值。由于我们还必须计算顶点，这并不能真正加快速度，但理想情况下，您将有两个函数，一个用于计算顶点，另一个用于计算中心。

为什么要将角度增加45度？@stark，因为中点与x，y点成45度。“我想它是45度，不是吗？”斯塔克呜普斯说，那么角度应该是多少？你把问题弄得太复杂了。只需计算中点，然后旋转该点。看见

Mc = (w' cos a - h' sin a, w' sin a + h' cos a)
   = (w' c' - h' s',       w' s' + h' c') // rename for convenience

Mc + O = (x + w' c' - h' s', y + w' s' + h' c')

function getMidPoint(x, y, width, height, angle_degrees) {
    var angle_rad = angle_degrees * Math.PI / 180;
    var cosa = Math.cos(angle_rad);
    var sina = Math.sin(angle_rad);
    var wp = width/2;
    var hp = height/2;
    return { px: ( x + wp * cosa - hp * sina ),
             py: ( y + wp * sina + hp * cosa ) };
}