Transformation de verticies pour rectangle non centré à l'origine

Question

Je pense que je ne fais que trop compliquer cela mais j'ai un rectangle que j'essaye de dessiner en utilisant une valeur de rotation. J'ai les coordonnées des quatre sommets et j'ai besoin des nouvelles coordonnées quand je les fais tourner de X degrés dans le sens des aiguilles d'une montre.

EDIT: Une chose à noter, je dessine sur le canevas HTML5 donc le système de coordonnées est un peu différent. X et Y sont toujours> 0 et l'augmentation de Y progresse vers le bas.

Des idées?

Merci

Answer 1

Donc, tout ce que vous avez vraiment besoin est une fonction qui prend un point, une origine (le centre de votre rectangle dans ce cas) et un angle:

function rotatePoint(p, origin, angle) { 
    if (angle === 0) return p; 
    // make the origin essentially zero: 
    var px = p.x - origin.x; 
    var py = p.y - origin.y; 
    if (px == 0 && py == 0) return p; 
    var rad = angle * Math.PI/180; 
    var cosine = Math.cos(rad); 
    var sine = Math.sin(rad); 
    p.x = cosine * px - sine * py; 
    p.y = sine * px + cosine * py; 
    // put the point back: 
    p.x += origin.x; 
    p.y += origin.y; 
    return p; 
}; 

Donc, si vous vouliez tourner un sommet à 10,10 par 45 deggrees autour du centre qui est (disons) 20,20, vous feriez: rotatePoint({x:10, y:10}, {x:20, y:20}, 45) vous donnerait (20, 5.85), et ainsi de suite.