Textures.js: texturas SVG en todas las formas y colores

El formato SVG ofrece varias opciones para realizar contenido gráfico complejo. Entre otras cosas, puede crear texturas y agregarlas a formas utilizando el elemento . Especialmente cuando se usan texturas simples y comunes, el esfuerzo de marcarlas a través de SVG es, en comparación con el resultado, excesivamente alto. Por lo tanto, la biblioteca de JavaScript Texture.js proporciona texturas que en su mayoría consisten en líneas y puntos para elementos SVG. Con solo unas pocas líneas de JavaScript, puede aplicar diferentes texturas a cada forma de un SVG.

Textures.js está basado en D3.js

Texturas.js se basa en la biblioteca de JavaScript D3.js y debe, por lo tanto, estar incrustado junto con D3.js en el documento HTML. D3.js ayuda a visualizar datos de cualquier tipo. Puede elegir elementos HTML o SVG y diseñarlos según sus necesidades. D3.js y Textures.js le permiten seleccionar formas individuales dentro de un SVG, y Texture.js finalmente les agrega un patrón.

Crea un SVG y agrega una textura

Primero, necesitas un SVG. Después de incrustarlo en el documento HTML, puede diseñarlo (casi) completamente según sus necesidades. Solo el relleno es definido por Textures.js más adelante. Si determina un relleno, la textura no lo sobrescribirá.

<svg width="225" height="150" id="graphic">
  <circle cx="75" cy="75" r="75" id="circle1"></circle>
  <circle cx="150" cy="75" r="75" id="circle2"></circle>
</svg>

En el ejemplo anterior, se marcan dos círculos simples. Al elemento

var svg = d3.select("#graphic");
var texture1 = textures.lines();
var texture2 = textures.circles();

svg.call(texture1);
svg.call(texture2);

En el ejemplo, se selecciona un SVG a través de «d3.select()». Luego se crean dos texturas. Aquí usamos las dos texturas básicas «líneas()» y «círculos()». Las texturas se agregan al elemento SVG a través de «call()». A partir de ahí los patrones están en el gráfico.

El último paso es asignar las texturas a los círculos.

var circle1 = d3.select("circle1");
var circle2 = d3.select("circle");

circle1.style("fill", texture1.url());
circle2.style("fill", texture2.url());

Los círculos se seleccionan mediante «d3.select()». Luego asignamos la propiedad «rellenar» con las URLs de ambos patrones a los elementos usando «estilo()». La URL del patrón es una ID asignada por Textures.js.

Ajustar texturas

Textures.js conoce tres formas básicas: líneas, círculos y caminos. Puede ajustar la fuerza, la distancia y la alineación de las líneas de todas estas formas. Cada propiedad que desea personalizar tiene un método para adjuntar a «lines()».

textures.lines().stroke("green").strokeWidth(1).size(5).orientation("2/8");

En el ejemplo anterior, el color de la línea se define a través de «stroke()». «strokeWidth()» especifica la fuerza de la línea y «size()» la distancia entre las líneas. El valor «orientation()» define la alineación de las líneas. Además de usar valores como «horizontal», «vertical» y «diagonal», también puedes usar octavas fracciones. «2/8» corresponde a una alineación diagonal, «4/8» a una alineación horizontal y «8/8» a una alineación vertical.

Los círculos no tienen una alineación. En su lugar, puede especificar un color de relleno.

textures.circles().fill("orange").radius(5).size(15);

El tamaño del círculo se define a través de «radius()». La propiedad «complement()» evita que los anillos se muestren en filas y columnas una al lado de la otra y una encima de la otra. En cambio, están desplazados.

Las texturas de ruta proporcionan algunos patrones más, siete en total, que son más complejos que los patrones simples de líneas y círculos, por ejemplo, cruces, hexágonos y ondas.

textures.paths().d("waves").stroke("blue");

Usando la propiedad «d()», definimos el tipo de patrón antes de establecer el color y la fuerza de la línea, tal como hicimos con los otros patrones.

Patrones personalizados

Si necesita más texturas, puede crear fácilmente sus propios patrones basados ​​en las texturas de ruta pasando una función a «d()» que describe el modelo.

textures.paths().d(function(s) {
  return "M …";
}).stroke("blue");

Las coordenadas de la propiedad «d» de una ruta SVG se especifican mediante «retorno».

Conclusión y enlaces relacionados

Textures.js proporciona una gran cantidad de patrones que se pueden aplicar rápidamente a las formas SVG. La herramienta es fácil de usar y ajustar. Textures.js se publica bajo un licencia MIT y puede, por lo tanto, ser utilizado de forma gratuita para fines personales y comerciales. D3.js tiene un liberalismo similar licencia BSD.

(dpe)