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
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!