Gilberto 🦁 PRO
Desarrollo visualizaciones y aplicaciones en línea, colaboro con distintos medios digitales
Laboratorio temático II
Path (Parte 1)
Path
El elemento path es, por mucho, el elemento más versátil de toda la especificación del formato SVG
Path
El elemento path es, por mucho, el elemento más versátil de toda la especificación del formato SVG y también es, en consecuencia, uno de los más complicados de dominar
Path
El elemento path es, por mucho, el elemento más versátil de toda la especificación del formato SVG y también es, en consecuencia, uno de los más complicados de dominar
Todo lo anterior surge porque path es la única manera que tiene el formato SVG de hacer cualquier forma libre más allá de rectángulos y elipses
Path
El elemento path es, por mucho, el elemento más versátil de toda la especificación del formato SVG y también es, en consecuencia, uno de los más complicados de dominar
Todo lo anterior surge porque path es la única manera que tiene el formato SVG de hacer cualquier forma libre más allá de rectángulos y elipses
Arcos, curvas, líneas, figuras complejas, literalmente lo que sea (siempre que sea en 2D)
Path
La parte más importante de este elemento es su atributo d, que sirve para especificar lo que el elemento debe trazar
Este atributo recibe una secuencia de instrucciones que, usualmente, toman la forma "comando coordx coordy" y que definen la figura a trazar
El atributo está inspirado en las herramientas de trazado del software tradicional de dibujo, como la pluma, de modo que la instrucciones simulan la secuencia de pasos para lograr una imagen
Path
Vamos a apoyarnos de este editor para todos los ejemplos que siguen.
M 100 100
L 100 200
L 300 200
L 300 100
ZAunque no es necesario que los comandos estén separados, nos ayuda a tener claridad de cada paso en la secuencia
Path
Vamos a apoyarnos de este editor para todos los ejemplos que siguen.
M 100 100
L 100 200
L 300 200
L 300 100
ZPrimero, notemos que hay 3 comandos básicos:
- M
- L
- Z
Path
Vamos a apoyarnos de este editor para todos los ejemplos que siguen.
M 100 100
L 100 200
L 300 200
L 300 100
ZEl primer comando, M (move) es para mover la pluma de dibujo a una coordenada específica y dejarla ahí. Cualquier comando posterior parte de esa posición.
Path
Vamos a apoyarnos de este editor para todos los ejemplos que siguen.
M 100 100
L 100 200
L 300 200
L 300 100
ZL (line to) traza una línea desde el punto anterior hasta la coordenada nueva, en este caso traza una línea hasta el punto (100, 200), luego hasta el punto (300, 200), luego hasta (300, 100)
Path
Vamos a apoyarnos de este editor para todos los ejemplos que siguen.
M 100 100
L 100 200
L 300 200
L 300 100
ZEl comando Z sólo cierra la forma trazando una línea recta desde la posición más reciente hasta el primer punto sin cerrar que encuentre
Path
Vamos a apoyarnos de este editor para todos los ejemplos que siguen.
m 100 100
l 0 100
l 200 0
l 0 -100
zEl uso de mayúsculas o minúsculas afecta al comando, pasando de valores absolutos a relativos
Path
El manejo de figuras con líneas rectas es la parte más trivial del elemento path, la parte interesante viene cuando contemplamos curvas
Path
El manejo de figuras con líneas rectas es la parte más trivial del elemento path, la parte interesante viene cuando contemplamos curvas y la parte divertida es cuando no podemos hacer la especificación a mano y hay que usar álgebra y geometría para hacerlo
Path
Veamos un ejemplo con curvas
M 130 110
C 120 140, 180 140, 170 110El comando C (curve) acepta tres pares de coordenadas, las primeras dos son los puntos de control de la curva y el tercero es el punto donde la curva termina
Los puntos de control son establecen la pendiente de la línea en su punto inicial
Path
Veamos un ejemplo con curvas
M 10 80
C 40 10, 65 10, 95 80
S 150 150, 180 80Si queremos enlazar distintas curvas, una forma fácil de hacerlo es con el comando S (smooth) que infiere un nuevo punto de control con base en el último punto de control usado
Path
Veamos un ejemplo con curvas
M 10 80
Q 95 10 180 80El comando Q (quadratic) es un poco más simple que el anterior porque sólo requiere un punto de control que define la pendiente del punto inicial y final de la curva
Path
Veamos un ejemplo con curvas
M 10 80
Q 52.5 10, 95 80
T 180 80Podemos tener varias curvas cúbicas y hacer la transición entre ellas con el comando T
Path
Y, por último, arcos (pero con la ayuda de este editor)
M 10 315
L 110 215
A 36 60 0 0 1 150.71 170.29
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10El comando A (arc) requiere de atención particular
Path
¿Cómo se ve, y explica, el siguiente comando?
M 250 250
A 45 45, 0, 1, 1, 295 295
L 295 250 ZGráficas que usan path
La combinación de arcos, elipses y rectas permite la generación de cualquier figura compleja que deseemos a cambio de resolver la geometría para hacerlo
d3.js nos ofrece diversas funciones generadoras para facilitarnos las cosas:
Gráficas no tradicionales
Aunque es fácil usar solamente un conjunto finito (grande pero finito) de gráficas ya establecidas, es mucho más interesante ver como se pueden combinar los principios de varias en una sola, como en este ejemplo. ¿Cuántos principios distintos puedes identificar?
Laboratorio temático II: Path (Parte 1)
By Gilberto 🦁
Laboratorio temático II: Path (Parte 1)
Path (Parte 1)
- 89
