เส้นประ SVG สำหรับเลเซอร์: ตรวจพาธก่อนตัด

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

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

เส้นประยังอาจเป็นพาธต่อเนื่องเส้นเดียว

Scalable Vector Graphics (SVG) เก็บรูปทรงและพาธ พาธ อธิบายรูปทรง ส่วน เส้น ระบายตามรูปทรงนั้น เส้นกลาง คือทางผ่านกลางรอย ส่วนเส้นประที่แปลงเป็นรูปขอบมีขอบเขตปิดล้อมความกว้างของรอย

ข้อกำหนดการระบาย SVG นิยาม stroke-dasharray เป็นช่วงความยาวที่ระบายและไม่ระบายสลับกันตามพาธ การเพิ่ม stroke-dasharray="8 4" เปลี่ยนรูปลักษณ์เส้น ไม่ได้เขียนข้อมูล d ของพาธใหม่เป็นชิ้นแยก

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

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

เปรียบเทียบสองภาพที่เหมือนกันแต่รูปทรงต่างกัน

SVG ที่สร้างเหล่านี้ใช้หน้ากว้าง 100 mm สูง 20 mm พร้อม viewBox="0 0 100 20" ในการแมปนี้ หน่วยผู้ใช้หนึ่งหน่วยเท่ากับหนึ่งมิลลิเมตร เส้นจาก x=10 ถึง x=90 มีช่วงยาว 80 mm เส้นกว้าง 2 หน่วยด้านล่างทำให้เห็นการเปรียบเทียบ ไม่ใช่ค่าเลเซอร์หรือความกว้างตัดที่แนะนำ

ก่อนอื่นบันทึกเป็น painted-dashes.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="100mm" height="20mm" viewBox="0 0 100 20">
  <path d="M10 10 H90" fill="none" stroke="#0f766e"
        stroke-width="2" stroke-linecap="butt"
        stroke-dasharray="8 4" />
</svg>

ไฟล์ระบายขีดยาว 8 mm เจ็ดขีด คั่นด้วยช่อง 4 mm หกช่อง พาธที่เก็บยังเป็น M10 10 H90 คือเส้นต่อเนื่อง 80 mm เส้นเดียว

จากนั้นบันทึก separate-segments.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="100mm" height="20mm" viewBox="0 0 100 20">
  <g fill="none" stroke="#0f766e"
     stroke-width="2" stroke-linecap="butt">
    <path d="M10 10 H18" />
    <path d="M22 10 H30" />
    <path d="M34 10 H42" />
    <path d="M46 10 H54" />
    <path d="M58 10 H66" />
    <path d="M70 10 H78" />
    <path d="M82 10 H90" />
  </g>
</svg>

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

รูปทรง SVG ที่สร้างขึ้น

เราตรวจข้อมูลพาธที่บันทึกและใช้เมธอด getTotalLength() ของเบราว์เซอร์ตรวจรูปทรง พาธต่อเนื่องคืนค่า 80 หน่วยผู้ใช้ แต่ละท่อนแยกคืนค่า 8 รวม 56 MDN อธิบายเมธอดนี้ ว่าเป็นความยาวพาธในหน่วยผู้ใช้ที่เบราว์เซอร์คำนวณ นี่คือการวัดรูปทรง ไม่ใช่เวลางานที่วัดจริงหรือทางเดินเครื่องมือที่แอปเลเซอร์สร้าง

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

แก้สาเหตุให้ตรงกับไฟล์

ช่องว่างอยู่เฉพาะในสีเส้น

หากเอาสไตล์เส้นประออกแล้วเห็นทางต่อเนื่อง ให้เลือกว่าอยากให้ช่องอยู่ในไฟล์หรือในการตั้งค่างานเลเซอร์

สำหรับช่องที่เก็บใน SVG ให้ทำบนสำเนาไฟล์หลัก:

1. เอาเอฟเฟกต์เส้นประตกแต่งออกจากพาธที่กำลังสร้างใหม่
2. วาดหรือแบ่งทางเป็นท่อนเปิดที่จุดปลายขีดที่ต้องการ
3. ลบส่วนเชื่อมที่ควรเป็นช่อง สำหรับตัวอย่างเส้นตรง ให้ทำท่อน 8 mm ซ้ำพร้อมช่อง 4 mm
4. ตรวจด้วยเครื่องมือโหนด แต่ละขีดที่ต้องการควรมีเส้นกลางหนึ่งเส้นและจุดปลายสองจุด
5. บันทึก SVG ใหม่ เปิดซ้ำ และตรวจช่องอีกครั้ง ยืนยันขนาดจริงก่อนนำเข้าแอปเลเซอร์

