Canvas javascript: setTransform, tutte le trasformazioni in un unica funzione
Tags: canvas, javascript, transform, settransform
Published: 2021-02-08 13:43:29

---
title: Canvas javascript: setTransform, tutte le trasformazioni in un unica funzione
published: true
description: setTransform, tutte le trasformazioni in un unica funzione
tags: #canvas, #javascript, #transform, setTransform
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/va63f2c43s37wnxsml3b.jpg
---

Ci sono varie trasfomazioni che si possono applicare ad un elemento, si possono **traslare, ruotare, scalare** e per ognuna c'è una funzione specifica. 
In alternativa, il context 2d **ci fornisce di una funzionalità molto comoda che le racchiude tutte**. 

In verità le funzioni sono due, _transform_ e _setTransform_ che sono uguali e utilizzano gli stessi argomenti, si differnziano solo per una caratteristica: 
* **_setTransform_ "resetta" tutte le trasformazioni fatte in precendenza**, quindi non si hanno più bisogno di usare il salvamento e il ripripristono di stato. (ho dedicato un paragrafo alla spiegazioni del savataggio/ripristino stato in questo [articolo](https://dev.to/camizzilla/canvas-javascript-trasformazioni-9mi))
* Mentre **_transform_ somma le varie trasformazioni**. 

Ad esempio se usiamo due _traslation_ uguali che radoppiano gli oggetti sottostanti,questi verranno quadrupicati, invece se usassimo due _setTransform_ gli oggetti subirebbero la trasformazione solo del secondo, perchè questo cancellerebbe gli effetti del primo, raddopiandoli.

Le due funzioni sono equivalenti, quindi le cose che vedremo sotto valgono anche per l'altra funzione.  

`ctx.setTransform(so, io, iv, sv, to, tv)`

* so: scala, quindi, riduce o ingrandisce orizzontalmente
* io: inclina orizzontalmente
* iv: inclina verticalmente
* rv: scala, quindi, riduce o ingrandisce verticalmente
* to: trasla (muove) il canvas orizzontalmente
* tv: trasla il canvas verticalmente

Da come si può dedurre, nella descrizione degli argomenti si possono dividere per caratteristiche in **tre coppie: scala, streccia, trasla**.

Di default....
`ctx.setTransform(1, 0, 0, 1, 0, 0);`

##SCALARE

Il primo _so_ e il quarto _sv_ argomenti **allarga e rimpicciolisce il canvas**.
Di default i valori sono settati entrambi a 1, quindi se volessimo ingrandila del doppio dovremmo passargli 2 come valore o se volessimo dimezzare le sue dimensioni gli passeremmo 0.5... e così via.

``` javascript
ctx.setTransform(2, 0, 0, 2, 0, 0);
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

ctx.setTransform(.5, 0, 0, .5, 0, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
```
##INCLINARE (RUOTARE)
**Per inclinare una figura in orizzontale** si valorizza l'argomento _io_ con un numero radiale da 0 a 1, mentre per **inclinarlo in verticale** si usa l'argomento _iv_.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x6qyv53j77t11eioci9h.jpg)

``` javascript
ctx.setTransform(1, .5, 0, 1, 0, 0);
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

ctx.setTransform(1, 0, .5, 1, 0, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(150, 50, 100, 100);
```

Con questi argomenti è possibile anche **ruotare la figura, basta passargli lo stesso valore, ma uno positivo e l'altro negativo**.

``` javascript
ctx.setTransform(1, .5, -.5, 1, 0, 0);
ctx.fillStyle = 'red';
ctx.fillRect(150, 50, 100, 100);

let degree = 45;
let radiant = degree * Math.PI / 180;
ctx.setTransform(1, radiant, -radiant, 1, 0, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(250, 0, 100, 100);
```

Nel secondo quadrato dello script ho usato la formula _grado * Math.PI / 180_ per **trasformare i gradi in radianti** e l'ho ruotato di 45gradi.


##TRASLARE
Gli ultimi due argomenti to e tv **spostano il canvas del valore che gli passiamo sia orizzontalmente sia verticalmente**.


``` javascript
ctx.setTransform(1, 0, 0, 1, 100, 100);
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

ctx.setTransform(1, 0, 0, 1, -30, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
```

{% codepen https://codepen.io/camizzilla/pen/abBOGMp %}

#CONCLUSIONE

Queste funzioni sono molto utili per la trasformazione, in un unico comando **fanno risparmiare memoria, righe di codice e tempo**.

Spero che l'articolo ti sia piaciuto Se hai dei consigli, suggerimenti o critiche costruttive lasciami un commento qui sotto oppure contattami trammite i miei social.