Comprensión de HTML 5 escala de lienzo y orden de traducción

Question

Estoy haciendo gráficos alrededor de un centro X, Y de 0,0. Cuando es hora de renderizar, cambio de posición con la traducción, y luego uso la escala para hacer que el gráfico llene el lienzo (es decir, escalar todo en un 50%, por ejemplo).

Me di cuenta de que importa si llamas a scale y luego traduces, traduces y luego escalas y no puedo entenderlo. Esto es un problema ya que no todo encaja, pero mi modelo mental no está completo, por lo que es difícil solucionarlo.

¿Alguien puede explicar por qué el orden de la escala y las llamadas de traducción importan?

Answer 1

Así que vamos a dibujar una cuadrícula en un lienzo de 300x300:

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

Esto va a hacer. Nada especial. Una línea roja indica dónde se encuentra el origen al atravesar (0,0) y extenderse muy, así que cuando lo traduzcamos veremos algo. El origen aquí es la esquina superior izquierda, donde las líneas rojas se encuentran en (0,0).

Todas las traducciones a continuación ocurren antes de dibujar la cuadrícula, por lo que vamos a mover la cuadrícula. Esto le permite ver exactamente qué está sucediendo con la organización.

---

por lo que permite traducir el lienzo de 100.100, moviéndolo hacia abajo + derecha:

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

así que hemos traducido al origen, que es donde la X roja es centrado. El origen ahora está en 100,100.

---

Ahora vamos a traducir y luego escalar. Observe cómo el origen está en el mismo lugar que la última imagen, todo es dos veces más grande.

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

Boom. El orgin está todavía en 100,100. Todo está hinchado por 2 sin embargo. El origen cambió, luego todo se hincha en su lugar.

---

Ahora vamos a verlos en sentido inverso.Esta vez primera escala, así que todo es grasa desde el principio:

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

Todo se hinchó por 2. El origen está en 0,0, su punto de partida.

---

Ahora hacemos una escala y luego traducimos.

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

Estamos traduciendo por 100.100 todavía, pero el origen se ha movido por 200.200 en píxeles reales. Compare esto con dos imágenes anteriores.

Esto es porque todo lo que sucede después de una escala debe escalarse, incluidas las transformaciones adicionales. Por lo tanto la transformación de (100.100) sobre un lienzo reducido conduce a que se mueva por 200, 200.

---

Lo llevar a recordar aquí es que el cambio de la transformación afecta a cómo se dibujan las cosas (o se transforman!) A partir de entonces . Si se cambia la escala x2, y luego traducir, la traducción será x2

Si usted quiere ver, matemáticamente, lo que está sucediendo en cada paso le animo a echar un vistazo al código aquí:

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

Esto imita todo el proceso de transformación realizado por lienzo y le permite ver cómo las transformaciones previas modifican las que vienen después.

Answer 2

La escala y la rotación se realizan con respecto al origen, por lo que si su transformación tiene una traducción, por ejemplo, esto hará que la orden sea importante.

Heres una buena lectura: Why Transformation Order Is Significant