Differenze tra:

Transform e setTransform

 

La differenza tra ctx.transform(1, 0, 0, 1, 0, 0) e ctx.setTransform(1, 0, 0, 1, 0, 0) risiede nel modo in cui agiscono sulla matrice di trasformazione corrente.

Differenze tra transform e setTransform

  • ctx.transform(a, b, c, d, e, f): Questo metodo moltiplica la matrice di trasformazione corrente con la matrice specificata dai parametri. In altre parole, transform applica la matrice specificata come un'ulteriore trasformazione alla matrice di trasformazione esistente.

  • ctx.setTransform(a, b, c, d, e, f): Questo metodo sostituisce completamente la matrice di trasformazione corrente con la matrice specificata dai parametri. In altre parole, setTransform imposta la matrice di trasformazione corrente ai valori specificati, ignorando tutte le trasformazioni precedenti.

Quando Usare setTransform

Il metodo setTransform è particolarmente utile quando vuoi ripristinare la matrice di trasformazione a uno stato noto (come la matrice di identità) o applicare una trasformazione indipendente dalle precedenti. In pratica, setTransform ti permette di iniziare con una "tela bianca" per le trasformazioni.

Esempio Pratico

Vediamo un esempio per chiarire ulteriormente come setTransform e transform agiscono sulla matrice di trasformazione.

 

Utilizzo di setTransform:

 

setTransform: esegui

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <title>Utilizzo di setTransform</title>
 7 </head>
 8 <body>
 9 <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
10 
11 <script>
12 // Ottieni il contesto di disegno 2D
13 const canvas = document.getElementById('myCanvas');
14 const ctx = canvas.getContext('2d');
15 
16 // Disegna un rettangolo senza trasformazioni
17 ctx.fillStyle = 'blue';
18 ctx.fillRect(50, 50, 100, 100);
19 
20 // Applica una trasformazione: scala negativa sull'asse x per riflettere orizzontalmente
21 ctx.scale(-1, 1);
22 ctx.translate(-canvas.width, 0);
23 
24 // Disegna un rettangolo trasformato
25 ctx.fillStyle = 'red';
26 ctx.fillRect(50, 50, 100, 100);
27 
28 // Reimposta la trasformazione allo stato predefinito
29 ctx.setTransform(1, 0, 0, 1, 0, 0);
30 
31 // Disegna un altro rettangolo senza trasformazioni
32 ctx.fillStyle = 'green';
33 ctx.fillRect(50, 200, 100, 100);
34 </script>
35 </body>
36 </html>

 

Utilizzo di transform

 

transform: esegui

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <title>Utilizzo di transform</title>
 7 </head>
 8 <body>
 9 <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
10 
11 <script>
12 // Ottieni il contesto di disegno 2D
13 const canvas = document.getElementById('myCanvas');
14 const ctx = canvas.getContext('2d');
15 
16 // Disegna un rettangolo senza trasformazioni
17 ctx.fillStyle = 'blue';
18 ctx.fillRect(50, 50, 100, 100);
19 
20 // Applica una trasformazione: scala negativa sull'asse x per riflettere orizzontalmente
21 ctx.scale(-1, 1);
22 ctx.translate(-canvas.width, 0);
23 
24 // Disegna un rettangolo trasformato
25 ctx.fillStyle = 'red';
26 ctx.fillRect(50, 50, 100, 100);
27 
28 // Moltiplica la trasformazione corrente per la matrice di identità (non ha effetto reale)
29 ctx.transform(1, 0, 0, 1, 0, 0);
30 
31 // Disegna un altro rettangolo (continua a essere influenzato dalle trasformazioni precedenti)
32 ctx.fillStyle = 'green';
33 ctx.fillRect(50, 200, 100, 100);
34 </script>
35 </body>
36 </html>

 

Conclusione:

  • setTransform(1, 0, 0, 1, 0, 0) ripristina la matrice di trasformazione alla matrice di identità, annullando tutte le trasformazioni precedenti. È utile quando vuoi ricominciare da zero con le trasformazioni.
  • transform(1, 0, 0, 1, 0, 0) moltiplica la matrice di trasformazione corrente per la matrice di identità, il che non ha alcun effetto pratico sulla trasformazione corrente.

Quindi, setTransform non è inutile; è uno strumento fondamentale per controllare le trasformazioni in modo preciso e prevedibile.