Entrada destacada

Como usar enums en Android, kotlin

el
0

Dibujar figuras utilizando paths (rutas) a partir de un arreglo de puntos html5 canvas

el
Las rutas o caminos (paths) son utilizadas para dibujar una gran cantidad de figuras, como líneas, triángulos, arcos, circulos y muchos más. Para dibujar cierta figura se van dibujando líneas, una tras otra conectadas, hasta formar la figura requerida pero si se requiere dibujar una figura con una gran cantidad de puntos se crearía bastante código.


Dibujo de líneas

Para entender mejor el problema veamos el siguiente código para dibujar una simple línea, que va del punto (50, 50) al (300, 50) de color rojo y un grosor de 6.

context.strokeStyle = "red";
context.lineWidth = 6;
context.beginPath();
context.moveTo(50, 50);
context.lineTo(300, 50);
context.stroke();

Si bien las 2 primeras líneas no son necesarias, imaginemos que necesitamos construir una ruta con 40 vértices.

Dibujar triángulos con rutas

Cada que queremos agregar un nuevo punto a la ruta agregamos un lineTo(x,y) y si lo que queremos es que la ruta se cierre automáticamente usamos closePath(), esto unirá al primer punto y último.

context.strokeStyle = "red";
context.lineWidth = 6;
context.beginPath();
context.moveTo(50, 50);
context.lineTo(300, 50);
context.lineTo(300, 200)
context.closePath();
context.stroke();

En este caso la ruta se cierra automáticamente o bien hubiéramos podido usar un último lineTo(50, 50). Usar closePath() sólo será visible al usar 3 puntos diferentes y cuando un path puede ser cerrado también podemos usar fill() en vez de usar stroke(), con lo cual obtendremos una figura con relleno.


Arreglo de puntos

Con la siguiente función podemos crear una figura de n puntos dados.

  function drawPath(inicio, listaPuntos) {
    context.beginPath();
    context.moveTo(inicio[0], inicio[1]);
    for (indexP in listaPuntos) {
      context.lineTo(listaPuntos[indexP][0], listaPuntos[indexP][1]);
    }
    context.stroke();
    context.closePath();
  }

El primer parámetro es el punto de inicio de la figura el cual debe ser ingresado como una arreglo con dos elementos [x, y], el segundo parámetro debe ser una arreglo de pares de coordenadas (un arreglo de arreglos) o matriz de puntos (x, y). Esta matriz es recorrida por un bucle for in donde indexP representa en cada iteración un par de coordenadas. Así con indexP[0] accedemos a x y con indexP[1] accedemos a y.
Ahora solo faltaría crear un array con los puntos necesarios para dibujar una figura, veamos una forma sencilla de probar esto.

Primero el html

En el cual se enlaza con el archivo javascript que hemos llamado main.js en la línea 6.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Figuras a partir de paths</title>
    <script src="main.js"></script>
</head>
<body>
    <div>
        <canvas id="canvasOne" width="640" height="480">
        </canvas>
    </div>
</body>
</html>

Ahora el archivo main.js 

El contenido del archivo javascript será la inicionalización del contexto de canvas, la construcción del arreglo de puntos para dibujar la figura y la función que se mostró anteriormente.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var theCanvas = document.getElementById("canvasOne");
if (theCanvas.getContext) {
  var context = theCanvas.getContext("2d");

  function drawPath(inicio, listaPuntos) {
    context.beginPath();
    context.moveTo(inicio[0], inicio[1]);
    for (indexP in listaPuntos) {
      context.lineTo(listaPuntos[indexP][0], listaPuntos[indexP][1]);
    }
    context.stroke();
    context.closePath();
  }
  var puntos = [
      [60, 50],
      [60, 40],
      [40, 40],
      [40, 60],
      [70, 60],
      [70, 30],
      [30, 30],
      [30, 70],
      [70, 70]
    ];
  drawPath([50, 50], puntos);
}

Utilizando está función podemos dibujar múltiples figuras reutilizando un poco de código y combinando las funciones podemos crear escenas en el canvas, como la que se muestra, a continuación.

Mira el Pen Escena a base de paths por Jesus Tepec (@JesusTepec) en CodePen.

Comenta tus dudas en la sección de comentarios.

Si te quedo un poco la duda de como trabajar con canvas puedes empezar en orden los temas del listado HTML 5 - Canvas


Anterior Siguiente

Comentarios

Publicar un comentario