PerfectVector
โดย Irene Kim

แปลง PNG เป็น SVG เส้นกึ่งกลางด้วย AutoTrace

เรียกใช้คำสั่งเส้นกึ่งกลางของ AutoTrace บน PNG บันทึก SVG และตรวจสอบแอตทริบิวต์เส้นขีด คุณลักษณะการเติม และเส้นทางย่อยที่เปิดอยู่ ก่อนที่จะถือว่าภาพวาดเป็นเส้นทางเดียวที่ต่อเนื่องกัน

อ่าน 3 นาที
ในหน้านี้

หากต้องการแปลง PNG เป็น SVG เส้นกึ่งกลางด้วย AutoTrace CLI แบบสแตนด์อโลน ให้เพิ่ม --centerline ขอเอาต์พุต SVG และตั้งชื่อไฟล์ที่บันทึก จากนั้นตรวจสอบเรขาคณิต การควบคุม AutoTrace 0.40.0 ของเราสร้างเส้นทางที่วาดด้วยเส้นขีด SVG และไม่มีการเติมสี แต่องค์ประกอบเส้นทางนั้นมีสองเส้นทางย่อยที่เปิดแยกกัน องค์ประกอบเส้นทาง SVG จำนวนเล็กน้อยไม่ได้พิสูจน์ว่าเส้นทางการวาดมีความต่อเนื่อง

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

ลองกับรูปภาพของคุณเอง
เปิดเครื่องมือฉบับเต็ม
ลองใช้ฟรี วางรูปภาพเพื่อดูตัวอย่างเวกเตอร์ของคุณได้เลย ไม่ต้องสมัครสมาชิก

ยืนยันว่าคุณกำลังใช้ AutoTrace CLI แบบสแตนด์อโลน

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

คุณต้องมีไฟล์ปฏิบัติการ AutoTrace ที่ติดตั้งไว้ เทอร์มินัล PNG ที่ได้รับอนุญาต และโปรแกรมดู SVG หรือโปรแกรมแก้ไขข้อความธรรมดา วางสำเนาการทำงานชื่อ line-control.png ลงในโฟลเดอร์แยกต่างหากและเก็บต้นฉบับไว้ ข้อมูลอ้างอิงในการทดสอบของเราคือ 160 × 120 RGB PNG ที่สร้างขึ้นโดยเฉพาะ: ก้านแนวตั้งสีดำหนาพร้อมแถบด้านขวาสองแถบบนพื้นหลังสีขาวทึบ

ตรวจสอบบิลด์ที่ติดตั้งของคุณก่อนที่จะติดตาม:

autotrace --version
autotrace --help
autotrace --list-input-formats
autotrace --list-output-formats

เวอร์ชันของเราส่งคืน AutoTrace version 0.40.0. รายการรูปแบบประกอบด้วยอินพุต PNG และเอาต์พุต SVG โปรเจ็กต์ตั้งข้อสังเกตว่าการรองรับรูปแบบขึ้นอยู่กับบิลด์ หาก PNG หายไปจากรายการอินพุตจริงของคุณ ให้แก้ไขการรองรับอินพุตของบิลด์นั้นก่อนที่จะคัดลอกคำสั่งการแปลง

1. บันทึก SVG อ้างอิงที่ติดตามโครงร่าง

ขั้นแรกให้บันทึกการติดตามธรรมดาภายใต้ชื่อไฟล์ของตัวเอง:

autotrace --background-color FFFFFF \
  --output-format svg --output-file outline.svg line-control.png

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

outline.svg จริงมีเส้นทางปิดหนึ่งเส้นทางที่มี fill:#000000; stroke:none;. มันอธิบายขอบเขตของบริเวณสีดำหนา สำหรับคำอธิบายที่กว้างขึ้นเกี่ยวกับภาพลายเส้นแบบลากเส้นที่แสดงด้วยรูปร่างที่เต็มไปด้วยสี โปรดดูที่ ภาพลายเส้นเป็น SVG

2. เพิ่มเส้นกึ่งกลางและบันทึก SVG แยกต่างหาก

เรียกใช้แหล่งเดียวกันด้วยตัวเลือกเส้นกึ่งกลางและชื่อไฟล์เอาต์พุตใหม่:

autotrace --background-color FFFFFF \
  --output-format svg --output-file centerline.svg \
  --centerline line-control.png

