Offset matrice di trasformazione affine

Question

Questo mi ha ucciso negli ultimi giorni. Nemmeno scherzando, ma ho davvero insistito su questo cercando di risolverlo.

Attualmente sto cercando di utilizzare le matrici di trasformazione affine per creare una proiezione isometrica in HTML5. Ricevo una tessera che è un quadrato ruotato di 45 gradi (essenzialmente un diamante quadrato su una tela quadrata). Quindi ridimensiono uno degli assi 'a seconda che ci sia un delta nella direzione x o y. Quindi ho inclinato l'asse di un fattore per adattarlo. Quindi, annullo la rotazione iniziale ruotandola di -45 gradi.

Attualmente, la mia matrice affine è:

 // note: the difference in z is about 10 in this example, 
     //  so, xDiff is usually 40 
     var xDiff = 4 * (center.z - map[x+1][y].land.z); 
     var yDiff = 4 * (center.z - map[x][y+1].land.z); 

     var matrix = multiplyAll(
     // Rotation 
     [COS45, SIN45, 
     -SIN45, COS45], 

     // Scale in each respective axis 
     [(44+yDiff)/44, 0, 
     0, (44+xDiff)/44], 

     // Skew each axis 
     [1, -yDiff/(44+yDiff), 
     -xDiff/(44+xDiff), 1], 

     // Negate the rotation 
     [NCOS45, NSIN45, 
     -NSIN45, NCOS45] 
    ); 

Poi ho disegnare utilizzando:

 // the map has its own x & y values which directions are determined by the red x & y arrows in the picture 
     // pX & pY are the point relative to the canvas origin 
     var pX = x * 22 - y * 22 + 22; 
     var pY = y * 22 + x * 22 - 22 - (center.z * 4); 
     context.setTransform(matrix[0], matrix[1], 
          matrix[2], matrix[3], 

          300, 100); 

     //m_Context.drawImage(image, pX, pY); 
     drawDiamond(pX, pY, true); // draws a 44x44 diamond 

Come si può vedere, le matrici trasformati sono essere disegnato rispetto alla trasformazione ed asse x (penso che il "nuovo" asse x abbia una pendenza di yDiff/44). Non sono sicuro di come disegnare le forme in modo che il risultato trasformato si trovi nella posizione corretta. Usare pY = x * 22 - (yDiff/10); sembra avvicinarsi al punto, ma ho praticamente indovinato collegando numeri casuali.

tl; dr:

• ho eseguito una trasformazione
• Ho una coordinata in cui una tegola dovrebbe essere (se non è stato trasformato)
• Come ho calcolare l'offset richiesto in modo che la coordinata di una piastrella trasformata sia la stessa di dove dovrebbe essere se non fosse stata trasformata?

PS: Gli strani diamanti sul fondo possono essere ignorati per ora poiché possono correctly be created UNA VOLTA ho scoperto come calcolare gli offset.

Answer 1

Una matrice affine di trasformazione ([abcdef]) esprime le due equazioni

x' = ax + cy + e 
y' = bx + dy + f 

Quindi, è possibile utilizzare gli offset e e f per bypassare le parti di scala e inclinazione (4x4 trasformazione lineare incorporato nella matrice 2x3 o 3x3).

Viene utilizzato molto nella programmazione PostScript, in cui le coordinate utilizzate per disegnare un oggetto sono relative a un'origine locale. Se si concatenano le matrici, eseguire la conversione prima del ridimensionamento e inclinazione e i valori e e f rimarranno indisturbati.