PerfectVector
โดย Claire Yoonอ่าน 3 นาที

เปลี่ยนภาพวาดเป็น SVG เส้นเดี่ยวสำหรับเครื่องพล็อตเตอร์

แปลงภาพวาดที่สแกนเป็นพาธ SVG ตามแนวกึ่งกลางที่เครื่องพล็อตเตอร์ปากกาลากเพียงครั้งเดียว โดยไม่มีขอบซ้อนสองเส้นจากการลากเส้นขอบแบบทั่วไป

ในหน้านี้

หากต้องการเปลี่ยนภาพวาดเป็น SVG เส้นเดี่ยวสำหรับเครื่องพล็อตเตอร์ปากกา ให้ใช้ การลากเส้นตามแนวกึ่งกลาง แทนการลากเส้นขอบแบบทั่วไป เครื่องมือแปลงเป็นเวกเตอร์ทั่วไปจะตามขอบทั้งสองด้านของรอยหมึกแต่ละเส้น ส่วนเครื่องมือลากเส้นกึ่งกลางจะประมาณพาธหนึ่งเส้นผ่านตรงกลาง ซึ่งเป็นเส้นทางที่ปากกาควรลากตาม

ผลลัพธ์อาจมีพาธเปิดหลายเส้นและต้องยกปากกาหลายครั้ง คำว่า “เส้นเดี่ยว” อธิบายรูปทรงของรอยเส้นแต่ละเส้น ไม่ได้รับประกันว่าภาพทั้งหมดจะเป็น <path> เดียวที่ต่อเนื่องกัน การเชื่อมทุกส่วนเป็นวัตถุเดียวอาจเพิ่มเส้นเชื่อมที่ไม่ต้องการ จึงควรปรับเส้นทางการเคลื่อนที่หลังจากรูปวาดถูกต้องแล้วเท่านั้น

ขั้นตอนโดยย่อ
  1. เริ่มจากลายเส้นบางสม่ำเสมอ มีความต่างสีสูง และอยู่บนพื้นหลังสะอาด
  2. สแกนหรือถ่ายภาพโดยให้กระดาษแบนราบ แล้วลบเงาและพื้นผิวกระดาษ
  3. ใช้การลากเส้นกึ่งกลางใน Inkscape หรือเครื่องมืออื่นที่รองรับ
  4. กำหนดผลลัพธ์ให้มีเส้นขอบที่มองเห็นได้และไม่มีสีเติม แล้วตรวจทุกจุดแยกและปลายเส้น
  5. ลบจุดเล็ก ๆ ปรับความสั่นของเส้นที่เห็นชัด และเชื่อมเฉพาะเส้นที่ควรแตะกัน
  6. กำหนดขนาดหน้า SVG ดูตัวอย่างเส้นทางการพล็อต และทดสอบบนกระดาษชิ้นเล็ก

ทำไมการลากเส้น SVG แบบทั่วไปจึงวาดทุกเส้นสองครั้ง

รอยปากกาเมจิกมีความกว้างที่มองเห็นได้ เครื่องมือเวกเตอร์แบบเส้นขอบมองพื้นที่สีเข้มนั้นเป็นรูปทรง แล้วสร้างขอบล้อมรอบ SVG ที่ได้จึงมักมีพาธปิดยาวหนึ่งเส้น ไล่จากด้านหนึ่งของรอยเดิม วนรอบปลาย แล้วกลับมาตามอีกด้าน

ไฟล์นั้นดูถูกต้องบนหน้าจอ เพราะรูปทรงที่เติมสีคล้ายรอยหมึก แต่เครื่องพล็อตเตอร์ปากกาไม่ได้เติมสีให้เป็นพื้นที่ มันลากตามพาธเวกเตอร์ ขอบทั้งสองด้านจึงกลายเป็นการลากปากกาสองรอบ

เส้นขอบเทียบกับเส้นกึ่งกลาง
ลำดับภาพเชิงแนวคิดแสดงภาพวาดดอกไม้เส้นหนา การลากเส้นขอบคู่ตามขอบทั้งสองด้าน และพาธกึ่งกลางเส้นเดียวที่มีโหนดแก้ไขได้
แผนภาพเชิงแนวคิด: การลากเส้นทั่วไปตามขอบทั้งสองด้านของรอยหมึก ส่วนการลากเส้นกึ่งกลางประมาณเส้นทางหนึ่งเส้นผ่านตรงกลาง

