Rough.js : une bibliothèque pour générer des graphismes esquissés façon dessin à la main

 (roughjs.com)
4 points par GN⁺ 2023-12-23 | 1 commentaires | Partager sur WhatsApp
  • Rough.js est une bibliothèque JavaScript légère qui permet de créer des graphismes de style esquisse, comme dessinés à la main, plutôt que des formes numériques nettes
  • Avec une taille inférieure à 9 ko gzippée, elle reste petite, mais peut gérer les lignes, courbes, arcs, polygones, cercles, ellipses, ainsi que les SVG path
  • Elle prend en charge à la fois Canvas et SVG avec le même flux d’API, ce qui permet de choisir rough.canvas() ou rough.svg() selon la cible de rendu
  • En plus du remplissage par défaut hachure, elle prend en charge solid, zigzag, cross-hatch, dots, sunburst, dashed et zigzag-line
  • Des options comme roughness, bowing, strokeWidth, hachureAngle et hachureGap permettent d’ajuster l’irrégularité des traits et la densité du remplissage

Une bibliothèque légère pour dessiner des formes façon dessin à la main

  • Rough.js est une bibliothèque JavaScript destinée à créer des graphismes au style esquissé
  • La taille de la bibliothèque est inférieure à 9 ko en gzip
  • Elle prend en charge à la fois les formes de base et les tracés
    • Lignes
    • Courbes
    • Arcs
    • Polygones
    • Cercles
    • Ellipses
    • SVG paths
  • Les cibles de rendu peuvent être aussi bien Canvas que SVG

Installation et utilisation de base

  • Installation avec npm
npm install --save roughjs
  • Dans le code, importez et utilisez roughjs
import rough from 'roughjs';
  • Avec Canvas, créez un contexte avec rough.canvas(), puis dessinez les formes
const rc = rough.canvas(document.getElementById('canvas'));

rc.rectangle(10, 10, 200, 200); // x, y, width, height
  • Avec SVG, créez un nœud avec rough.svg() et ajoutez-le au SVG
const rc = rough.svg(svg);

let node = rc.rectangle(10, 10, 200, 200); // x, y, width, height
svg.appendChild(node);
  • Des API de base sont également fournies pour dessiner des cercles, ellipses et lignes
rc.circle(80, 120, 50); // centerX, centerY, diameter
rc.ellipse(300, 100, 150, 80); // centerX, centerY, width, height
rc.line(80, 120, 300, 100); // x1, y1, x2, y2

Ajustement du remplissage et du rendu esquissé

  • Le remplissage se configure avec fill et les options associées
    • fill: 'red' utilise un remplissage hachure rouge
    • fillWeight permet d’ajuster l’épaisseur des lignes de hachure
    • hachureAngle et hachureGap modifient l’angle et l’espacement des hachures
    • fillStyle: 'solid' permet d’utiliser un remplissage uni
rc.circle(50, 50, 80, { fill: 'red' });
rc.rectangle(120, 15, 80, 80, { fill: 'red' });

rc.circle(50, 150, 80, {
  fill: "rgb(10,150,10)",
  fillWeight: 3
});

rc.rectangle(220, 15, 80, 80, {
  fill: 'red',
  hachureAngle: 60,
  hachureGap: 8
});

rc.rectangle(120, 105, 80, 80, {
  fill: 'rgba(255,0,200,0.2)',
  fillStyle: 'solid'
});
  • Les styles de remplissage pris en charge sont hachure, solid, zigzag, cross-hatch, dots, sunburst, dashed et zigzag-line
  • L’irrégularité des traits et le rendu des contours peuvent être modifiés avec des options comme roughness, bowing, stroke et strokeWidth
rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });
rc.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });
rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

SVG path et documentation de l’API

  • Les chaînes SVG path peuvent être dessinées avec rc.path()
rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });
rc.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple' });
rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red' });
rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue' });

À lire aussi

1 commentaires

 
GN⁺ 2023-12-23
Avis sur Hacker News