Rough.js: Grafiken mit handgezeichnetem Skizzeneffekt erzeugen

 (roughjs.com)
4 Punkte von GN⁺ 2023-12-23 | 1 Kommentare | Auf WhatsApp teilen

Rough.js

  • Rough.js ist eine kleine Grafikbibliothek, mit der sich Grafiken im skizzenhaften, handgezeichneten Stil erstellen lassen.
  • Sie definiert grundlegende Formen zum Zeichnen von Linien, Kurven, Bögen, Polygonen, Kreisen und Ellipsen und unterstützt auch das Zeichnen von SVG-Pfaden.
  • Rough.js funktioniert sowohl mit Canvas als auch mit SVG.

Installation

  • Installation über npm: npm install --save roughjs
  • Verwendung im Code: import rough from 'roughjs';

Verwendung

  • Die vollständige Rough.js-API ist auf Github verfügbar.
  • Beispiel für die Verwendung mit Canvas: const rc = rough.canvas(document.getElementById('canvas')); rc.rectangle(10, 10, 200, 200);
  • Beispiel für die Verwendung mit SVG: const rc = rough.svg(svg); let node = rc.rectangle(10, 10, 200, 200); svg.appendChild(node);

Linien und Ellipsen

  • Beispiel zum Zeichnen von Kreisen, Ellipsen und Linien: rc.circle(80, 120, 50); rc.ellipse(300, 100, 150, 80); rc.line(80, 120, 300, 100);

Füllung

  • Zu den Füllstilen gehören hachure (Standard), solid, zigzag, cross-hatch, dots, sunburst, dashed und zigzag-line.
  • Beispiel für Füllung: rc.circle(50, 50, 80, { fill: 'red' }); rc.rectangle(120, 15, 80, 80, { fill: 'red' });

Skizzenstil

  • Beispiel zur Anpassung des Skizzenstils: rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' }); rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

SVG-Pfade

  • Beispiel zum Zeichnen von SVG-Pfaden: rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });

Beispiele

  • Beispiele sind hier verfügbar.

API & Dokumentation

  • Vollständige Rough.js-API

Credits

  • Der Kernalgorithmus zum Zeichnen der Umrisse von Linien und Ellipsen stammt aus der Bibliothek handyprocessing.
  • Der Algorithmus zur Umwandlung von SVG-Bögen in Canvas wurde aus der Mozilla-Codebasis übernommen.

Dieses Projekt unterstützen

  • Dieses Projekt kann über Github Sponsors oder Open Collective unterstützt werden.
  • Dieses Projekt wird unter anderem von Excalidraw, Cube, Diagrams.net, Terrastruct, SheetJS, Poster Maker und Chartle unterstützt.

Lizenz

  • MIT-Lizenz, Copyright Preet Shihn.

Meinung von GN⁺

  • Rough.js ist eine innovative Bibliothek, mit der Nutzer einfach Grafiken im handgezeichneten Stil im Web umsetzen können.
  • Die Möglichkeit, verschiedene Füllstile und Skizzenstile anzupassen, eröffnet der webbasierten Grafikgestaltung neue Dimensionen.
  • Die Bibliothek wird von der Open-Source-Community unterstützt und ist in verschiedene webbasierte Tools integriert, was zu einer reichhaltigeren Nutzererfahrung beiträgt.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-12-23
Hacker-News-Kommentare

  • Anwendungsfälle für RoughNotation & RoughJS

    • Erwähnung von RoughNotation, das mit RoughJS Unterstreichungen, Hervorhebungen usw. unterstützt.
    • Ein Beispiel, das auf der Inspiration durch die eigene Website basiert: Beim Überfahren einer hervorgehobenen Überschrift mit der Maus wird auf einen Text verwiesen, der die Funktionsweise zusammenfasst.
    • Auflistung verwandter Hacker-News-Beiträge und ihrer Kommentarzahlen, um die Beliebtheit und Anwendungsfälle von RoughJS zu zeigen.

  • Wired Elements & svg2roughjs

    • Vorstellung von Wired Elements, einer Sammlung von Web Components, die mit RoughJS im Skizzenstil rendern.
    • Geteilte Erfahrung beim Erstellen eines svg2roughjs-Wrappers, der SVG-Dateien in Skizzen umwandelt.

  • Erstellung interaktiver Mockups mit RoughJS

    • Vorstellung eines Anwendungsfalls, bei dem zusammen mit WiredJS interaktive Mockups erstellt werden.
    • Bereitstellung von Links zu Mockup-Beispielen und zum Quellcode.

  • Vielfältige Einsatzmöglichkeiten von RoughJS

    • Meinung, dass der Effekt von RoughJS gefällt, im Vergleich zu Excalidraw.
    • Ein Anwendungsbeispiel von RoughJS auf horserecords.info.
    • Geteilte Erfahrung bei der Implementierung des Generators "Sketchify" in Boxy SVG; hervorgehoben wird dabei der Vorteil von RoughJS, dass es kaum Abhängigkeiten hat und innerhalb von Web Workern ausgeführt werden kann.
    • Lob für die einfache Verwendung der Bibliothek und ihre über die Zeit bewiesene Stabilität sowie ein Beispiel, dass sie zum Erstellen von Diagrammen auf usdc.cool verwendet wurde.
    • Ausdruck von Dankbarkeit gegenüber Rough.js sowie die Meinung, dass es Spaß macht, Sketchy Shapes zu erstellen, die dem Hatch-Projekt hinzugefügt werden können, und Parameter in Echtzeit anzupassen.

Diese Zusammenfassung zeigt anhand der Hacker-News-Kommentare die vielfältigen Einsatzmöglichkeiten von RoughJS und verwandten Tools sowie die positiven Erfahrungen der Nutzer. RoughJS ist eine JavaScript-Bibliothek, mit der sich handgezeichnet wirkende Skizzengrafiken erstellen lassen. Sie ist unter Webentwicklern beliebt und wird zur Erstellung von Mockups, Diagrammen, interaktiven Elementen und verschiedenen Web Components eingesetzt.