Comprendere la scala di canvas HTML 5 e tradurre l'ordine

Question

Sto facendo un po 'di grafica attorno a un centro X, Y di 0,0. Quando è il momento di eseguire il rendering, lo riposiziono con translate, quindi utilizzo la scala per fare in modo che il grafico riempia la tela (ad esempio ridimensiona tutto del 50%, ad esempio).

Ho notato che è importante chiamare la scala e quindi tradurre, tradurre e ridimensionare e non riesco a capirlo. Questo è un problema poiché non sempre tutto va bene, ma il mio modello mentale non è completo, quindi è difficile ripararlo.

Qualcuno può spiegare perché l'ordine della bilancia e le chiamate di traduzione sono importanti?

Answer 1

Quindi cerchiamo di disegnare una griglia su una tela 300x300:

http://jsfiddle.net/simonsarris/4uaZy/

Questo farà. Niente di speciale. Una linea rossa indica dove si trova l'origine scorrendo (0,0) e si estende molto molto lontano, quindi quando lo traduciamo vedremo qualcosa. L'origine qui è l'angolo in alto a sinistra, dove le linee rosse si incontrano in (0,0).

Tutte le traduzioni sottostanti si verificano prima di disegnare la griglia, quindi sposteremo la griglia. Questo ti consente di vedere esattamente cosa sta succedendo a Orgiin.

---

Quindi, consente di tradurre la tela di 100,100, spostandolo verso il basso + a destra:

http://jsfiddle.net/simonsarris/4uaZy/1/

così abbiamo tradotto l'origine, che è dove la X rossa è centrato. L'origine è ora a 100.100.

---

Ora tradurremo e quindi ridimensioneremo. Notare come l'origine si trova nella stessa posizione dell'ultima immagine, ogni cosa è solo due volte più grande.

http://jsfiddle.net/simonsarris/4uaZy/2/

Boom. L'origine è ancora a 100.100. Tuttavia, tutto è gonfio di 2. L'origine è cambiata, quindi tutto diventa gonfio al suo posto.

---

Ora li guardiamo al contrario.Questa volta abbiamo scala prima, quindi tutto è grasso fin dall'inizio:

http://jsfiddle.net/simonsarris/4uaZy/3/

Tutto si gonfia per 2. L'origine è al 0,0, il suo punto di partenza.

---

Ora eseguiamo una scala e quindi una traduzione.

http://jsfiddle.net/simonsarris/4uaZy/4/

Stiamo traducendo da 100,100 ancora, ma l'origine è mosso da 200,200 in pixel reali. Confronta questo con due immagini precedenti.

Questo perché tutto ciò che accade dopo una scala deve essere ridimensionato, comprese le trasformazioni aggiuntive. Così trasformando da (100,100) su una tela in scala conduce ad esso si muove da 200, 200.

---

La cosa da asporto da ricordare è che cambiando la trasformazione influisce su come le cose vengono disegnati (o trasformati!) Da allora in poi . Se si scala x2, e poi tradurre, la traduzione sarà x2

Se volete vedere, matematicamente, ciò che sta accadendo ad ogni passo vi incoraggio a dare un'occhiata al codice qui:

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

Questo simula l'intero processo di trasformazione svolto dalla tela e consente di vedere in che modo le trasformazioni precedenti modificano quelle che vengono dopo.

Answer 2

Il ridimensionamento e la rotazione vengono eseguiti rispetto all'origine, quindi se la trasformazione ha una traduzione, ad esempio, ciò renderà l'ordine importante.

Heres una buona lettura: Why Transformation Order Is Significant