Rough.js: สร้างกราฟิกเอฟเฟกต์สเก็ตช์เหมือนวาดด้วยมือ

Rough.js

• Rough.js เป็นไลบรารีกราฟิกขนาดเล็กสำหรับวาดกราฟิกในสไตล์ภาพวาดด้วยมือแบบสเก็ตช์
• มีรูปทรงพื้นฐานสำหรับวาดเส้น เส้นโค้ง ส่วนโค้ง รูปหลายเหลี่ยม วงกลม และวงรี รวมถึงรองรับการวาด SVG path
• Rough.js ใช้งานได้ทั้งบน canvas และ SVG

การติดตั้ง

• ติดตั้งผ่าน npm: npm install --save roughjs
• ใช้งานในโค้ด: import rough from 'roughjs';

วิธีใช้งาน

• สามารถดู Rough.js API ทั้งหมดได้บน Github
• ตัวอย่างการใช้ canvas: const rc = rough.canvas(document.getElementById('canvas')); rc.rectangle(10, 10, 200, 200);
• ตัวอย่างการใช้ SVG: const rc = rough.svg(svg); let node = rc.rectangle(10, 10, 200, 200); svg.appendChild(node);

เส้นและวงรี

• ตัวอย่างการวาดวงกลม วงรี และเส้น: rc.circle(80, 120, 50); rc.ellipse(300, 100, 150, 80); rc.line(80, 120, 300, 100);

การเติมสี

• สไตล์การเติมสีมี hachure (ค่าเริ่มต้น), solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line เป็นต้น
• ตัวอย่างการเติมสี: rc.circle(50, 50, 80, { fill: 'red' }); rc.rectangle(120, 15, 80, 80, { fill: 'red' });

สไตล์สเก็ตช์

• ตัวอย่างการปรับสไตล์สเก็ตช์: rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' }); rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

SVG path

• ตัวอย่างการวาด SVG path: rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });

ตัวอย่าง

• ดูตัวอย่างได้ที่นี่

API & เอกสาร

• Rough.js API ทั้งหมด

เครดิต

• อัลกอริทึมหลักสำหรับวาดเส้นขอบของเส้นและวงรีนำมาจากไลบรารี handyprocessing
• อัลกอริทึมสำหรับแปลง SVG arc ไปเป็น canvas นำมาจากโค้ดเบสของ Mozilla

สนับสนุนโปรเจ็กต์นี้

• สามารถสนับสนุนโปรเจ็กต์นี้ได้ผ่าน Github Sponsors หรือ Open Collective
• โปรเจ็กต์นี้ได้รับการสนับสนุนจาก Excalidraw, Cube, Diagrams.net, Terrastruct, SheetJS, Poster Maker, Chartle เป็นต้น

ใบอนุญาต

• ใบอนุญาต MIT, ลิขสิทธิ์โดย Preet Shihn

---

ความเห็นของ GN⁺

• Rough.js เป็นไลบรารีที่โดดเด่นซึ่งช่วยให้ผู้ใช้สร้างกราฟิกสไตล์วาดด้วยมือบนเว็บได้อย่างง่ายดาย
• ความสามารถในการปรับสไตล์การเติมสีและสไตล์สเก็ตช์ที่หลากหลาย ช่วยเพิ่มมิติใหม่ให้กับงานออกแบบกราฟิกบนเว็บ
• ไลบรารีนี้ได้รับการสนับสนุนจากชุมชนโอเพนซอร์ส และถูกผสานรวมเข้ากับเครื่องมือบนเว็บหลากหลายประเภท ช่วยยกระดับประสบการณ์ของผู้ใช้

[GN⁺]

ความเห็นจาก Hacker News

• กรณีใช้งานของ RoughNotation และ RoughJS

  • มีการกล่าวถึง RoughNotation ซึ่งรองรับการขีดเส้นใต้ การเน้นข้อความ และอื่น ๆ โดยใช้ RoughJS
  • มีตัวอย่างที่สร้างขึ้นโดยได้แรงบันดาลใจจากเว็บไซต์ของตนเอง และเมื่อเอาเมาส์ไปวางเหนือหัวข้อที่ไฮไลต์ไว้ จะมีการแนะนำให้อ่านบทความที่สรุปวิธีการทำงาน
  • มีการลิสต์โพสต์บน Hacker News ที่เกี่ยวข้องและจำนวนคอมเมนต์ของแต่ละโพสต์ เพื่อแสดงให้เห็นถึงความนิยมและกรณีใช้งานของ RoughJS

• Wired Elements และ svg2roughjs

  • แนะนำ Wired Elements ซึ่งเป็นชุดเว็บคอมโพเนนต์ที่เรนเดอร์เป็นสไตล์สเก็ตช์โดยใช้ RoughJS
  • แชร์ประสบการณ์การสร้าง wrapper ชื่อ svg2roughjs สำหรับแปลงไฟล์ SVG ให้เป็นภาพสเก็ตช์

• การสร้าง mockup แบบโต้ตอบได้ด้วย RoughJS

  • แนะนำกรณีการใช้งานร่วมกับ WiredJS เพื่อสร้าง mockup แบบโต้ตอบได้
  • มีการให้ลิงก์ตัวอย่าง mockup และซอร์สโค้ด

• การใช้งาน RoughJS ที่หลากหลาย

  • มีความเห็นว่าชอบเอฟเฟกต์ของ RoughJS เมื่อเทียบกับ Excalidraw
  • ยกตัวอย่างการใช้งาน RoughJS บน horserecords.info
  • แชร์ประสบการณ์การพัฒนาเครื่องมือสร้าง "Sketchify" ภายใน Boxy SVG พร้อมเน้นข้อดีว่า RoughJS แทบไม่มี dependency และสามารถรันใน web worker ได้
  • ชื่นชมว่าไลบรารีใช้งานง่ายและมีความเสถียรในระยะยาว พร้อมยกตัวอย่างว่าเคยใช้ทำกราฟบน usdc.cool
  • แสดงความขอบคุณต่อ Rough.js และบอกว่าได้สร้าง Sketchy Shapes ที่สามารถเพิ่มเข้าไปในโปรเจกต์ Hatch ได้ รวมทั้งสนุกกับการปรับพารามิเตอร์แบบเรียลไทม์

สรุปนี้แสดงให้เห็นจากคอมเมนต์บน Hacker News ถึงกรณีใช้งานที่หลากหลายของ RoughJS และเครื่องมือที่เกี่ยวข้อง รวมถึงประสบการณ์เชิงบวกของผู้ใช้ RoughJS เป็นไลบรารี JavaScript สำหรับสร้างกราฟิกสไตล์สเก็ตช์ที่ดูเหมือนวาดด้วยมือ ได้รับความนิยมในหมู่นักพัฒนาเว็บ และถูกนำไปใช้สร้าง mockup, กราฟ, องค์ประกอบแบบโต้ตอบได้ และเว็บคอมโพเนนต์หลากหลายรูปแบบ.