โครงการอย่างเป็นทางการและคู่มือจะแยกแยะการติดตามเส้นกึ่งกลางจากการติดตามโครงร่าง centerline.svg ที่บันทึกไว้ของเรามี stroke:#000000; fill:none; มีองค์ประกอบเส้นทางเดียวและไม่มีองค์ประกอบรูปภาพ รูปทรงเรขาคณิตของมันเป็นไปตามเส้นทางบางๆ ผ่านบริเวณหนาของแหล่งกำเนิด แทนที่จะเติมเต็มรูปร่างขอบเขต

นอกจากนี้เรายังทดสอบแหล่งข้อมูลเดียวกันโดยไม่มีตัวเลือกพื้นหลังสีขาวที่ชัดเจน:

autotrace --centerline --output-format svg \
  --output-file centerline-background-retained.svg line-control.png

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

3. ตรวจสอบเส้นทางที่บันทึกไว้ ไม่ใช่แค่จำนวนเส้นทาง

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

ไฟล์ที่บันทึกไว้องค์ประกอบเส้นทางทาสีและปิดมันสร้างอะไรขึ้นมา
outline.svgหนึ่งเติมสีดำไม่มีจังหวะ เส้นทางย่อยปิดหนึ่งเส้นทางร่องรอยขอบเขตที่เต็มไปด้วยสามัญ
centerline.svgหนึ่งจังหวะสีดำไม่มีการเติม สองเส้นทางย่อยที่เปิดอยู่เรขาคณิตเส้นกึ่งกลางที่มีช่องว่างในเส้นทางการวาด
centerline-background-retained.svgหนึ่งไบต์เดียวกันกับไฟล์เส้นกึ่งกลางการละเว้นตัวเลือกพื้นหลังไม่ได้สร้างความแตกต่างที่นี่

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

M30 30L30 75
C30 80.0707 28.3961 88.5616 31.6034 92.8519
C35.7319 98.3743 47.9272 96 54 96L117 96
M31 56L87 56

เส้นทางแรกเริ่มต้นตามก้านแนวตั้งที่ x = 30 เส้นทางที่สองเริ่มต้นที่ x = 31, y = 56 จุดเริ่มต้นที่แยกจากกันนั้นไม่ใช่หลักฐานของสาขาที่เชื่อมต่อกัน แม้แต่อินพุตแบบธรรมดานี้ก็ยังต้องมีการตรวจสอบจุดสิ้นสุดก่อนใครจะถือว่ามันเป็นเส้นทางต่อเนื่อง

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

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

กู้คืนจากการตรวจสอบที่ล้มเหลว

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

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

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

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

คำสั่ง AutoTrace สำหรับ PNG เส้นกึ่งกลางถึง SVG คืออะไร

ใช้autotraceกับ --centerline, --output-format svg, ปลายทาง --output-file และอินพุต PNG ตรวจสอบเวอร์ชันที่ติดตั้งและรูปแบบอินพุตที่รองรับก่อน จากนั้นตรวจสอบจังหวะ การเติม และเส้นทางของ SVG ที่บันทึกไว้

เส้นทาง SVG หนึ่งเส้นทางเป็นเส้นกึ่งกลางต่อเนื่องกันเสมอหรือไม่

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

จำเป็นต้องใช้ตัวเลือกพื้นหลังสีขาวหรือไม่

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

PerfectVector สามารถสร้างเอาต์พุตเส้นกึ่งกลางเดียวกันได้หรือไม่

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

แหล่งที่มา

  1. โครงการ AutoTrace อย่างเป็นทางการ — CLI แบบสแตนด์อโลน การสนับสนุนแบบกึ่งกลาง การใช้งาน และรูปแบบอินพุตที่ขึ้นอยู่กับบิวด์
  2. คู่มือคำสั่ง AutoTrace — ตัวเลือกเส้นกึ่งกลาง พื้นหลัง ไฟล์เอาต์พุต และรูปแบบเอาต์พุต
  3. ข้อกำหนดเส้นทาง W3C SVG — เส้นทางย่อย คำสั่ง moveto และการปิด
  4. AutoTracer.org — บริการเบราว์เซอร์แยกต่างหากที่แตกต่างจาก CLI ที่ติดตั้ง

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

PerfectVector

เปลี่ยนรูปภาพเป็น
เส้นพาธเวกเตอร์ที่เรียบร้อยและแก้ไขได้

แปลงเวกเตอร์และตรวจดูพรีวิวได้ฟรี ไม่จำกัดจำนวนครั้งต่อวัน