Una breve discusión sobre Rough.js, una biblioteca de gráficos de estilo dibujado a mano basada en Canvas

Recomiende una biblioteca JS de gráficos de estilo dibujado a mano basada en Canvas.

Rough.js es una biblioteca liviana (aproximadamente 8k) basada en Canvas que puede dibujar estilos dibujados a mano.

Proporciona capacidades básicas para dibujar líneas, curvas, arcos, polígonos, círculos y elipses, y admite el dibujo de rutas SVG.

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

Enlace de descarga: https://github.com/pshihn/rough/tree/master/dist

 instalación npm --guardar grossjs

 const rc = rugoso.canvas(document.getElementById('canvas'));rc.rectangle(10, 10, 200, 200); // x, y, ancho, alto

 rc.circle(80, 120, 50); // centroX, centroY, diámetrorc.ellipse(300, 100, 150, 80); // centroX, centroY, ancho, alturarc.line(80, 120, 300, 100) ; // x1, y1, x2, y2

 rc.circle(50, 50, 80, { fill: 'red' }); // rellenar con rojo hachurerc.rectangle(120, 15, 80, 80, { fill: 'red' }); , 150, 80, { fill: rgb(10,150,10), fillWeight: 3 // líneas más gruesas para hachure});rc.rectangle(220, 15, 80, 80, { fill: 'red', hachureAngle: 60, // ángulo de hachure, hachureGap: 8});rc.rectangle(120, 105, 80, 80 , { fill: 'rgba(255,0,200,0.2)', fillStyle: 'sólido' // sólido llenar});

 rc.rectangle(15, 15, 80, 80, {rugosidad: 0,5, relleno: 'rojo' });rc.rectangle(120, 15, 80, 80, {rugosidad: 2,8, relleno: 'azul' }); rc.rectangle(220, 15, 80, 80, {inclinación: 6, trazo: 'verde', ancho de trazo: 3 });

 rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', {relleno: 'verde' });rc.path('M230 80 A 45 45, 0, 1, 0 , 275 125 L 275 80 Z', { relleno: 'púrpura' });rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { relleno: 'rojo' });rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { rellenar: 'azul' });

Combinado con trabajadores web

Si existe la biblioteca de importación Workly Web Workers en la página web, RoughJS transferirá automáticamente todas las operaciones a los trabajadores web para liberar el hilo principal de la interfaz de usuario. Esto es muy útil cuando se utiliza RoughJS para crear dibujos complejos (como mapas). Leer más.

 <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 y documentación

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

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.