Maison > interface Web > Tutoriel H5 > Rough.js, une bibliothèque graphique de styles dessinés à la main pour Canvas

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

php中世界最好的语言
Libérer: 2018-03-20 13:21:57
original
2743 Les gens l'ont consulté

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
Copier après la connexion

Comment utiliser

const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); // x, y, width, height
Copier après la connexion

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
Copier après la connexion

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
});
Copier après la connexion

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 });
Copier après la connexion

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' });
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal