4

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

我已经制作了一个 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?
4

2 回答 2

9

如果我们从一个给定宽度 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个点的质心也是圆心。所以一般来说，我们可以平均顶点的坐标。由于我们还必须计算顶点，这并不能真正加快速度，但理想情况下，您将有两个函数，一个用于计算顶点，一个用于计算中心。

于 2012-04-13T09:03:05.727 回答
2

矩形中的角度不是 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?
于 2012-04-13T02:40:07.693 回答