Une brève discussion sur Rough.js, une bibliothèque graphique de style dessiné à la main basée sur Canvas

Recommandez une bibliothèque JS de graphiques de style dessinés à la main basée sur Canvas.

Rough.js est une bibliothèque légère (environ 8 Ko) basée sur Canvas qui peut dessiner des styles bruts dessinés à la main.

Fournit des fonctionnalités de base pour dessiner des lignes, des courbes, des arcs, des polygones, des cercles et des ellipses, et prend en charge le dessin de chemins SVG.

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

Lien de téléchargement : https://github.com/pshihn/rough/tree/master/dist

 npm install --save roughjs

 const rc = rough.canvas(document.getElementById('canvas'));rc.rectangle(10, 10, 200, 200); // x, y, largeur, hauteur);

 rc.circle(80, 120, 50); // centreX, centreY, diamètrerc.ellipse(300, 100, 150, 80); // centreX, centreY, largeur, hauteurrc.line(80, 120, 300, 100) ; // x1, y1, x2, y2

 rc.circle(50, 50, 80, { fill: 'red' }); // remplir avec du rouge hachurerc.rectangle(120, 15, 80, 80, { fill: 'red' }); , 150, 80, { fill: rgb(10,150,10), fillWeight: 3 // lignes plus épaisses pour hachure});rc.rectangle(220, 15, 80, 80, { fill: 'red', hachureAngle: 60, // angle de hachure, hachureGap: 8});rc.rectangle(120, 105, 80, 80 , { fill : 'rgba(255,0,200,0.2)', fillStyle : 'solid' // solide remplir});

 rc.rectangle(15, 15, 80, 80, { rugosité : 0,5, remplissage : 'rouge' });rc.rectangle(120, 15, 80, 80, { rugosité : 2,8, remplissage : 'bleu' }); rc.rectangle(220, 15, 80, 80, { s'inclinant : 6, trait : 'vert', traitLargeur : 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', { remplir : 'violet' });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', { remplir : 'bleu' });

Combiné avec les Web Workers

S'il existe la bibliothèque d'importation Workly Web Workers dans la page Web, RoughJS transférera automatiquement toutes les opérations aux Web Workers pour libérer le thread principal de l'interface utilisateur. Ceci est très utile lorsque vous utilisez RoughJS pour créer des dessins complexes (tels que des cartes). En savoir plus.

 <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 et documentation

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

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.