Rough.js: Library pembuat grafik sketsa bergaya gambar tangan

 (roughjs.com)
4 poin oleh GN⁺ 2023-12-23 | 1 komentar | Bagikan ke WhatsApp
  • Rough.js adalah library JavaScript ringan untuk membuat grafik bergaya sketsa yang tampak seperti digambar tangan, bukan bentuk digital yang tajam
  • Ukurannya kecil, kurang dari 9 kB dalam kondisi gzipped, tetapi dapat menangani garis, kurva, busur, poligon, lingkaran, elips, hingga SVG path
  • Mendukung Canvas dan SVG dengan alur API yang sama, sehingga Anda dapat memilih rough.canvas() atau rough.svg() sesuai target rendering
  • Selain isian default hachure, library ini mendukung solid, zigzag, cross-hatch, dots, sunburst, dashed, dan zigzag-line
  • Opsi seperti roughness, bowing, strokeWidth, hachureAngle, dan hachureGap dapat digunakan untuk menyesuaikan goyangan garis dan kerapatan isian

Library ringan untuk menggambar bentuk bergaya gambar tangan

  • Rough.js adalah library JavaScript untuk membuat grafik bergaya sketsa
  • Ukuran library ini kurang dari 9 kB dalam kondisi gzipped
  • Mendukung bentuk dasar sekaligus path
    • Garis
    • Kurva
    • Busur
    • Poligon
    • Lingkaran
    • Elips
    • SVG paths
  • Target rendering dapat menggunakan Canvas maupun SVG

Instalasi dan penggunaan dasar

  • Instal melalui npm
npm install --save roughjs
  • Di kode, impor dan gunakan roughjs
import rough from 'roughjs';
  • Pada Canvas, buat konteks dengan rough.canvas(), lalu gambar bentuk
const rc = rough.canvas(document.getElementById('canvas'));

rc.rectangle(10, 10, 200, 200); // x, y, width, height
  • Pada SVG, buat node dengan rough.svg() lalu tambahkan ke SVG
const rc = rough.svg(svg);

let node = rc.rectangle(10, 10, 200, 200); // x, y, width, height
svg.appendChild(node);
  • API dasar untuk menggambar lingkaran, elips, dan garis juga tersedia
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

Menyesuaikan isian dan ekspresi sketsa

  • Isian diatur dengan fill dan opsi terkait
    • fill: 'red' menggunakan isian hachure berwarna merah
    • fillWeight menyesuaikan ketebalan garis hachure
    • hachureAngle dan hachureGap mengubah sudut dan jarak hachure
    • fillStyle: 'solid' dapat digunakan untuk isian warna 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'
});
  • Gaya isian yang didukung adalah hachure, solid, zigzag, cross-hatch, dots, sunburst, dashed, dan zigzag-line
  • Goyangan garis dan ekspresi garis tepi dapat diubah dengan opsi seperti roughness, bowing, stroke, dan 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 dan dokumentasi API

  • String SVG path dapat digambar dengan 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' });

Bacaan terkait

1 komentar

 
GN⁺ 2023-12-23
Opini Hacker News