Rough.js: Thư viện tạo đồ họa phác thảo phong cách vẽ tay

 (roughjs.com)
4 điểm bởi GN⁺ 2023-12-23 | 1 bình luận | Chia sẻ qua WhatsApp
  • Rough.js là một thư viện JavaScript gọn nhẹ để tạo đồ họa phong cách phác thảo như được vẽ bằng tay thay vì các hình số sắc nét
  • Dù nhỏ với kích thước dưới 9kB khi nén gzip, thư viện vẫn xử lý được đường thẳng, đường cong, cung, đa giác, hình tròn, hình elip và cả SVG path
  • Hỗ trợ cả Canvas và SVG với cùng một luồng API, nên có thể chọn rough.canvas() hoặc rough.svg() tùy theo đối tượng render
  • Ngoài kiểu tô mặc định hachure, thư viện còn hỗ trợ solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line
  • Có thể điều chỉnh độ rung của nét vẽ và mật độ phần tô bằng các tùy chọn như roughness, bowing, strokeWidth, hachureAngle, hachureGap

Thư viện gọn nhẹ để vẽ hình phong cách vẽ tay

  • Rough.js là thư viện JavaScript để tạo đồ họa phong cách phác thảo
  • Kích thước thư viện dưới 9kB khi nén gzip
  • Hỗ trợ cả các hình cơ bản và đường dẫn
    • Đường thẳng
    • Đường cong
    • Cung
    • Đa giác
    • Hình tròn
    • Hình elip
    • SVG paths
  • Có thể dùng cả Canvas và SVG làm đích render

Cài đặt và sử dụng cơ bản

  • Cài đặt bằng npm
npm install --save roughjs
  • Trong mã, import roughjs để sử dụng
import rough from 'roughjs';
  • Với Canvas, tạo context bằng rough.canvas() rồi vẽ hình
const rc = rough.canvas(document.getElementById('canvas'));

rc.rectangle(10, 10, 200, 200); // x, y, width, height
  • Với SVG, tạo node bằng rough.svg() rồi thêm vào SVG
const rc = rough.svg(svg);

let node = rc.rectangle(10, 10, 200, 200); // x, y, width, height
svg.appendChild(node);
  • Cũng cung cấp API cơ bản để vẽ hình tròn, hình elip và đường thẳng
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

Điều chỉnh phần tô và biểu đạt kiểu phác thảo

  • Phần tô được thiết lập bằng fill và các tùy chọn liên quan
    • fill: 'red' dùng kiểu tô hachure màu đỏ
    • Điều chỉnh độ dày các nét hachure bằng fillWeight
    • Thay đổi góc và khoảng cách hachure bằng hachureAngle và hachureGap
    • Có thể dùng kiểu tô đơn sắc với fillStyle: 'solid'
rc.circle(50, 50, 80, { fill: 'red' });
rc.rectangle(120, 15, 80, 80, { fill: 'red' });

rc.circle(50, 150, 80, {
  fill: "rgb(10,150,10)",
  fillWeight: 3
});

rc.rectangle(220, 15, 80, 80, {
  fill: 'red',
  hachureAngle: 60,
  hachureGap: 8
});

rc.rectangle(120, 105, 80, 80, {
  fill: 'rgba(255,0,200,0.2)',
  fillStyle: 'solid'
});
  • Các kiểu tô được hỗ trợ gồm hachure, solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line
  • Độ rung của nét vẽ và cách thể hiện đường viền có thể thay đổi bằng các tùy chọn như roughness, bowing, stroke, strokeWidth
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 });

SVG path và tài liệu API

  • Có thể vẽ chuỗi SVG path bằng rc.path()
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' });

Bài viết liên quan

1 bình luận

 
GN⁺ 2023-12-23
Ý kiến trên Hacker News