HTML5 Canvas: calcolo di un punto x, y quando ruotato

Question

Sviluppo una app di tela HTML5 e comporta la lettura di un file xml che descrive la posizione di frecce, rettangoli e altre forme che devo disegnare sulla tela.

Esempio di layout 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"/> 

Se l'oggetto viene ruotato esso comporta calcolare la posizione di un punto (chiamato P la nuova posizione dell'oggetto dopo la rotazione) quando ruotato intorno a un altro punto (a sinistra, superiore). Sto tentando di trovare una formula/formula generale che posso usare per calcolare questo punto P, ma la mia matematica è un po 'debole & Non riesco a identificare quale formula arco/tangente sono destinata a utilizzare.

Potete aiutarmi a trovare una formula che posso utilizzare per calcolare il punto P per le rotazioni che possono essere entrambe positive & negativo?

Nell'esempio sopra: punto (14.446) è la sinistra, punto superiore & lettera (226.496) è il punto centrale dell'oggetto quando non ruotato in modo che il punto = (sinistra + larghezza/2 , superiore + altezza/2) e il punto blu è il punto centrale quando viene ruotato. So come calulare la lunghezza della linea tra i punti (14.446) & (226.496) ma non come calcolare il punto blu x, posizione y - BTW: la lunghezza di questa linea è la stessa della linea tra il punto blu & (14,446)

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

Answer 1

È abbastanza semplice. In rotazione attorno l'origine del sistema di coordinate per l'angolo coordinate Theta (x, y) vengono cambiando

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

Così, tutto ciò che è necessario è tradurre punto di rotazione ad uno dei punti che avete. Lo scriviamo in un modo più semplice: (x1, y1) = (14,446) e (x2, y2) = (226,496). Stai provando a "ruotare" (x2, y2) intorno (x1, y1). Calcola (dx2, dy2) in un nuovo sistema di coordinate con l'origine su (x1, y1).

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

Ora ruotare (angoli positivi sono antiorario):

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

L'ultimo passo è tradurre coordinate del punto dall'origine a (x1, y1) nuovo all'originale (0,0);

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

ps: leggere anche questo :) http://en.wikipedia.org/wiki/Rotation_matrix e non dimenticare che la maggior parte delle funzioni trigonometriche in diversi linguaggi di programmazione si occupano per lo più con i radianti ..

pps: e spero che non ti ho spaventato - chiedere se hai qualche domanda.

Answer 2

Credo che nel tuo caso si dovrebbe essere in grado di calcolare questa posizione di rotazione con il seguente sistema di equazioni:

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

R la lunghezza del raggio di yor vettore (len nel tuo esempio).
deg angolo in gradi a cui si sta ruotando, i.g 120 °
x e le coordinate della posizione finale che stai cercando.
angle è l'angolo di rotazione effettivo (in rad, non gradi).
angle0 è il punto di angolo iniziale è stato ruotato in modo relativo all'asse X. Abbiamo bisogno di calcolarlo usando Math.atan.

Non testato. Quindi provalo. Ma l'idea è la stessa: fai uso di funzioni trigonometriche.

Answer 3

Un esempio di coordinate di calcolo: Dice roll