Rough.js: tạo đồ họa với hiệu ứng phác thảo như vẽ tay

Rough.js

• Rough.js là một thư viện đồ họa nhỏ cho phép vẽ đồ họa theo phong cách minh họa thủ công giống như bản phác thảo.
• Thư viện định nghĩa các hình cơ bản có thể vẽ đường thẳng, đường cong, cung, đa giác, hình tròn và hình elip, đồng thời cũng hỗ trợ vẽ đường dẫn SVG.
• Rough.js hoạt động với cả canvas và SVG.

Cài đặt

• Cài đặt qua npm: npm install --save roughjs
• Sử dụng trong mã: import rough from 'roughjs';

Cách dùng

• Có thể xem toàn bộ API của Rough.js trên Github.
• Ví dụ dùng canvas: const rc = rough.canvas(document.getElementById('canvas')); rc.rectangle(10, 10, 200, 200);
• Ví dụ dùng SVG: const rc = rough.svg(svg); let node = rc.rectangle(10, 10, 200, 200); svg.appendChild(node);

Đường thẳng và hình elip

• Ví dụ vẽ hình tròn, hình elip và đường thẳng: rc.circle(80, 120, 50); rc.ellipse(300, 100, 150, 80); rc.line(80, 120, 300, 100);

Tô màu

• Các kiểu tô gồm hachure (mặc định), solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line v.v.
• Ví dụ tô màu: rc.circle(50, 50, 80, { fill: 'red' }); rc.rectangle(120, 15, 80, 80, { fill: 'red' });

Phong cách phác thảo

• Ví dụ điều chỉnh phong cách phác thảo: rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' }); rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

Đường dẫn SVG

• Ví dụ vẽ đường dẫn SVG: rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });

Ví dụ

• Có thể xem ví dụ tại đây.

API & tài liệu

• Toàn bộ API của Rough.js

Ghi công

• Thuật toán cốt lõi để vẽ đường viền của đường thẳng và hình elip được áp dụng từ thư viện handyprocessing.
• Thuật toán chuyển đổi cung SVG sang canvas được áp dụng từ codebase của Mozilla.

Hỗ trợ dự án này

• Có thể hỗ trợ dự án này qua Github Sponsors hoặc Open Collective.
• Dự án này nhận được sự hỗ trợ từ Excalidraw, Cube, Diagrams.net, Terrastruct, SheetJS, Poster Maker, Chartle và nhiều bên khác.

Giấy phép

• Giấy phép MIT, bản quyền thuộc về Preet Shihn.

---

Ý kiến của GN⁺

• Rough.js là một thư viện sáng tạo giúp người dùng dễ dàng triển khai đồ họa theo phong cách vẽ tay thủ công trên web.
• Khả năng điều chỉnh đa dạng các kiểu tô màu và phong cách phác thảo mang đến một chiều kích mới cho thiết kế đồ họa trên nền web.
• Thư viện này nhận được sự hỗ trợ từ cộng đồng mã nguồn mở và được tích hợp vào nhiều công cụ web khác nhau, góp phần làm phong phú trải nghiệm người dùng.

[GN⁺]

Ý kiến trên Hacker News

• Các trường hợp sử dụng RoughNotation & RoughJS

  • Nhắc đến RoughNotation, công cụ hỗ trợ gạch chân, tô nhấn mạnh và nhiều kiểu đánh dấu khác bằng RoughJS.
  • Giới thiệu một ví dụ được triển khai dựa trên cảm hứng từ website của chính họ, trong đó khi di chuột lên tiêu đề được tô nổi bật thì sẽ được dẫn tới bài viết tóm tắt cách nó hoạt động.
  • Liệt kê các bài đăng Hacker News liên quan cùng số lượng bình luận của chúng để cho thấy mức độ phổ biến và các trường hợp sử dụng của RoughJS.

• Wired Elements & svg2roughjs

  • Giới thiệu Wired Elements, một bộ web component render theo phong cách phác thảo bằng RoughJS.
  • Chia sẻ kinh nghiệm tạo wrapper svg2roughjs để chuyển file SVG thành bản phác thảo.

• Tạo mockup tương tác bằng RoughJS

  • Giới thiệu trường hợp dùng cùng WiredJS để tạo mockup tương tác.
  • Cung cấp ví dụ mockup và liên kết mã nguồn.

• Nhiều cách tận dụng RoughJS

  • Có ý kiến nói họ thích hiệu ứng của RoughJS và so sánh với Excalidraw.
  • Nêu trường hợp sử dụng RoughJS tại horserecords.info.
  • Chia sẻ kinh nghiệm triển khai trình tạo "Sketchify" trong Boxy SVG, đồng thời nhấn mạnh ưu điểm của RoughJS là gần như không có phụ thuộc và có thể chạy trong web worker.
  • Khen thư viện này dễ dùng và ổn định theo thời gian, đồng thời nêu ví dụ đã dùng nó để tạo biểu đồ tại usdc.cool.
  • Bày tỏ lời cảm ơn tới Rough.js, chia sẻ việc tạo Sketchy Shapes để thêm vào dự án Hatch, và cho rằng việc điều chỉnh tham số theo thời gian thực rất thú vị.

Bản tóm tắt này cho thấy nhiều trường hợp sử dụng khác nhau của RoughJS và các công cụ liên quan, cùng những trải nghiệm tích cực từ người dùng trong phần bình luận Hacker News. RoughJS là một thư viện JavaScript giúp tạo đồ họa theo phong cách phác thảo như vẽ tay, được ưa chuộng trong giới phát triển web và được dùng để tạo mockup, biểu đồ, thành phần tương tác và nhiều web component khác.