แฟล็กส่วนโค้ง SVG: วาดโค้งให้ถูกด้วยคำสั่ง A

แฟล็กสองตัวในคำสั่ง A ของ SVG เลือกว่า ส่วนโค้งใด เชื่อมจุดเริ่มกับปลาย ตั้ง large-arc-flag เป็น 0 สำหรับทางสั้นหรือ 1 สำหรับทางยาว ตั้ง sweep-flag เป็น 0 หรือ 1 เพื่อเลือกทิศรอบวงรี คงจุดปลายและรัศมี เปลี่ยนเฉพาะเลขสองตัว ก็เห็นทั้งสี่ทางเลือกได้ ข้อกำหนดพาธ SVG 2 นิยามการเลือกสี่ส่วนโค้งนี้

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

อ่านเจ็ดค่าหลัง A

คำสั่งส่วนโค้งสัมบูรณ์มีลำดับนี้:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx และ ry เป็นรัศมีวงรี x-axis-rotation หมุนวงรีในระบบพิกัดปัจจุบัน แฟล็กสองตัวแต่ละตัวเป็น 0 หรือ 1 สุดท้าย x y เป็นจุดปลาย จุดเริ่มคือจุดปัจจุบันจากคำสั่งก่อน มักเป็น M x y ส่วน a ตัวพิมพ์เล็กใช้จุดปลายสัมพัทธ์แทนสัมบูรณ์ บทสอนพาธของ MDN อธิบายรูปแบบคำสั่ง

เช่น M70 370 A140 110 0 0 1 280 420 เริ่ม (70, 370) ใช้รัศมี 140 และ 110 ไม่หมุนวงรี เลือกทางสั้นด้วย sweep 1 และจบ (280, 420) ตัวเลขอยู่ในระบบพิกัดผู้ใช้ SVG ไม่ได้รับประกันขนาดพิมพ์จริงโดยอัตโนมัติ

ดูสี่ส่วนโค้งที่เป็นไปได้

เราเรนเดอร์ตัวอย่างต้นฉบับนี้จาก SVG ไฟล์เดียว ทุกแผงใช้จุดเริ่ม (70, 370) จุดปลาย (280, 420) รัศมี 140 110 และมุมหมุน 0 เหมือนกัน เปลี่ยนเฉพาะแฟล็ก สีส้มระบุจุดเริ่ม สีเขียวจุดปลาย นี่เป็นภาพเรนเดอร์แบบเบราว์เซอร์ของคำสั่งพาธเราเอง ไม่ใช่ผลแปลง PerfectVector

คำว่า “เหนือ” และ “ใต้” อธิบายจุดเริ่ม จุดปลาย และพิกัด ชุดนี้ ไม่ใช่ความหมายสากลของ 0 และ 1 ตำแหน่งปลายต่างหรือกลุ่มที่มี transform อาจย้ายโค้งที่เห็นไปที่อื่น แฟล็ก sweep เลือกทิศมุมเพิ่มหรือลดตามวงรีที่เลือก ใน viewBox SVG ปกติที่แกน y ชี้ลง sweep 1 มักดูตามเข็มนาฬิกา ตัวแก้ส่วนโค้งโต้ตอบของ SVG Tutorial ช่วยดูการเปลี่ยนทิศโดยคงค่าที่ป้อนอื่น ๆ

หากต้องการทำหนึ่งแผงซ้ำ บันทึกเป็น arc.svg แล้วเปิดในเบราว์เซอร์:

<svg xmlns="http://www.w3.org/2000/svg"
     width="380" height="600" viewBox="0 0 380 600">
  <path d="M70 370 A140 110 0 0 1 280 420"
        fill="none" stroke="#1b64d8"
        stroke-width="12" stroke-linecap="round" />
  <circle cx="70" cy="370" r="9" fill="#ff704e" />
  <circle cx="280" cy="420" r="9" fill="#0c8078" />
</svg>

