Rough.js : générer des graphismes avec un effet de croquis dessiné à la main

Rough.js

• Rough.js est une petite bibliothèque graphique qui permet de dessiner des graphismes dans un style artisanal rappelant un croquis.
• Elle fournit des formes de base permettant de tracer des lignes, des courbes, des arcs, des polygones, des cercles et des ellipses, et prend aussi en charge le dessin de chemins SVG.
• Rough.js fonctionne à la fois avec canvas et SVG.

Installation

• Installation via npm : npm install --save roughjs
• Utilisation dans le code : import rough from 'roughjs';

Utilisation

• L’API complète de Rough.js est disponible sur Github.
• Exemple avec canvas : const rc = rough.canvas(document.getElementById('canvas')); rc.rectangle(10, 10, 200, 200);
• Exemple avec SVG : const rc = rough.svg(svg); let node = rc.rectangle(10, 10, 200, 200); svg.appendChild(node);

Lignes et ellipses

• Exemple de dessin de cercle, d’ellipse et de ligne : rc.circle(80, 120, 50); rc.ellipse(300, 100, 150, 80); rc.line(80, 120, 300, 100);

Remplissage

• Les styles de remplissage incluent hachure (par défaut), solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line, etc.
• Exemple de remplissage : rc.circle(50, 50, 80, { fill: 'red' }); rc.rectangle(120, 15, 80, 80, { fill: 'red' });

Style croquis

• Exemple d’ajustement du style croquis : rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' }); rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

Chemins SVG

• Exemple de dessin d’un chemin SVG : rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });

Exemples

• Des exemples sont disponibles ici.

API & documentation

• API complète de Rough.js

Crédits

• L’algorithme central pour tracer les contours des lignes et des ellipses est repris de la bibliothèque handyprocessing.
• L’algorithme de conversion des arcs SVG vers canvas est repris du codebase de Mozilla.

Soutenir ce projet

• Vous pouvez soutenir ce projet via Github Sponsors ou Open Collective.
• Ce projet reçoit le soutien d’Excalidraw, Cube, Diagrams.net, Terrastruct, SheetJS, Poster Maker, Chartle, entre autres.

Licence

• Licence MIT, copyright Preet Shihn.

---

L’avis de GN⁺

• Rough.js est une bibliothèque innovante qui permet aux utilisateurs de créer facilement sur le web des graphismes dans un style de dessin artisanal.
• La possibilité d’ajuster différents styles de remplissage et de croquis apporte une nouvelle dimension au design graphique web.
• Cette bibliothèque est soutenue par la communauté open source et intégrée à divers outils web, contribuant ainsi à enrichir l’expérience utilisateur.

[GN⁺]

Avis Hacker News

• Cas d’usage de RoughNotation & RoughJS

  • Mention de RoughNotation, qui utilise RoughJS pour prendre en charge le soulignement, la mise en évidence, etc.
  • Exemple implémenté en s’inspirant de son propre site web, avec invitation à consulter un article résumant le fonctionnement lorsque l’on survole le titre mis en évidence avec la souris.
  • Liste de publications Hacker News associées et de leur nombre de commentaires, montrant la popularité de RoughJS et ses cas d’usage.

• Wired Elements & svg2roughjs

  • Présentation de Wired Elements, un ensemble de composants web qui utilisent RoughJS pour un rendu en style croquis.
  • Partage d’une expérience de création d’un wrapper svg2roughjs pour convertir des fichiers SVG en croquis.

• Création de maquettes interactives avec RoughJS

  • Présentation d’un cas d’usage avec WiredJS pour créer des maquettes interactives.
  • Fourniture de liens vers un exemple de maquette et le code source.

• Les multiples usages de RoughJS

  • Avis indiquant apprécier l’effet de RoughJS en le comparant à Excalidraw.
  • Exemple d’utilisation de RoughJS sur horserecords.info.
  • Partage d’une expérience d’implémentation du générateur "Sketchify" dans Boxy SVG, en soulignant comme avantage le fait que RoughJS a très peu de dépendances et peut s’exécuter dans un web worker.
  • Éloges sur la facilité d’utilisation de la bibliothèque et sa stabilité dans le temps, avec un exemple d’usage pour créer des graphiques sur usdc.cool.
  • Remerciements adressés à Rough.js, avec la création de Sketchy Shapes pouvant être ajoutées au projet Hatch, et l’idée qu’il est amusant d’ajuster les paramètres en temps réel.

Ce résumé montre, à travers les commentaires Hacker News, les divers cas d’usage de RoughJS et les expériences positives des utilisateurs avec les outils associés. RoughJS est une bibliothèque JavaScript permettant de créer des graphismes au style croquis dessinés à la main, populaire parmi les développeurs web et utilisée pour réaliser divers composants web comme des maquettes, des graphiques et des éléments interactifs.