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

Question

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

我已经做了一个javascript函数来做这个,但它输出错误的答案.我不明白我的数学错误在哪里,或者我不是把所有东西都转换成弧度？

你能告诉我如何才能使我的功能正确计算旋转矩形的中点吗？

这个JSFiddle演示了我如何获得中间点的错误值:http://jsfiddle.net/HyFrX/1/

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 degtorad  = Math.PI/180;
   x            += Math.cos(degtorad * (45+angle)) * dist;
   y            += Math.sin(degtorad * (45+angle)) * 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?

Answer 1

如果我们从给定宽度w和高度h的矩形开始,那么它的顶点位于:

• (0,0)
• (0,h)的
• (W,0)
• (W,H)

因此,中心处于所有这些的平均值

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

使用'逆时针绕原点' 旋转矩阵旋转:

M = [ cos a, -sin a
      sin a,  cos a ]

给我们

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坐标):

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 ) };
}

JS小提琴

矩形的质心是中心,顶点处4个点的质心也是中心.所以通常我们可以平均顶点的坐标.由于我们还必须计算顶点,这在这里并没有真正加快速度,但理想情况下你会有两个函数,一个用于计算顶点,另一个用于计算中心.