Rough.js: geração de gráficos com efeito de esboço desenhado à mão

Rough.js

• Rough.js é uma pequena biblioteca gráfica que permite desenhar gráficos com um estilo artesanal, semelhante a um esboço.
• Define formas básicas para desenhar linhas, curvas, arcos, polígonos, círculos e elipses, além de oferecer suporte para desenhar caminhos SVG.
• Rough.js funciona tanto com canvas quanto com SVG.

Instalação

• Instalação via npm: npm install --save roughjs
• Uso no código: import rough from 'roughjs';

Como usar

• A API completa do Rough.js pode ser consultada no Github.
• Exemplo de uso com canvas: const rc = rough.canvas(document.getElementById('canvas')); rc.rectangle(10, 10, 200, 200);
• Exemplo de uso com SVG: const rc = rough.svg(svg); let node = rc.rectangle(10, 10, 200, 200); svg.appendChild(node);

Linhas e elipses

• Exemplo de desenho de círculos, elipses e linhas: rc.circle(80, 120, 50); rc.ellipse(300, 100, 150, 80); rc.line(80, 120, 300, 100);

Preenchimento

• Os estilos de preenchimento incluem hachure (padrão), solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line, entre outros.
• Exemplo de preenchimento: rc.circle(50, 50, 80, { fill: 'red' }); rc.rectangle(120, 15, 80, 80, { fill: 'red' });

Estilo de esboço

• Exemplo de ajuste do estilo de esboço: rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' }); rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

Caminhos SVG

• Exemplo de desenho de caminho SVG: rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });

Exemplos

• É possível ver exemplos aqui.

API & documentação

• API completa do Rough.js

Créditos

• O algoritmo principal para desenhar contornos de linhas e elipses foi adaptado da biblioteca handyprocessing.
• O algoritmo para converter arcos SVG em canvas foi adaptado da base de código da Mozilla.

Apoie este projeto

• Você pode apoiar este projeto por meio do Github Sponsors ou do Open Collective.
• Este projeto recebe apoio de Excalidraw, Cube, Diagrams.net, Terrastruct, SheetJS, Poster Maker, Chartle e outros.

Licença

• Licença MIT, copyright de Preet Shihn.

---

Opinião do GN⁺

• Rough.js é uma biblioteca inovadora que permite aos usuários implementar facilmente gráficos com estilo de desenho artesanal na web.
• A possibilidade de ajustar diversos estilos de preenchimento e estilos de esboço adiciona uma nova dimensão ao design gráfico baseado na web.
• A biblioteca conta com o apoio da comunidade open source e está integrada a várias ferramentas web, contribuindo para enriquecer a experiência do usuário.

[GN⁺]

Opiniões do Hacker News

• Casos de uso de RoughNotation & RoughJS

  • Menção ao RoughNotation, que usa RoughJS para oferecer suporte a sublinhado, destaque e mais.
  • Exemplo implementado com inspiração no próprio site do autor, orientando a consultar um texto que resume como funciona ao passar o mouse sobre o título destacado.
  • Lista posts relacionados no Hacker News e suas quantidades de comentários para mostrar a popularidade e os casos de uso do RoughJS.

• Wired Elements & svg2roughjs

  • Apresentação do Wired Elements, um conjunto de web components que renderiza em estilo de esboço usando RoughJS.
  • Compartilhamento da experiência de criar um wrapper svg2roughjs para converter arquivos SVG em esboços.

• Criação de mockups interativos com RoughJS

  • Apresentação de um caso de uso em conjunto com WiredJS para criar mockups interativos.
  • Fornecimento de links para exemplos de mockup e código-fonte.

• Os diversos usos do RoughJS

  • Opinião de que gosta do efeito do RoughJS, comparando-o ao Excalidraw.
  • Caso de uso de RoughJS em horserecords.info.
  • Compartilhamento da experiência de implementar o gerador "Sketchify" no Boxy SVG, destacando como vantagem o fato de RoughJS quase não ter dependências e poder rodar dentro de web workers.
  • Elogios à facilidade de uso da biblioteca e à sua estabilidade ao longo do tempo, com um caso de uso para criar gráficos em usdc.cool.
  • Agradecimento ao Rough.js, com comentário sobre a criação de Sketchy Shapes que podem ser adicionadas ao projeto Hatch e sobre como é divertido ajustar parâmetros em tempo real.

Este resumo mostra, a partir dos comentários do Hacker News, vários casos de uso de RoughJS e ferramentas relacionadas, além das experiências positivas dos usuários. RoughJS é uma biblioteca JavaScript que permite criar gráficos em estilo de esboço desenhado à mão, é popular entre desenvolvedores web e é usada para criar diversos componentes web, como mockups, gráficos e elementos interativos.