Rough.js: Membuat grafis dengan efek sketsa seperti digambar tangan

 (roughjs.com)
4 poin oleh GN⁺ 2023-12-23 | 1 komentar | Bagikan ke WhatsApp

Rough.js

  • Rough.js adalah library grafis kecil yang memungkinkan pembuatan grafis dengan gaya gambar manual mirip sketsa.
  • Menyediakan bentuk dasar untuk menggambar garis, kurva, busur, poligon, lingkaran, dan elips, serta mendukung penggambaran path SVG.
  • Rough.js bekerja di Canvas maupun SVG.

Instalasi

  • Instal melalui npm: npm install --save roughjs
  • Gunakan di kode: import rough from 'roughjs';

Cara penggunaan

  • Seluruh API Rough.js dapat dilihat di Github.
  • Contoh penggunaan Canvas: const rc = rough.canvas(document.getElementById('canvas')); rc.rectangle(10, 10, 200, 200);
  • Contoh penggunaan SVG: const rc = rough.svg(svg); let node = rc.rectangle(10, 10, 200, 200); svg.appendChild(node);

Garis dan elips

  • Contoh menggambar lingkaran, elips, dan garis: rc.circle(80, 120, 50); rc.ellipse(300, 100, 150, 80); rc.line(80, 120, 300, 100);

Isian

  • Gaya isian mencakup hachure (default), solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line, dan lainnya.
  • Contoh isian: rc.circle(50, 50, 80, { fill: 'red' }); rc.rectangle(120, 15, 80, 80, { fill: 'red' });

Gaya sketsa

  • Contoh penyesuaian gaya sketsa: rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' }); rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

Path SVG

  • Contoh menggambar path SVG: rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });

Contoh

  • Contoh dapat dilihat di sini.

API & dokumentasi

  • API Rough.js lengkap

Kredit

  • Algoritme inti untuk menggambar outline garis dan elips diadaptasi dari library handyprocessing.
  • Algoritme untuk mengonversi busur SVG ke Canvas diadaptasi dari codebase Mozilla.

Dukung proyek ini

  • Anda dapat mendukung proyek ini melalui Github Sponsors atau Open Collective.
  • Proyek ini didukung oleh Excalidraw, Cube, Diagrams.net, Terrastruct, SheetJS, Poster Maker, Chartle, dan lainnya.

Lisensi

  • Lisensi MIT, hak cipta Preet Shihn.

Opini GN⁺

  • Rough.js adalah library inovatif yang memudahkan pengguna mewujudkan grafis bergaya gambar manual di web.
  • Fitur untuk menyesuaikan beragam gaya isian dan gaya sketsa menghadirkan dimensi baru bagi desain grafis berbasis web.
  • Library ini didukung oleh komunitas open source dan terintegrasi dengan berbagai alat berbasis web, sehingga turut memperkaya pengalaman pengguna.

Bacaan terkait

1 komentar

 
GN⁺ 2023-12-23
Opini Hacker News

  • Contoh penggunaan RoughNotation & RoughJS

    • Menyebut RoughNotation, yang mendukung garis bawah, penekanan, dan sebagainya menggunakan RoughJS.
    • Sebagai contoh implementasi yang terinspirasi dari situs web miliknya, pengguna diarahkan untuk melihat tulisan yang merangkum cara kerjanya saat kursor diarahkan ke judul yang disorot.
    • Dengan mencantumkan postingan Hacker News terkait beserta jumlah komentarnya, ditunjukkan popularitas dan contoh penggunaan RoughJS.

  • Wired Elements & svg2roughjs

    • Memperkenalkan Wired Elements, kumpulan web component yang dirender dalam gaya sketsa menggunakan RoughJS.
    • Berbagi pengalaman membuat wrapper svg2roughjs yang mengubah file SVG menjadi sketsa.

  • Pembuatan mockup interaktif dengan RoughJS

    • Memperkenalkan contoh penggunaan untuk membuat mockup interaktif bersama WiredJS.
    • Menyediakan contoh mockup dan tautan kode sumber.

  • Beragam pemanfaatan RoughJS

    • Membandingkannya dengan Excalidraw dan menyatakan menyukai efek RoughJS.
    • Contoh penggunaan RoughJS di horserecords.info.
    • Berbagi pengalaman mengimplementasikan generator "Sketchify" di dalam Boxy SVG, sambil menekankan kelebihan RoughJS yang hampir tidak memiliki dependensi dan dapat dijalankan di dalam web worker.
    • Memuji kemudahan penggunaan library ini serta stabilitasnya yang teruji oleh waktu, dan membagikan contoh penggunaan untuk membuat chart di usdc.cool.
    • Menyampaikan terima kasih kepada Rough.js, serta pendapat bahwa membuat Sketchy Shapes yang bisa ditambahkan ke proyek Hatch dan menyesuaikan parameternya secara real-time terasa menyenangkan.

Ringkasan ini menunjukkan beragam contoh penggunaan RoughJS dan alat-alat terkait dari komentar Hacker News serta pengalaman positif para penggunanya. RoughJS adalah library JavaScript yang dapat membuat grafis bergaya sketsa seperti digambar tangan, populer di kalangan web developer, dan digunakan untuk membuat berbagai web component seperti mockup, chart, dan elemen interaktif.