พาธคู่แบบนั้นมีประโยชน์เมื่องานปลายทางต้องการรูปทรงเติมสี ภาพเงาสำหรับพิมพ์ หรือขอบสำหรับตัด แต่เป็นรูปทรงที่ไม่เหมาะเมื่อปากกา หัวแกะสลัก หรือเครื่องมือฟอยล์ควรลากตามรอยเดิมเพียงครั้งเดียว บทความ เหตุใดลายเส้นจึงกลายเป็นเส้นขอบ อธิบายปัญหานี้จากมุมของลายเส้นทั่วไป ส่วนที่นี่เราจะสร้างทางเลือกสำหรับพล็อตเตอร์โดยเฉพาะ

SVG เส้นเดี่ยวมีอะไรอยู่ภายในจริง ๆ

ภาพลายเส้นที่พร้อมใช้กับพล็อตเตอร์มักมีคุณสมบัติดังนี้:

  • พาธใช้เส้นขอบและไม่มีสีเติม;
  • รอยที่มองเห็นแต่ละรอยแทนด้วยพาธกึ่งกลางหนึ่งเส้น ไม่ใช่รูปทรงปิดบาง ๆ;
  • จุดตัดที่ตั้งใจให้เชื่อมกันพบกันอย่างเรียบร้อย ไม่มีช่องว่างเล็ก ๆ หรือส่วนเส้นซ้ำ;
  • มีปลายเส้นตรงจุดที่ปากกาควรหยุดหรือยกขึ้น;
  • ขนาดหน้าตรงกับกระดาษหรือพื้นที่พล็อตที่ต้องการ;
  • พาธอยู่ภายในขอบเขตหน้า

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

สำหรับเอฟเฟกต์วาดเส้นในเบราว์เซอร์ คู่มือแอนิเมชันเส้น SVG เปรียบเทียบเส้นทางเปิดกับแถบเติมสีและเส้นรอบรูป เตรียมเส้นทางวาดก่อนเพิ่มจังหวะเวลา เพราะแอนิเมชันไม่สามารถกู้ลำดับการลากปากกาจากเส้นขอบได้

เอกสาร AxiDraw อธิบายพฤติกรรมของเครื่องได้ชัดเจนเป็นพิเศษ: ในโหมดพล็อต SVG ปกติ พาธจะถูกพล็อตเป็นพาธ ส่วนสีเติมและลักษณะเส้นขอบไม่ได้ใช้ระบายพื้นที่ ตัวอย่างบนหน้าจออาจดูหนาและทึบ แต่ยังบันทึกเส้นทางที่คุณไม่ได้ตั้งใจไว้

เลือกภาพวาดที่เหมาะกับการลากเส้นกึ่งกลาง

การลากเส้นกึ่งกลางทำงานได้ดีที่สุดเมื่อต้นฉบับมีแนวกึ่งกลางที่อัลกอริทึมระบุได้ชัด:

  • หมึกสีเข้มบนกระดาษขาวหรือกระดาษสีสม่ำเสมอ;
  • ความกว้างเส้นค่อนข้างคงที่;
  • มีช่องว่างชัดเจนระหว่างรอยเส้นใกล้กัน;
  • ไม่มีแรเงา กลุ่มเส้นแรเงาหนาแน่น หรือพื้นผิวกระดาษมาแย่งความเด่นจากเส้น;
  • เส้นโค้งใหญ่พอให้แยกจากสัญญาณรบกวนของการสแกน

ปากกาหัวสักหลาดบาง ปากกาเขียนเส้นละเอียด หรือลายเส้นพู่กันดิจิทัลสะอาด ๆ จัดการได้ง่ายกว่าดินสอ แรงกดดินสอสร้างรอยสีเทาที่มีพื้นผิวและขอบกับแนวกึ่งกลางไม่แน่นอน พู่กันเขียนตัวอักษรหัวกว้างมีแนวกึ่งกลาง แต่ความกว้างที่เปลี่ยนไปสื่ออารมณ์ซึ่งเส้นพล็อตเตอร์ความกว้างคงที่เส้นเดียวถ่ายทอดไม่ได้

