Eine kurze Diskussion über Rough.js, eine auf Canvas basierende handgezeichnete Grafikbibliothek

Empfehlen Sie eine handgezeichnete JS-Grafikbibliothek basierend auf Canvas.

Rough.js ist eine leichte (ca. 8 KB) Canvas-basierte Bibliothek, die grobe handgezeichnete Stile zeichnen kann.

Bietet grundlegende Funktionen zum Zeichnen von Linien, Kurven, Bögen, Polygonen, Kreisen und Ellipsen und unterstützt das Zeichnen von SVG-Pfaden.

Github: https://github.com/pshihn/rough

Download-Link: https://github.com/pshihn/rough/tree/master/dist

 npm install --save RoughJS

 const rc = raw.canvas(document.getElementById('canvas'));rc.rectangle(10, 10, 200, 200); // x, y, width, height

 rc.circle(80, 120, 50); // centerX, centerY, Diameterrc.ellipse(300, 100, 150, 80); // centerX, centerY, width, heightrc.line(80, 120, 300, 100) ; // x1, y1, x2, y2

 rc.circle(50, 50, 80, { fill: 'red' }); // fülle mit Rot hachurerc.rectangle(120, 15, 80, 80, { fill: 'red' }); rc.circle(50 , 150, 80, { fill: rgb(10,150,10), fillWeight: 3 // dickere Linien für schraffur});rc.rectangle(220, 15, 80, 80, { fill: 'red', hachureAngle: 60, // Winkel der Schraffur, hachureGap: 8});rc.rectangle(120, 105, 80, 80 , { fill: 'rgba(255,0,200,0.2)', fillStyle: 'solid' // solid füllen});

 rc.rectangle(15, 15, 80, 80, { Rauheit: 0,5, Füllung: 'rot' });rc.rectangle(120, 15, 80, 80, { Rauheit: 2,8, Füllung: 'blau' }); rc.rectangle(220, 15, 80, 80, { Bowing: 6, Stroke: 'green', StrokeWidth: 3 });

 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: 'lila' });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', { füllen: 'Blau' });

Kombiniert mit Web Workern

Wenn auf der Webseite die Import-Workly-Web-Workers-Bibliothek vorhanden ist, überträgt RoughJS automatisch alle Vorgänge an Web-Worker, um den UI-Hauptthread freizugeben. Dies ist sehr nützlich, wenn Sie RoughJS zum Erstellen komplexer Zeichnungen (z. B. Karten) verwenden. Mehr lesen.

 <script src=https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js></script><script src=../../dist/rough.min.js> </script>

https://github.com/pshihn/rough/wiki/Examples

API und Dokumentation

https://github.com/pshihn/rough/wiki

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.