การสนทนาสั้นๆ เกี่ยวกับ Rough.js ซึ่งเป็นไลบรารีกราฟิกสไตล์วาดด้วยมือที่ใช้ Canvas

แนะนำไลบรารี JS กราฟิกสไตล์วาดด้วยมือโดยใช้ Canvas

Rough.js เป็นไลบรารี่ที่ใช้ Canvas น้ำหนักเบา (ประมาณ 8k) ซึ่งสามารถวาดสไตล์วาดด้วยมือคร่าวๆ ได้

มอบความสามารถพื้นฐานสำหรับการวาดเส้น เส้นโค้ง ส่วนโค้ง รูปหลายเหลี่ยม วงกลม และวงรี และรองรับการวาดเส้นทาง SVG

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

ลิงค์ดาวน์โหลด: https://github.com/pshihn/rough/tree/master/dist

 ติดตั้ง npm -- บันทึก roughjs

 const rc = rough.canvas(document.getElementById('canvas'));rc.rectangle(10, 10, 200, 200); // x, y, ความกว้าง, ความสูง

 rc.circle(80, 120, 50); // centerX, centerY, เส้นผ่านศูนย์กลาง rc.ellipse (300, 100, 150, 80); // centerX, centerY, ความกว้าง, ความสูง rc.line (80, 120, 300, 100) ; // x1, y1, x2, y2

 rc.circle(50, 50, 80, { เติม: 'สีแดง' }); // เติมด้วยสีแดง hachurerc.rectangle (120, 15, 80, 80, { เติม: 'สีแดง' }); , 150, 80, { เติม: rgb (10,150,10), fillWeight: 3 // เส้นหนาขึ้นสำหรับ hachure});rc.rectangle(220, 15, 80, 80, { เติม: 'สีแดง', hachureAngle: 60, // มุมของ hachure, hachureGap: 8});rc.rectangle(120, 105, 80, 80 , { กรอก: 'rgba (255,0,200,0.2)', fillStyle: 'ทึบ' // ทึบ เติม});

 rc.rectangle(15, 15, 80, 80, { ความหยาบ: 0.5, เติม: 'สีแดง' });rc.rectangle(120, 15, 80, 80, { ความหยาบ: 2.8, เติม: 'สีน้ำเงิน' }); rc.rectangle (220, 15, 80, 80, { โค้งคำนับ: 6, จังหวะ: 'สีเขียว', strokeWidth: 3 });

 rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { เติม: 'สีเขียว' });rc.path('M230 80 A 45 45, 0, 1, 0 , 275 125 L 275 80 Z', { กรอก: 'สีม่วง' });rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { เติม: 'สีแดง' });rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { กรอก: 'สีฟ้า' });

รวมกับ Web Workers

หากมีการนำเข้าไลบรารี Workly Web Workers ในหน้าเว็บ RoughJS จะถ่ายโอนการดำเนินการทั้งหมดไปยังผู้ปฏิบัติงานเว็บโดยอัตโนมัติเพื่อเผยแพร่เธรดหลักของ UI สิ่งนี้มีประโยชน์มากเมื่อใช้ RoughJS เพื่อสร้างภาพวาดที่ซับซ้อน (เช่น แผนที่) อ่านเพิ่มเติม

 <script src=https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js></script><script src=../../dist/rough.min.js> </สคริปต์>

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

API และเอกสารประกอบ

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

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network