Diskusi singkat tentang Rough.js, perpustakaan grafis gaya gambar tangan berdasarkan Canvas

Merekomendasikan pustaka JS grafis gaya gambar tangan berdasarkan Canvas.

Rough.js adalah perpustakaan ringan (sekitar 8k), berbasis kanvas yang dapat menggambar gaya gambar tangan kasar.

Memberikan kemampuan dasar untuk menggambar garis, kurva, busur, poligon, lingkaran, dan elips, serta mendukung menggambar jalur SVG.

Github: https://github.com/pshihn/rough

Tautan unduhan: https://github.com/pshihn/rough/tree/master/dist

 npm install --simpan roughjs

 const rc = rough.canvas(document.getElementById('canvas'));rc.rectangle(10, 10, 200, 200); // x, y, lebar, tinggi

 rc.lingkaran(80, 120, 50); // pusatX, pusatY, diameterrc.ellipse(300, 100, 150, 80); // pusatX, pusatY, lebar, tinggirc.line(80, 120, 300, 100) ; // x1, y1, x2, y2

 rc.circle(50, 50, 80, { isi: 'merah' }); // isi dengan hachurerc.rectangle(120, 15, 80, 80, { isi: 'merah' }); , 150, 80, { isi: rgb(10,150,10), isiBerat: 3 // garis yang lebih tebal untuk hachure});rc.rectangle(220, 15, 80, 80, { isi: 'merah', hachureAngle: 60, // sudut hachure, hachureGap: 8});rc.rectangle(120, 105, 80, 80 , { isi: 'rgba(255,0,200,0.2)', gaya isi: 'padat' // padat mengisi});

 rc.rectangle(15, 15, 80, 80, { kekasaran: 0,5, isi: 'merah' });rc.rectangle(120, 15, 80, 80, { kekasaran: 2.8, isi: 'biru' }); rc.rectangle(220, 15, 80, 80, { membungkuk: 6, guratan: 'hijau', lebar guratan: 3 });

 rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { isi: 'hijau' });rc.path('M230 80 A 45 45, 0, 1, 0 , 275 125 L 275 80 Z', { isi: 'ungu' });rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { isi: 'merah' });rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { isi: 'biru' });

Dikombinasikan dengan Pekerja Web

Jika ada pustaka Workly Web Workers yang diimpor di halaman web, RoughJS akan secara otomatis mentransfer semua operasi ke pekerja web untuk melepaskan thread utama UI. Ini sangat berguna saat menggunakan RoughJS untuk membuat gambar yang rumit (seperti peta). Baca selengkapnya.

 <skrip src=https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js></script><skrip src=../../dist/rough.min.js> </skrip>

https://github.com/pshihn/rough/wiki/Examples

API dan dokumentasi

https://github.com/pshihn/rough/wiki

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.