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 点の重心も中心です。したがって、一般に、頂点の座標を平均するだけです。頂点も計算する必要があるため、ここでは実際には速度が上がりませんが、理想的には、頂点を計算する関数と中心を計算する関数の 2 つが必要です。

于 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 に答える