หากความกว้างที่หลากหลายจำเป็นต่องาน มีสามทางเลือกที่ตรงไปตรงมา: เก็บเวอร์ชันเส้นขอบและเติมด้วยเส้นแรเงา ลากปากกาหลายรอบหรือใช้หัวปากกาต่างกัน หรือเก็บภาพเป็นกราฟิกเวกเตอร์เติมสี แทนการคาดหวังว่าเส้นกึ่งกลางเส้นเดียวจะให้ภาพเหมือนเดิม

1. บันทึกและเตรียมต้นฉบับ

สแกนภาพวาดเมื่อทำได้ หากถ่ายภาพ ให้วางกล้องขนานกับกระดาษและจัดแสงจากทั้งสองด้าน เพื่อไม่ให้ขอบด้านหนึ่งอยู่ในเงา ครอปหน้า แก้ความเพี้ยนของมุมมอง และหมุนภาพก่อนลากเส้น

จากนั้นเตรียมต้นฉบับขาวดำแบบเรียบง่าย:

  1. ปรับกระดาษให้ใกล้สีขาวโดยไม่ลบรอยจางที่ตั้งใจวาด;
  2. เพิ่มความเข้มให้เส้นที่ต้องการทุกเส้นยังต่อเนื่อง;
  3. ลบฝุ่น เศษยางลบ และเงาที่แยกอยู่;
  4. อย่าเพิ่มความคมจนเกิดขอบสว่างรอบเส้น;
  5. ตรวจจุดตัดเมื่อซูมสูง

อย่าทำเส้นให้หนาขึ้นเพียงเพื่อให้ “ดูเป็นเวกเตอร์มากขึ้น” รอยราสเตอร์ที่หนาขึ้นสร้างพื้นที่กว้างขึ้น ซึ่งแนวกึ่งกลางอาจกำกวมบริเวณโค้งแคบ คงความกว้างที่เล็กที่สุดซึ่งสะอาดและยังต่อเนื่องไว้

หากต้นฉบับเป็นภาพวาดของเด็กและความสั่นของเส้นเป็นส่วนหนึ่งของเสน่ห์ ให้ใช้คำแนะนำการบันทึกภาพใน การเปลี่ยนภาพวาดของเด็กเป็น SVG แต่ข้ามขั้นตอนลากเส้นขอบทั่วไปของบทความนั้น ใช้วิธีเตรียมภาพร่วมกันได้ แต่ต้องเปลี่ยนโหมดลากเส้น

2. ใช้การลากเส้นกึ่งกลางใน Inkscape

นำภาพที่เตรียมแล้วเข้า Inkscape เลือกภาพ และเปิด Path → Trace Bitmap เลือก Centerline tracing (autotrace) แทน Brightness cutoff หรือ Edge detection คู่มือสำหรับผู้เริ่มต้น Inkscape อธิบายว่าโหมดนี้ลดรูปทรงให้เป็นพาธเปิด และแนะนำสำหรับลายมือกับภาพลายเส้นอื่น ๆ

ดูตัวอย่างผลลัพธ์และสังเกตบริเวณที่จัดการยาก:

  • เส้นขนานที่อยู่ใกล้กันอาจยุบรวมเป็นเส้นเดียว;
  • วงเส้นอาจมีทางลัดเพิ่มขึ้นผ่านด้านใน;
  • จุดตัดอาจเลือกแขนงผิด;
  • เส้นจางอาจขาดเป็นหลายชิ้น;
  • ฝุ่นอาจกลายเป็นพาธเล็ก ๆ ที่แยกอยู่

ใช้ผลการลากเส้น ย้ายเวกเตอร์ออกจากราสเตอร์ และเปรียบเทียบเคียงกัน กำหนดวัตถุที่ลากเส้นแล้วให้ไม่มีสีเติมและมีเส้นขอบสีตัดกัน เพื่อให้เห็นเส้นทาง หากไม่เห็นอะไร ผลลัพธ์อาจเพียงยังไม่มีรูปแบบเส้นขอบ ให้เลือกแล้วกำหนดเส้นขอบให้

