Dessiner un rectangle pivoté

Question

Je réalise que cela pourrait être plus un problème de maths.

Pour dessiner les lignes de mes rectangles, je dois résoudre pour leurs coins. J'ai un centre de rectangle à (x, y) avec une largeur et une hauteur définies.

Pour trouver les points bleus sur un rectangle non pivotée sur le dessus (angle = 0) Il est

UL = (x-Width/2),(y+height/2)
UR = (x+Width/2),(y+height/2)
LR = (x+Width/2),(y-height/2)
LL = (x-Width/2),(y-height/2)

Comment faire Je trouve les points si l'angle n'est pas 0?

Merci d'avance. Mise à jour: bien que j'ai (0,0) dans ma photo comme point central le plus probable, le point central ne sera pas à cet endroit.

Answer 1

d'abord transformer le point central à 0,0

X '= Xx

Y' = Yy

tourner Ensuite, pour un angle d'un

X '' = (Xx) * cos A - (Yy) * sin A

Y '' = (Yy) * cos A + (Xx) * sin A

transformer de nouveau en arrière du point central de x, y

X '' »= (Xx) * cos A - (Yy) * sin A + x

Y '' »= (Yy) * cos A + (Xx) * sin A + y

calculer par conséquent, pour l'ensemble des 4 points de (X, Y) avec la suite transformation

X '' '= (Xx) * cos A - (Yy) * sin A + x

Y '' '= (Yy) * cos A + (Xx) * sin A + y

où x, y sont les points centraux de rectangle et X, Y sont les points d'angle Vous avez n' t défini correctement même les points de coin quand Angle est 0 comme je l'ai donné dans les commentaires.

Après le remplacement, vous obtiendrez

UL = x + (Width/2) * cos A - (Height/2) * sin A , y + (Height/2) * cos A + (Width/2) * sin A 
UR = x - (Width/2) * cos A - (Height/2) * sin A , y + (Height/2) * cos A - (Width/2) * sin A 
BL = x + (Width/2) * cos A + (Height/2) * sin A , y - (Height/2) * cos A + (Width/2) * sin A 
BR = x - (Width/2) * cos A + (Height/2) * sin A , y - (Height/2) * cos A - (Width/2) * sin A 

Je pense que cela convient à votre solution.

Answer 2

Si 'thêta' est l'angle anti-horaire de rotation, la matrice de rotation est le suivant:

| cos(theta) -sin(theta) | 
| sin(theta) cos(theta) | 

ie

x' = x.cos(theta) - y.sin(theta) 
y' = x.sin(theta) + y.cos(theta) 

Si le point de rotation ne sont pas à l'origine, soustraire le centre de rotation à partir de vos coordonnées d'origine, effectuez la rotation comme indiqué ci-dessus, puis ajoutez à nouveau le centre de rotation.

Il y a des exemples d'autres transformations à http://en.wikipedia.org/wiki/Transformation_matrix

Answer 3

Une des façons les plus faciles à faire est de prendre l'emplacement du point avant la rotation, puis appliquer une transformation des coordonnées. Comme il est centré sur (0,0), cela est tout simplement un cas d'utilisation:

x '= x cos (thêta) - sin y (thêta)

y' = y cos (thêta) + x sin (thêta)

Answer 4

Voir 2D Rotation.

q = initial angle, f = angle of rotation. 

x = r cos q 
y = r sin q 

x' = r cos (q + f) = r cos q cos f - r sin q sin f 
y' = r sin (q + w) = r sin q cos f + r cos q sin f 

hence: 
x' = x cos f - y sin f 
y' = y cos f + x sin f 

Answer 5

Rotation matrix (cela devient une FAQ)

Answer 6

utiliser cette .... Je me suis reussi ...

ctx.moveTo(defaults.x1, defaults.y1); 

    // Rotation formula 
    var x2 = (defaults.x1) + defaults.lineWidth * Math.cos(defaults.rotation * (Math.PI/180)); 
    var y2 = (defaults.y1) + defaults.lineWidth * Math.sin(defaults.rotation * (Math.PI/180)); 

    ctx.lineTo(x2, y2); 

    x2 = (x2) + defaults.lineHeight * Math.cos((defaults.rotation + 90) * (Math.PI/180)); 
    y2 = (y2) + defaults.lineHeight * Math.sin((defaults.rotation + 90) * (Math.PI/180)); 
    ctx.lineTo(x2, y2); 

    x2 = (x2) + defaults.lineWidth * Math.cos((defaults.rotation + 180) * (Math.PI/180)); 
    y2 = (y2) + defaults.lineWidth * Math.sin((defaults.rotation + 180) * (Math.PI/180)); 
    ctx.lineTo(x2, y2); 

    x2 = (x2) + defaults.lineHeight * Math.cos((defaults.rotation + 270) * (Math.PI/180)); 
    y2 = (y2) + defaults.lineHeight * Math.sin((defaults.rotation + 270) * (Math.PI/180));