Rysowanie obróconego prostokąta

Question

Zdaję sobie sprawę, że może to być bardziej problem matematyczny.

Aby narysować linie dla moich prostokątów, muszę rozwiązać ich narożniki. Mam środek prostokąta na (x, y) o zdefiniowanej szerokości i wysokości.

Aby znaleźć niebieskie punkty na non obróconym prostokąta na górze (kąt = 0) Jest

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)

Jak zrobić Znajduję punkty, jeśli kąt nie wynosi 0?

Z góry dziękuję.

---

Aktualizacja: chociaż mam (0,0) w moim obrazie jako punktu środkowego najprawdopodobniej punkt środkowy nie będzie w tym miejscu.

Answer 1

przekształcania z punktu centralnego do 0,0

X '= xx

Y' = Yy

Następnie obraca się o kąt A

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

Y '= (RR) * cos A + (XX) * sin

ponownie przekształcić z powrotem środkowy punkt X, Y

X'”= (XX) * cos A - (RR) * sin + x

Y "” = (RR) * cos A + (XX) * sin + y

Zatem obliczenie dla 4 punkty (x, y) zgodnie z następującym przekształcenie

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

Y " '= (RR) * cos A + (XX) * sin + y

gdzie x, y są punkty środkowe prostokąta, X, Y są punkty narożnikowe mieć n t zdefiniował poprawnie nawet punkty narożne, gdy Kąt wynosi 0, tak jak podałem w komentarzach.

Po podstawieniu dostaniesz

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 

myślę, że to pasuje do Twojego rozwiązania.

Answer 2

If theta "jest w przeciwną stronę kąta obrotu, to matryca jest obrotowa:

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

tj

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

Jeżeli punkt obrotu nie jest źródłem odjąć środek obrotu względem oryginalnych współrzędnych, wykonaj obrót, jak pokazano powyżej, a następnie ponownie dodaj środek obrotu.

Jest przykłady innych przekształceń w http://en.wikipedia.org/wiki/Transformation_matrix

Answer 3

Jednym z najprostszych sposobów, aby to zrobić, to podjąć lokalizację punktu przed obrotem, a następnie zastosować współrzędnych przekształcać. Ponieważ jest wyśrodkowany na (0,0), jest jedynie przypadek z:

x '= x cos (teta) - y sin (teta)

Y' = Y cos (teta) + X sin (theta)

Answer 4

Zobacz 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 (to staje się FAQ)

Answer 6

użycie tego .... mam succeded ...

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));