ชื่อเมนูและเอนจินลากเส้นที่มีให้ใช้อาจเปลี่ยนระหว่างเวอร์ชัน จึงควรใช้ตัวเลือกเส้นกึ่งกลางปัจจุบันที่แสดงใน Inkscape ที่ติดตั้ง แทนการทำตามคำแนะนำส่วนขยายเก่าโดยไม่ตรวจสอบ

3. ตรวจปลายเส้น จุดแยก และวงปิดที่เกิดโดยไม่ตั้งใจ

เปลี่ยนไปใช้เครื่องมือโหนด เริ่มจากปลายเส้นหนึ่งแล้วไล่เส้นทางในใจ เส้นกึ่งกลางที่ดีควรอยู่ใกล้กึ่งกลางรอยหมึก และเลือกเส้นทางเหมือนที่ปากกาจะลาก

แก้รูปทรงตามลำดับนี้:

  1. ลบจุดเล็กและส่วนเส้นสั้น ๆ สิ่งเหล่านี้ทำให้ปากกาแตะกระดาษโดยไม่จำเป็น
  2. เชื่อมเส้นที่ขาดกลับเข้าด้วยกัน เชื่อมปลายเส้นเฉพาะเมื่อต้นฉบับเป็นเส้นต่อเนื่อง
  3. ลบส่วนเส้นซ้ำ พาธเหมือนกันสองเส้นจะพล็อตสองครั้ง แม้ซ้อนกันพอดี
  4. แก้จุดแยก ตัดสินใจว่าพาธใดลากต่อและพาธใดจบที่ทางแยก
  5. ปรับความสั่นเฉพาะจุด ย้ายหรือลบโหนดไม่กี่จุด อย่าลดความซับซ้อนทั้งภาพโดยไม่ตรวจ
  6. เปิดวงปิดที่เกิดโดยไม่ตั้งใจ วงเส้นกึ่งกลางใช้ได้หากภาพมีวงนั้นจริง แต่รูปแคปซูลบาง ๆ ล้อมรอบรอยเส้นหมายความว่ายังมีรูปทรงแบบเส้นขอบหลงเหลือ

เปิดมุมมองเส้นขอบหรือโครงเส้นหากโปรแกรมรองรับ รูปแบบการแสดงผลอาจซ่อนเส้นซ้ำ แต่มุมมองพาธเปล่าจะเผยให้เห็นทันที

4. ตัดสินใจว่าควรยกปากกาตรงไหน

การยกปากกาน้อยลงอาจทำให้พล็อตเร็วขึ้นและลดรอยจากการเคลื่อนที่ แต่การไม่ยกปากกาเลยไม่ได้ดีกว่าเสมอ ตา จุด และลวดลายที่แยกจากกันต้องคงแยกไว้ หรือยอมมีเส้นเชื่อมที่มองเห็นได้

เชื่อมพาธเมื่อ:

  • ปลายเส้นพบกันอยู่แล้วในภาพวาด;
  • รอยที่ต้องการเป็นเส้นต่อเนื่อง;
  • การเชื่อมไม่เปลี่ยนเส้นทางผ่านจุดตัด

คงพาธแยกกันเมื่อ:

  • การเชื่อมทำให้ลากผ่านกระดาษว่าง;
  • ต้องเปลี่ยนสีหรือหัวปากกา;
  • องค์ประกอบซ้อนกันทางสายตาแต่ไม่ได้เป็นรอยเส้นเดียว;
  • การยกปากกาโดยตั้งใจช่วยป้องกันหมึกกองที่ทางแยก

ซอฟต์แวร์จัดลำดับพาธลดระยะเคลื่อนที่ขณะยกปากกาได้โดยไม่เปลี่ยนงาน เอกสาร อ้างอิงบรรทัดคำสั่ง ปัจจุบันของ AxiDraw อธิบายการจัดลำดับใหม่ว่าเป็นการปรับให้เหมาะสมด้วยการเปลี่ยนลำดับองค์ประกอบ และอาจเปลี่ยนทิศทางพาธ เพื่อลดระยะเคลื่อนที่ขณะยกปากกา นี่เป็นคนละขั้นตอนกับการลากเส้นกึ่งกลาง สร้างรอยเส้นที่ถูกต้องก่อน แล้วค่อยจัดลำดับ