เปลี่ยนเฉพาะเลขสองตัวหลังมุมหมุน 0 ตามตาราง หากเปลี่ยนรัศมีหรือจุดปลายพร้อมกัน จะบอกไม่ได้ว่าการแก้ใดเปลี่ยนทาง

แก้เส้นโค้งที่ไปผิดทาง

1. หาช่วงนั้น ในค่า d ของพาธ ระบุจุดเริ่มก่อนหน้า คำสั่ง A และจุดปลาย พาธอาจมีหลายช่วงส่วนโค้ง แก้เฉพาะช่วงผิด
2. ตรวจการเลือกยาวกับสั้น หากโค้งเล็กวนรอบวงรีเกือบทั้งหมด ให้เปลี่ยน large-arc-flag จาก 1 เป็น 0 หากช่วงวงที่ตั้งใจหดเป็นตัวเชื่อมสั้น ลอง 1
3. ตรวจด้านหรือทิศเดินทาง คงทุกอย่างแล้วสลับ sweep-flag มักย้ายโค้งไปอีกด้านของคอร์ดระหว่างจุดปลาย
4. ตรวจภาพทั้งหมด ช่วงที่แก้แล้วอาจยังต่อกับช่วงข้างเคียงด้วยมุมไม่เหมาะหรือเลย viewBox เปิดที่ขนาดแสดงที่ตั้งใจ แล้วปรับเรขาคณิตข้างเคียงหรือพื้นที่วาดตามจำเป็น

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

การหมุนและข้อจำกัดรัศมี

x-axis-rotation สำคัญเมื่อ rx กับ ry ต่างกัน เพราะหมุนวงรีก่อนเลือกส่วนโค้ง เมื่อรัศมีเท่ากัน การหมุนวงกลมไม่เปลี่ยนเส้นรอบนอก สำหรับโลโก้ขอบวงรีเอียง ให้ลองรัศมีและมุมที่ตั้งใจก่อน แล้วเลือกแฟล็ก มิฉะนั้นอาจเลือกด้านถูกของวงรีผิด

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

ใช้โค้งไล่เส้นเป็นจุดเริ่ม ไม่ใช่สูตรส่วนโค้ง

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

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

การแบ่งงานสำคัญ: PerfectVector ช่วยสร้างพาธจากราสเตอร์ล้วน ส่วนตั้งพารามิเตอร์โค้งแม่นยำและตรวจรอยต่อยังเป็นการตัดสินใจออกแบบ อย่าแปลง SVG สะอาดเป็น PNG แล้วไล่เส้นใหม่เพียงเพื่อเปลี่ยนแฟล็ก

ก่อนส่ง SVG

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

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

แฟล็ก large-arc กับ sweep ใน SVG หมายถึงอะไร? large-arc เลือกส่วนโค้งตัวเลือกสั้นหรือยาวระหว่างจุดปลายสองจุด sweep เลือกทิศเดินรอบวงรี ทั้งคู่เลือกหนึ่งในสี่ตัวเลือกเมื่อเรขาคณิตไม่อยู่ในกรณีเสื่อม

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

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

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

1. W3C — พาธ SVG 2 — ไวยากรณ์ส่วนโค้ง ชุดแฟล็ก และเรขาคณิตพาธ
2. W3C — หมายเหตุการนำ SVG 2 ไปใช้ — การแก้รัศมีและจัดการส่วนโค้งกรณีเสื่อม
3. MDN — พาธ SVG — คำสั่งพาธสัมบูรณ์และสัมพัทธ์ กับบทสอนส่วนโค้ง
4. SVG Tutorial — ส่วนโค้ง — การสาธิตโต้ตอบรัศมี มุมหมุน และแฟล็ก
5. NaN — คำสั่งพาธ SVG: ส่วนโค้ง — คำอธิบายโต้ตอบการเลือกวงรีและผลแฟล็ก

ต้องมีต้นทางแก้ได้ก่อนปรับตราราสเตอร์ล้วนใช่ไหม? แปลงภาพเป็นพาธเวกเตอร์ ตรวจผล แล้ววาดส่วนโค้งที่รัศมีหรือ sweep ต้องแม่นยำใหม่