Rough.js, une bibliothèque graphique de styles dessinés à la main pour Canvas

Cette fois, je vous présente la bibliothèque graphique de style dessiné à la main de Canvas Rough.js. Quelles sont les précautions lors de l'utilisation de la bibliothèque graphique de style dessiné à la main de Canvas Rough.js. . Jetons un coup d'oeil.

Avant-propos

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

Rough.js

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 également en charge le dessin de chemins SVG.

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

Installer

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

NPM

npm install --save roughjs

Comment utiliser

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

Ligne et ellipse

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

Remplir

rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachure
rc.rectangle(120, 15, 80, 80, { fill: 'red' });
rc.circle(50, 150, 80, {
  fill: "rgb(10,150,10)",
  fillWeight: 3 // thicker lines for hachure
});
rc.rectangle(220, 15, 80, 80, {
  fill: 'red',
  hachureAngle: 60, // angle of hachure,
  hachureGap: 8
});
rc.rectangle(120, 105, 80, 80, {
  fill: 'rgba(255,0,200,0.2)',
  fillStyle: 'solid' // solid fill
});

Style d'esquisse

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 });

Chemin SVG

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' });

Chemin SVG simple

Combiné avec 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 fil principal de l'interface utilisateur. Ceci est très utile lorsque vous utilisez RoughJS pour créer des dessins complexes (tels que Map). En savoir plus à ce sujet.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres informations connexes. articles sur le site php chinois !

Lecture recommandée :

Conseils pour utiliser max-width et min-width

Comment implémenter l'alignement du texte à les deux extrémités Alignent

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!