HTML5 Canvas: Tính điểm x, y khi xoay

Question

Tôi đang phát triển Ứng dụng Canvas HTML5 và liên quan đến việc đọc tệp xml mô tả vị trí của mũi tên, hình chữ nhật và các hình dạng khác tôi cần vẽ trên canvas.

Ví dụ về cách bố trí XML:

<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/> 

Nếu đối tượng được luân chuyển nó liên quan đến việc tính toán vị trí của một điểm (gọi tắt là P vị trí mới của đối tượng sau khi luân chuyển) khi quay xung quanh một điểm khác (trái, hàng đầu). Tôi đang cố gắng để đưa ra một chức năng chung/công thức tôi có thể sử dụng để tính toán điểm P nhưng Toán học của tôi là một chút yếu & Tôi không thể xác định công thức arc/tangent mà tôi muốn sử dụng.

Bạn có thể hỗ trợ tôi để đưa ra công thức mà tôi có thể sử dụng để tính điểm P cho các phép quay có thể dương cả là & không?

Trong ví dụ trên: Điểm (14.446) là bên trái, điểm đầu & điểm (226.496) là điểm giữa của đối tượng khi không xoay nên điểm = (trái + chiều rộng/2 , đầu + chiều cao/2) và chấm màu xanh lam là điểm giữa khi xoay. Tôi biết cách tính toán độ dài của đường thẳng giữa các điểm (14.446) & (226.496) nhưng không phải cách tính điểm màu xanh x, vị trí y - BTW: độ dài của đường này giống như đường giữa điểm màu xanh & (14,446)

len = sqrt((496-446)^2 + (226-14)^2); 
    = 227.56; 

Answer 1

Nó khá đơn giản. Trong vòng xoay xung quanh nguồn gốc của hệ tọa độ cho góc Theta phối (x, y) đang thay đổi như

x' = x * cos(Theta) - y * sin(Theta); 
y' = x * sin(Theta) + y * cos(Theta); 

Vì vậy, tất cả những gì bạn cần là để dịch điểm quay đến một trong những điểm mà bạn có. Cho phép viết nó theo một cách đơn giản hơn: (x1, y1) = (14,446) và (x2, y2) = (226,496). Bạn đang cố gắng "xoay" (x2, y2) xung quanh (x1, y1). Tính toán (dx2, dy2) trong hệ tọa độ mới với gốc tại (x1, y1).

(dx2,dy2) = (x2-x1,y2-y1); 

Bây giờ xoay (góc dương là ngược chiều kim đồng):

dx2' = dx2 * cos(165 Degrees) - dy2 * sin(165 Degrees); 
dy2' = dx2 * sin(165 Degrees) + dy2 * cos(165 Degrees); 

Bước cuối cùng là để dịch tọa độ của điểm từ nguồn gốc tại (x1, y1) trở lại với bản gốc (0,0);

x2' = dx2' + x1; 
y2' = dy2' + y1; 

ps: đọc cũng này :) http://en.wikipedia.org/wiki/Rotation_matrix và đừng quên rằng hầu hết các hàm lượng giác bằng các ngôn ngữ lập trình khác nhau đối phó chủ yếu với radian ..

pps: và tôi hy vọng rằng tôi không sợ ta - hãy hỏi Nếu bạn có câu hỏi nào.

Answer 2

Tôi nghĩ rằng trong trường hợp của bạn, bạn sẽ có thể để tính toán vị trí luân phiên này với hệ thống sau đây của phương trình:

x = R * Math.cos(angle - angle0); 
y = R * Math.sin(angle - angle0); 
angle = deg * Math.PI/180; 
angle0 = Math.atan(y0/x0); 

R chiều dài của vector bán kính Yor (len trong ví dụ của bạn).
deg góc theo độ bạn đang quay sang, i.g 120 °
x và y tọa độ của vị trí cuối cùng mà bạn đang tìm kiếm.
angle là góc quay thực tế (tính bằng rad, không phải grad).
angle0 là điểm góc ban đầu được xoay để tương đối lại với trục X. Chúng ta cần tính toán trước nó bằng cách sử dụng Math.atan.

Chưa được kiểm tra. Hãy thử một lần đi. Nhưng ý tưởng cũng giống như vậy - sử dụng các hàm lượng giác.

Answer 3

Một ví dụ về tọa độ tính toán: Dice roll