Entrada destacada

Como usar enums en Android, kotlin

el
0

Transformaciones simples en Canvas (rotate y scale) - Animación

el
Las transformaciones en canvas son el ajuste matemático de las propiedades físicas de las formas dibujadas. Las dos transformaciones más utilizada son scale() y rotate().

 Bien ahora veamos como aplicar estas transformaciones, dibujaremos primero una forma base.

1
2
3
4
5
  context.fillStyle = "#C7E500";
  context.strokeStyle = "#6E7F00";
  context.lineWidth = 4;
  context.fillRect(200, 30, 200, 200);
  context.strokeRect(200, 30, 200, 200);

Ahora, si queremos rotar 35° el canvas, primero reiniciaremos las configuraciones de nuestro canvas, ya que lo que se está rotando no es sólo el cuadrado, si no todo el lienzo (Canvas), las propiedades e escala, inclinación y traslación pueden ser reiniciadas con setTransform(). El segundo paso es usar rotate() el cual utiliza radianes para especificar el ángulo.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
  function radianes(grados) {
    return grados * Math.PI / 180;
  }
  
  context.fillStyle = "#C7E500";
  context.strokeStyle = "#6E7F00";
  context.lineWidth = 4;

  context.setTransform(1, 0, 0, 1, 0, 0);
  context.rotate(radianes(35));

  context.fillRect(200, 30, 200, 200);
  context.strokeRect(200, 30, 200, 200);

Aquí un ejemplo de cómo usar las funciones contexto.ratate() y contexto.scale() para crear una animación.


See the Pen Scale and Rotete by Jesus Tepec (@JesusTepec) on CodePen.


Anterior Siguiente

Comentarios

Publicar un comentario