5. กำหนดลักษณะเส้นขอบและขนาดเอกสาร

พล็อตเตอร์ตามรูปทรง ไม่ใช่ความหนาสำหรับตกแต่งที่เห็นในโปรแกรม ใช้ความกว้างเส้นบนหน้าจอพอเหมาะให้ตรวจพาธได้ง่าย การเปลี่ยนความกว้างนั้นมักไม่เปลี่ยนหัวปากกาจริง

กำหนดหน้า SVG ให้ตรงกับขนาดกระดาษที่ต้องการ และเว้นระยะปลอดภัยรอบภาพ ตรวจหน่วยและขนาดเอกสาร แทนการปรับขนาดด้วยสายตาในกล่องโต้ตอบพล็อต หากขนาดเปลี่ยนเมื่อนำเข้าอีกโปรแกรม ให้ใช้ การทดสอบ SVG ที่ทราบขนาด ก่อนแก้โหนดใด ๆ

หากใช้ปากกาหลายสี ให้จัดไว้ในเลเยอร์ที่ชัดเจน หรือใช้รูปแบบการกำหนดลักษณะที่ซอฟต์แวร์พล็อตเตอร์แยกได้ ทำทีละสีและรักษาตำแหน่งให้ตรงกันโดยไม่เปลี่ยนจุดกำเนิดของหน้า

6. ดูตัวอย่างและทดสอบก่อนพล็อตจริง

ใช้ตัวอย่างหรือการจำลองของซอฟต์แวร์พล็อตเตอร์เพื่อตรวจหา:

  • การลากซ้ำสองรอบที่ไม่คาดคิด;
  • เส้นเชื่อมยาวที่ปากกายังแตะกระดาษผ่านพื้นที่ว่าง;
  • ส่วนเส้นเล็กที่ทำให้เกิดจุด;
  • การยกปากกามากเกินไป;
  • พาธนอกหน้า;
  • เส้นทางที่เริ่มในพื้นที่หมึกหนาแน่นและยังเปียก แล้วกลับมาก่อนหมึกแห้ง

ทดสอบที่ขนาดจริงสุดท้ายบนกระดาษราคาประหยัด พาธที่ดูเรียบเมื่อซูม 400% อาจเผยความสั่นจากกลไก หมึกกอง หรือช่องว่างเมื่อใช้ปากกาจริง ปรับความเร็ว ความสูงปากกา และแรงกดในการตั้งค่าพล็อตเตอร์ แทนการเปลี่ยนรูปทรง SVG ที่ดีเพื่อชดเชยเครื่อง

PerfectVector เหมาะกับส่วนใด และส่วนใดที่ไม่รองรับ

PerfectVector เป็นเครื่องมือแปลงเวกเตอร์แบบเส้นขอบ มีประโยชน์เมื่อภาพวาดที่สแกนต้องการรูปทรงเติมสีสะอาด ๆ สำหรับพิมพ์ ตัด หน้าระบายสี หรือแก้ไขต่อ แต่ไม่ได้เปลี่ยนรอยหมึกกว้างให้เป็นพาธกึ่งกลางเส้นเดียวที่พล็อตเตอร์ปากกาต้องการ

ขั้นตอนผสมที่ใช้ได้คือใช้ PerfectVector กู้ภาพเงาหรือพื้นที่เติมสีให้สะอาด แล้ววาดรอยปากกาจริงไม่กี่เส้นใหม่ด้วยเครื่องมือเส้นกึ่งกลาง หากภาพทั้งหมดประกอบด้วยรอยเส้น ให้ไปใช้การลากเส้นกึ่งกลางของ Inkscape โดยตรง หรือวาดตามเส้นโค้งสำคัญด้วยมือ สำหรับภาพร่างเล็กที่สื่ออารมณ์ การวาดเองมักเร็วกว่าซ่อมเส้นกึ่งกลางอัตโนมัติที่ไม่ดี

