Berechnen des Mittelpunkts eines gedrehten Rechtecks ​​in Javascript

Question

Ich versuche, den Mittelpunkt eines gedrehten Rechtecks ​​zu finden.

Ich habe eine JavaScript-Funktion gemacht, um dies zu tun, aber es gibt falsche Antworten aus. Ich verstehe nicht, wo ich in meiner Mathematik falsch liege oder vielleicht konvertiere ich nicht alles in Radiant?

Können Sie mir sagen, wie ich meine Funktion erhalten kann, um den Mittelpunkt eines gedrehten Rechtecks ​​korrekt zu berechnen?

Diese JSFiddle zeigt, wie ich für den mittleren Punkt falsche Werte bin immer: 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

Der Winkel in Rechtecke nicht mehr als 45 Grad ist, so dass Sie den Winkel finden müssen.

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? 

Answer 2

Wenn wir mit einem Rechteck mit einer bestimmten Breite w und Höhe h zu starten, dann seine Ecken sind bei:

• (0,0)
• (0, h)
• (w, 0)
• (w, h)

Somit ist das Zentrum an der Durchschnitt aller dieser

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

Drehen Sie den 'gegen den Uhrzeigersinn um den Ursprung' rotation matrix mit:

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

Geben Sie uns

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

zum ursprünglichen Koordinatensystem Übersetzen (nur die x in, y-Koordinaten zum Runterladen):

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

Also, in Code:

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 Fiddle

Der Schwerpunkt eines Rechtecks ​​ist das Zentrum, und der Schwerpunkt von 4 Punkten an den Scheiteln ist auch das Zentrum. Im Allgemeinen können wir nur die Koordinaten der Ecken mitteln. Da wir auch die Ecken berechnen müssen, beschleunigt das hier nicht wirklich, aber im Idealfall hätten Sie zwei Funktionen, eine für die Berechnung der Ecken und eine für die Berechnung des Mittelpunkts.