สำหรับทางโค้ง ให้วางจุดขาดไปตามโค้ง ตัวเลข 8/4 นี้อธิบายตัวอย่างเส้นตรงหนึ่งแบบ ไม่ได้กำหนดรอยปรุที่เหมาะกับวัสดุของคุณ ตรวจท่อนปลายสั้น จุดโค้ง และรอยต่อรอบรูปปิดอีกครั้ง

แต่ละขีดกลายเป็นรูปขอบปิดเล็ก ๆ

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

เพื่อยกตัวอย่างความกว้างที่เห็น เรายังสร้างสี่เหลี่ยมปิดเจ็ดรูป แต่ละรูป 8 mm คูณ 2 mm พาธของหนึ่งรูปคือ:

<path d="M10 9 H18 V11 H10 Z" />

เส้นรอบรูปยาว 20 mm สี่เหลี่ยมแบบนี้เจ็ดรูปมีรูปทรงขอบปิดรวม 140 mm หากคำสั่งตามขอบเหล่านั้น ก็จะตามทั้งสองด้านยาวและปลาย รูปประกอบแสดงขอบเพื่อให้เห็นความต่าง การคำนวณนี้ไม่ได้ยืนยันว่าตัวนำเข้าที่ไม่เคยทดสอบจะจัดการรูปอย่างไร

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

ช่องควรถูกสร้างในงาน LightBurn

หากคุณควบคุมงาน LightBurn และต้องการระยะตัด/ข้ามที่ปรับได้ การเก็บทางต่อเนื่องอาจมีประโยชน์ เอกสาร Line Mode ปัจจุบัน ของ LightBurn อธิบาย Perforation Mode ที่มีระยะ Cut และ Skip แยกกัน ค่างานเหล่านี้กำหนดตำแหน่งเปิดและปิดลำแสงตามทาง

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

หากต้องส่งออกรูปทรงที่ได้จากค่าเหล่านั้น LightBurn ยังอธิบาย Generate Path From Cut ซึ่งสร้างพาธใหม่ที่รวมคุณสมบัติเช่นรอยปรุและเก็บอ็อบเจ็กต์เดิมไว้ แยกเวอร์ชันเดิมกับที่สร้างให้ชัด และแน่ใจว่างานสุดท้ายมีเฉพาะเวอร์ชันที่ต้องการ

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

แยกภาพที่กู้จากพาธรอยปรุ

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

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

ตรวจไฟล์ที่บันทึกและภาพตัวอย่างปลายทาง

ก่อนยอมรับ SVG ให้ตรวจไฟล์ส่งออกจริง:

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

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

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

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

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

LightBurn สร้างเส้นประแทนได้หรือไม่? LightBurn อธิบาย Perforation Mode พร้อมระยะ Cut และ Skip ตามทาง ตรวจภาพตัวอย่างและวัสดุ บทความนี้ตรวจรูปทรง SVG และไม่มีการทดสอบนำเข้า LightBurn หรือการตัดจริง

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

แหล่งข้อมูล

1. W3C — เส้นประ SVG — แยกรูปทรงพาธจากสีเส้น และนิยามความยาวขีดกับการจัดการปลาย
2. Ponoko — เส้นประและรูปลักษณ์อื่น — ให้คำแนะนำเส้นแยกเฉพาะผู้ผลิตและอธิบายผลแบบกล่องรูปขอบ
3. MDN — SVGGeometryElement.getTotalLength() — นิยามการวัดความยาวพาธที่เบราว์เซอร์คำนวณซึ่งใช้ในตัวอย่าง
4. LightBurn — Line Mode — อธิบายระยะ Cut และ Skip ของ Perforation Mode
5. LightBurn — Generate Path From Cut — อธิบายรูปทรงที่สร้างและการเก็บอ็อบเจ็กต์เดิม
6. PerfectVector — งาน SVG สำหรับตัดเลเซอร์ — อธิบายขั้นแปลงงานราสเตอร์ที่ใช้เชื่อมกับผลิตภัณฑ์เมื่อมีความจำเป็น

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