คำถามที่พบบ่อย

ทำไมพล็อตเตอร์ปากกาจึงวาดทุกเส้นสองครั้ง? การลากเส้นเวกเตอร์ทั่วไปตามขอบทั้งสองด้านของรอยสีเข้มแต่ละเส้น ทำให้เกิดรูปทรงปิดบาง ๆ พล็อตเตอร์จึงตามพาธขอบทั้งสอง ใช้การลากเส้นกึ่งกลางและตรวจผลลัพธ์เป็นพาธเปล่า แทนการดูเฉพาะตัวอย่างเติมสี

SVG เส้นเดี่ยวหมายความว่าภาพทั้งหมดเป็นพาธเดียวหรือไม่? ไม่ใช่ โดยทั่วไปหมายถึงรอยเส้นที่มองเห็นแต่ละรอยแทนด้วยพาธกึ่งกลางหนึ่งเส้นแทนเส้นขอบสองด้าน รายละเอียดที่ไม่เชื่อมกันคงเป็นพาธแยกและต้องยกปากกาได้ การบังคับรวมเป็นพาธเดียวอาจสร้างเส้นเชื่อมที่ไม่ต้องการ

Inkscape แปลงภาพวาดเป็นเส้นกึ่งกลางได้ไหม? ได้ ใน Inkscape เวอร์ชันปัจจุบัน Trace Bitmap มีโหมด Centerline tracing สำหรับลายมือและภาพลายเส้น ผลลัพธ์ยังต้องตรวจ เพราะจุดตัด รอยจาง และความกว้างเส้นที่ต่างกันอาจสร้างแขนงผิดหรือช่องว่าง

SVG เส้นเดี่ยวควรมีสีเติมหรือไม่? โดยปกติไม่ควร กำหนดเส้นขอบให้มองเห็นได้และตั้งสีเติมเป็นไม่มี เพื่อให้ตรวจเส้นทางที่ปากกาจะลากได้ ความกว้างเส้นจริงมาจากหัวปากกาและการตั้งค่าพล็อตเตอร์ ไม่ได้มาจากความกว้างเส้นที่ SVG แสดงเพียงอย่างเดียว

PerfectVector สร้าง SVG เส้นเดี่ยวสำหรับพล็อตเตอร์ปากกาได้ไหม? ไม่ได้โดยตรง PerfectVector สร้างพาธเส้นขอบสะอาดที่เหมาะกับกราฟิกเติมสี การพิมพ์ และการตัดรูปทรง หากต้องการพาธเดียวผ่านกึ่งกลางรอยเส้นแต่ละเส้น ให้ใช้เครื่องมือลากเส้นกึ่งกลางหรือวาดพาธใหม่ด้วยมือ

แหล่งอ้างอิง

  1. คู่มือสำหรับผู้เริ่มต้น Inkscape — การลากเส้นจากภาพ — โหมดลากเส้นกึ่งกลางสำหรับลายมือและภาพลายเส้น
  2. เอกสารอ้างอิง Python API ของ AxiDraw — การพล็อตพาธ SVG ตามค่าเริ่มต้นและการจัดการลักษณะสีเติมกับเส้นขอบ
  3. เอกสารอ้างอิง CLI ของ AxiDraw — ลำดับและทิศทางพาธ การดูตัวอย่าง และการลดระยะเคลื่อนที่ขณะยกปากกา
  4. W3C — พาธ SVG — พาธเปิด พาธย่อย ปลายเส้น และรูปทรงพาธ

หากงานบางส่วนต้องการรูปทรงเวกเตอร์เติมสีที่สะอาดก่อนสร้างพาธสำหรับพล็อตเตอร์ ให้ ลากเส้นจากภาพราสเตอร์นั้นด้วย PerfectVector แล้วตรวจเส้นขอบ สำหรับรอยที่ปากกาต้องลากเพียงครั้งเดียว ให้จบงานด้วยการลากเส้นกึ่งกลางและทดสอบบนกระดาษจริง

เพิ่มเติมจากบล็อก

เปลี่ยนรูปภาพของคุณเป็น
SVG ที่แก้ไขได้