Uma breve discussão sobre Rough.js, uma biblioteca gráfica de estilo desenhado à mão baseada em Canvas

Recomende uma biblioteca JS de gráficos desenhados à mão baseada no Canvas.

Rough.js é uma biblioteca leve (cerca de 8k) baseada em Canvas que pode desenhar estilos aproximados desenhados à mão.

Fornece recursos básicos para desenhar linhas, curvas, arcos, polígonos, círculos e elipses e oferece suporte ao desenho de caminhos SVG.

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

Link para download: https://github.com/pshihn/rough/tree/master/dist

 npm instalar --save roughjs

 const rc = rough.canvas(document.getElementById('canvas'));rc.rectangle(10, 10, 200, 200);

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

 rc.circle(50, 50, 80, { fill: 'red' }); // preencher com vermelho hachurerc.rectangle(120, 15, 80, 80, { fill: 'red' }); , 150, 80, { fill: rgb(10,150,10), fillWeight: 3 // linhas mais grossas para hachure});rc.rectangle(220, 15, 80, 80, { fill: 'red', hachureAngle: 60, // ângulo da hachure, hachureGap: 8});rc.rectangle(120, 105, 80, 80 , { fill: 'rgba(255,0,200,0.2)', fillStyle: 'solid' // sólido preencher});

 rc.rectangle(15, 15, 80, 80, { rugosidade: 0,5, preenchimento: 'vermelho' });rc.rectangle(120, 15, 80, 80, { rugosidade: 2,8, preenchimento: 'azul' }); rc.rectangle(220, 15, 80, 80, { curvatura: 6, acidente vascular cerebral: 'verde', acidente vascular cerebralWidth: 3});

 rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', {preenchimento: 'verde' });rc.path('M230 80 A 45 45, 0, 1, 0 , 275 125 L 275 80 Z', { preenchimento: 'roxo' });rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { preencher: 'vermelho' });rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', {preencher: 'azul' });

Combinado com Web Workers

Se houver a biblioteca de importação Workly Web Workers na página da web, o RoughJS transferirá automaticamente todas as operações para os web workers para liberar o thread principal da UI. Isto é muito útil ao usar RoughJS para criar desenhos complexos (como mapas). Leia mais.

 <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 e documentação

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

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.