- Rough.js เป็นไลบรารี JavaScript ขนาดเบาสำหรับสร้างกราฟิก สไตล์สเก็ตช์ ที่ดูเหมือนวาดด้วยมือ แทนรูปทรงดิจิทัลคมกริบ
- มีขนาดเล็ก ต่ำกว่า 9kB เมื่อ gzip แต่รองรับทั้งเส้น เส้นโค้ง ส่วนโค้ง รูปหลายเหลี่ยม วงกลม วงรี และแม้แต่ SVG path
- รองรับทั้ง Canvas และ SVG ด้วยลำดับการใช้งาน API เดียวกัน จึงเลือก
rough.canvas() หรือ rough.svg() ได้ตามเป้าหมายการเรนเดอร์
- นอกจากการเติมพื้นแบบค่าเริ่มต้น hachure แล้วยังรองรับ
solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line
- ปรับความสั่นของเส้นและความหนาแน่นของการเติมพื้นได้ด้วยออปชันอย่าง
roughness, bowing, strokeWidth, hachureAngle, hachureGap
ไลบรารีขนาดเบาสำหรับวาดรูปทรงสไตล์วาดมือ
- Rough.js เป็นไลบรารี JavaScript สำหรับสร้างกราฟิกสไตล์สเก็ตช์
- ขนาดไลบรารี ต่ำกว่า 9kB เมื่อ gzip
- รองรับทั้งรูปทรงพื้นฐานและ path
- เส้น
- เส้นโค้ง
- ส่วนโค้ง
- รูปหลายเหลี่ยม
- วงกลม
- วงรี
- SVG paths
- เป้าหมายการเรนเดอร์สามารถใช้ได้ทั้ง Canvas และ SVG
การติดตั้งและการใช้งานพื้นฐาน
npm install --save roughjs
- ในโค้ด ให้นำเข้า
roughjs เพื่อใช้งาน
import rough from 'roughjs';
- บน Canvas ให้สร้างคอนเท็กซ์ด้วย
rough.canvas() แล้ววาดรูปทรง
const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); // x, y, width, height
- บน SVG ให้สร้างโหนดด้วย
rough.svg() แล้วเพิ่มเข้าไปใน SVG
const rc = rough.svg(svg);
let node = rc.rectangle(10, 10, 200, 200); // x, y, width, height
svg.appendChild(node);
- ยังมี API พื้นฐานสำหรับวาดวงกลม วงรี และเส้น
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
การเติมพื้นและปรับการแสดงผลแบบสเก็ตช์
- การเติมพื้นตั้งค่าด้วย
fill และออปชันที่เกี่ยวข้อง
fill: 'red' ใช้การเติมพื้นแบบ hachure สีแดง- ใช้
fillWeight ปรับความหนาของเส้น hachure
- ใช้
hachureAngle และ hachureGap เปลี่ยนมุมและระยะห่างของ hachure
- ใช้
fillStyle: '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'
});
- สไตล์การเติมพื้น ที่รองรับคือ
hachure, solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line
- ความสั่นของเส้นและการแสดงผลเส้นขอบสามารถเปลี่ยนได้ด้วยออปชันอย่าง
roughness, bowing, stroke, 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 และเอกสาร API
- สตริง SVG path สามารถวาดได้ด้วย
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' });
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
RoughNotation(https://roughnotation.com/) ก็น่าสนใจเช่นกัน รองรับการขีดเส้นใต้ ไฮไลต์ และอื่น ๆ โดยใช้ RoughJS
เว็บไซต์ของฉันเองก็ได้แรงบันดาลใจบางส่วนจากที่นี่ ลองเอาเมาส์ไปวางเหนือหัวข้อที่ถูกไฮไลต์ได้เลย: https://muxup.com/
วิธีทำสรุปไว้ที่ https://muxup.com/2022q3/muxup-implementation-notes#randomly-generated-title-highlights และถ้าเข้าไปดูจะเห็นว่าโค้ดจริงมีนิดเดียว
อาจเป็นพฤติกรรมที่ตั้งใจไว้ก็ได้ แต่ถ้าไม่ใช่ก็ฝากไว้เป็นข้อมูล สภาพแวดล้อมคือ Chrome/Linux
ข้อมูลที่เกี่ยวข้อง:
Show HN: Sketchy-appearance interactive timeline made using RoughJS - https://news.ycombinator.com/item?id=29563678 - ธันวาคม 2021, ความคิดเห็น 1 รายการ
Rough.js – Create graphics with a hand-drawn, sketchy, appearance - https://news.ycombinator.com/item?id=29555853 - ธันวาคม 2021, ความคิดเห็น 23 รายการ
Show HN: Hand-drawn timelines using RoughJS - https://news.ycombinator.com/item?id=23998225 - กรกฎาคม 2020, ความคิดเห็น 1 รายการ
Rough.js – Create graphics with a hand-drawn, sketchy, appearance - https://news.ycombinator.com/item?id=22787187 - เมษายน 2020, ความคิดเห็น 13 รายการ
Rough.js v4.0 – hand-drawn, sketchy graphics - https://news.ycombinator.com/item?id=22141526 - มกราคม 2020, ความคิดเห็น 20 รายการ
Show HN: RoughJS – Create hand-drawn graphics using JavaScript - https://news.ycombinator.com/item?id=16571827 - มีนาคม 2018, ความคิดเห็น 92 รายการ
Show HN: Rough.js simple lib to create hand-drawn, sketchy, scribbly graphics - https://news.ycombinator.com/item?id=13662347 - กุมภาพันธ์ 2017, ความคิดเห็น 1 รายการ
Wired Elements คือชุดเว็บคอมโพเนนต์จากผู้เขียนคนเดียวกัน และเรนเดอร์สไตล์สเก็ตช์ด้วย Rough.js
ใช้งานได้กับทุกเฟรมเวิร์ก
https://wiredjs.com/
กำลังใช้ร่วมกับ https://wiredjs.com ตอนทำ interactive mockup ตัวอย่างมีดังนี้
https://edea-dev.gitlab.io/mockups/ (ซอร์ส: https://gitlab.com/edea-dev/mockups)
https://otfn.development.fabcity.hamburg/git-pdm-mockups/
ทำให้นึกถึง https://excalidraw.com/
อัปเดต: มีกรณีแบบนี้จริง เช่น https://github.com/excalidraw/excalidraw/issues/362
เมื่อก่อนเคยทำ ไลบรารีแสดงผลข้อมูล roughviz โดยใช้ RoughJS
https://www.jwilber.me/roughviz/
ผู้สร้างอย่าง Preet ก็ทำโปรเจกต์เจ๋ง ๆ ไว้อีกเยอะ ดังนั้นเว็บไซต์ของเขาก็น่าลองดูด้วย: https://shihn.ca/creations/
ใช้ Rough.js ในการทำ ตัวสร้าง Sketchify ของ Boxy SVG(https://boxy-svg.com/ideas/23)
สิ่งที่ชอบเป็นพิเศษคือ Rough.js มี dependency น้อยมาก และ รันใน web worker ได้ด้วย
เป็นไลบรารีที่ยอดเยี่ยม เคยใช้ตอนทำตัวห่อ svg2roughjs สำหรับ แปลงไฟล์ SVG ปกติให้เป็นสไตล์สเก็ตช์: https://github.com/fskpf/svg2roughjs
Rough.js มีเสน่ห์มาก กำลังใช้วาด data grid ที่ https://www.vanillacomponents.com/
ฉันชอบ Rough.js เคยใช้ตอนทำ Sketchy Shapes ที่เพิ่มเข้าไปในโปรเจกต์ Hatch ได้
สนุกดีที่ลองปรับพารามิเตอร์แบบเรียลไทม์ได้: https://hatch.one/@darrin/sketchy-shapes/edit