Rough.js: Bibliothek zum Erzeugen skizzenhafter Grafiken im Handzeichnungsstil

 (roughjs.com)
4 Punkte von GN⁺ 2023-12-23 | 1 Kommentare | Auf WhatsApp teilen
  • Rough.js ist eine leichtgewichtige JavaScript-Bibliothek, die statt klarer digitaler Formen Grafiken im Sketch-Stil erzeugt, die wie von Hand gezeichnet wirken
  • Mit weniger als 9 kB gzipped ist sie klein, kann aber Linien, Kurven, Bögen, Polygone, Kreise, Ellipsen und sogar SVG paths verarbeiten
  • Sie unterstützt mit demselben API-Ablauf sowohl Canvas als auch SVG, sodass je nach Rendering-Ziel rough.canvas() oder rough.svg() gewählt werden kann
  • Neben der standardmäßigen hachure-Füllung unterstützt sie solid, zigzag, cross-hatch, dots, sunburst, dashed und zigzag-line
  • Mit Optionen wie roughness, bowing, strokeWidth, hachureAngle und hachureGap lassen sich die Unruhe der Linien und die Dichte der Füllung anpassen

Leichtgewichtige Bibliothek zum Zeichnen von Formen im Handzeichnungsstil

  • Rough.js ist eine JavaScript-Bibliothek zum Erstellen von Grafiken im Sketch-Stil
  • Die Bibliothek ist gzipped weniger als 9 kB groß
  • Sie unterstützt sowohl Grundformen als auch Pfade
    • Linien
    • Kurven
    • Bögen
    • Polygone
    • Kreise
    • Ellipsen
    • SVG paths
  • Als Rendering-Ziel können sowohl Canvas als auch SVG verwendet werden

Installation und grundlegende Nutzung

  • Installation per npm
npm install --save roughjs
  • Im Code wird roughjs importiert und verwendet
import rough from 'roughjs';
  • Bei Canvas wird mit rough.canvas() ein Kontext erstellt und anschließend eine Form gezeichnet
const rc = rough.canvas(document.getElementById('canvas'));

rc.rectangle(10, 10, 200, 200); // x, y, width, height
  • Bei SVG wird mit rough.svg() ein Node erstellt und dem SVG hinzugefügt
const rc = rough.svg(svg);

let node = rc.rectangle(10, 10, 200, 200); // x, y, width, height
svg.appendChild(node);
  • Auch grundlegende APIs zum Zeichnen von Kreisen, Ellipsen und Linien werden bereitgestellt
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

Füllung und Anpassung des Sketch-Ausdrucks

  • Füllungen werden über fill und zugehörige Optionen festgelegt
    • fill: 'red' verwendet eine rote hachure-Füllung
    • Mit fillWeight wird die Linienstärke der hachure angepasst
    • Mit hachureAngle und hachureGap werden Winkel und Abstand der hachure geändert
    • Mit fillStyle: 'solid' kann eine einfarbige Füllung verwendet werden
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'
});
  • Unterstützte Füllstile sind hachure, solid, zigzag, cross-hatch, dots, sunburst, dashed und zigzag-line
  • Die Unruhe der Linien und die Darstellung der Konturen lassen sich mit Optionen wie roughness, bowing, stroke und strokeWidth ändern
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 und API-Dokumentation

  • SVG-path-Strings können mit rc.path() gezeichnet werden
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' });

Verwandte Beiträge

1 Kommentare

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