Vẽ Hình chữ nhật Xoay

Question

Tôi nhận ra điều này có thể là một vấn đề về toán học.

Để vẽ các đường cho hình chữ nhật của tôi, tôi cần phải giải quyết cho các góc của chúng. Tôi có một trung tâm hình chữ nhật tại (x, y) Với Chiều rộng và Chiều cao được xác định.

Để tìm các điểm màu xanh trên một hình chữ nhật không xoay trên đầu trang (góc = 0) Đó là

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)

thế nào Tôi tìm thấy các điểm nếu góc không phải là 0?

Xin cảm ơn trước.

---

Cập nhật: mặc dù tôi có (0,0) trong ảnh của mình làm điểm trung tâm nhiều khả năng điểm trung tâm sẽ không ở vị trí đó.

Answer 1

Đầu chuyển đổi các điểm trung tâm để 0,0

X '= Xx

Y' = YY

Sau đó xoay một góc của A

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

Y '' = (YY) * cos A + (xx) * sin Một

Một lần nữa biến đổi trở lại điểm trung tâm để x, y

X '''= (xx) * cos A - (YY) * sin A + x

Y '''= (YY) * cos A + (xx) * sin A + y

Do đó tính toán cho tất cả 4 điểm của (x, Y) với sau chuyển đổi

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

Y '' '= (YY) * cos A + (xx) * sin A + y

trong đó x, y là những điểm trung tâm của hình chữ nhật và X, Y là các điểm góc Bạn có n' t xác định chính xác ngay cả các điểm góc khi Angle là 0 như tôi đã đưa ra trong các ý kiến.

Sau khi thay thế bạn sẽ nhận được

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 

Tôi nghĩ rằng đây phù hợp với giải pháp của bạn.

Answer 2

Nếu 'theta' là góc chống chiều kim đồng hồ quay, sau đó ma trận xoay là:

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

tức

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

Nếu điểm luân chuyển không phải là ở nguồn gốc, trừ trung tâm quay từ tọa độ ban đầu của bạn, thực hiện xoay như được hiển thị ở trên, và sau đó thêm trung tâm quay trở lại trong một lần nữa.

Có ví dụ về biến đổi khác tại http://en.wikipedia.org/wiki/Transformation_matrix

Answer 3

Một trong những cách dễ nhất để làm điều này là để có những vị trí của điểm trước khi luân chuyển và sau đó áp dụng một tọa độ biến đổi. Kể từ khi nó tập trung vào (0,0), điều này chỉ đơn giản là một trường hợp sử dụng:

x '= x cos (theta) - tội lỗi y (theta)

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

Answer 4

Xem 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 (này đang trở thành một FAQ)

Answer 6

sử dụng này .... Tôi đã 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));