นำเข้า SVG ใน PixiJS: เลือก Graphics หรือเท็กซ์เจอร์

PixiJS ใช้ SVG ได้สองแบบ: Graphics.svg() แยกวิเคราะห์รูปทรงการวาดที่รองรับ ส่วนการโหลด SVG เป็นเท็กซ์เจอร์ให้พิกเซลแก่ Sprite เพื่อแสดงผล เลือกรูปทรงเมื่องานภาพต้องปรับมาตราส่วนมาก และเลือกเท็กซ์เจอร์เมื่อภาพราสเตอร์ที่ตรงกับขนาดแสดงที่ตั้งใจไว้เหมาะกับไฟล์นั้น PixiJS อธิบายทั้งสองวิธีใน คู่มือ SVG

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

ตัดสินใจว่าฉากต้องการอะไร

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

ทดสอบเส้นโค้ง ช่องเปิด และการแปลง

ตัวอย่างนี้ใช้ PixiJS 8.21.0, SVG ขนาด 96 × 96, ความละเอียดตัวเรนเดอร์ 1 และเท็กซ์เจอร์ SVG ที่โหลดด้วยความละเอียด 1 เวอร์ชันเล็กวาดตามขนาดเดิม ส่วนเวอร์ชันใหญ่ใช้มาตราส่วน 3 ตราสัญลักษณ์ที่เราสร้างมีพาธสองสีและกลุ่มที่เลื่อนแปดหน่วย SVG ในแต่ละทิศ เส้นรอบรูปภายในวนตรงข้ามกับเส้นรอบรูปภายนอกเพื่อสร้างช่องเปิด

SVG ต้นฉบับเดียวกันผ่านตัวเรนเดอร์สามแบบ

พื้นตารางหมากรุกมองเห็นผ่านช่องเปิดในทั้งสามคอลัมน์ มันเป็นพื้นหลังอยู่หลังงานภาพ ไม่ใช่รูปทรงสีขาวที่วาดในช่องเปิด การเยื้องในคอลัมน์กลางมองเห็นได้ทั้งสองขนาด: แปดหน่วยที่มาตราส่วนเดิมกลายเป็น 24 พิกเซลแสดงผลที่มาตราส่วน 3

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

บันทึกต้นฉบับ SVG

บันทึกเป็น emblem.svg ไว้ข้างหน้าเว็บ งานนี้วาดขึ้นเองสำหรับการเปรียบเทียบ ไม่ใช่ผลแปลงเป็นเวกเตอร์

<svg xmlns="http://www.w3.org/2000/svg"
     width="96" height="96" viewBox="0 0 96 96">
  <g transform="translate(8 8)">
    <path fill="#145c61" d="M40 0
      C62 0 80 18 80 40 C80 62 62 80 40 80
      C18 80 0 62 0 40 C0 18 18 0 40 0 Z
      M40 20 C29 20 20 29 20 40 C20 51 29 60 40 60
      C51 60 60 51 60 40 C60 29 51 20 40 20 Z"/>
    <path fill="#e68546"
      d="M62 5 C74 9 80 21 78 34 L61 32
         C63 23 61 15 55 10 Z"/>
  </g>
</svg>

รันทั้งสองวิธี

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

<script type="module">
import { Application, Assets, Graphics, Sprite }
  from 'https://cdn.jsdelivr.net/npm/pixi.js@8.21.0/dist/pixi.mjs';
 
const app = new Application();
await app.init({
  width: 640, height: 420, resolution: 1,
  antialias: true, background: '#e7eeea', preference: 'webgl'
});
document.body.append(app.canvas);
 
const response = await fetch('emblem.svg');
if (!response.ok) throw new Error('SVG request failed');
const svgText = await response.text();
const texture = await Assets.load({
  src: 'emblem.svg', data: { resolution: 1 }
});
 
for (const [scale, y] of [[1, 12], [3, 120]]) {
  const geometry = new Graphics().svg(svgText);
  geometry.scale.set(scale);
  geometry.position.set(16, y);
  const sprite = new Sprite(texture);
  sprite.scale.set(scale);
  sprite.position.set(336, y);
  app.stage.addChild(geometry, sprite);
}
</script>

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

แก้ความต่างที่คุณเห็นจริง

รูปทรงเลื่อนตำแหน่ง

ในการทดสอบนี้ Graphics.svg() ไม่ได้ใช้ translate(8 8) ที่ครอบอยู่ การทำงานของตัวแยกวิเคราะห์ SVG รุ่นที่ล็อกไว้ มีประโยชน์ในการตรวจพฤติกรรมเวอร์ชันที่ใช้ในโปรเจกต์

สำหรับไฟล์นี้โดยเฉพาะ การแทนบรรทัดกำหนดตำแหน่งรูปทรงด้วยโค้ดต่อไปนี้ชดเชยการเลื่อนหนึ่งรายการที่รู้ว่าหายไปได้:

geometry.position.set(16 + 8 * scale, y + 8 * scale);

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

เท็กซ์เจอร์ที่ขยายไม่คมชัด

เท็กซ์เจอร์ SVG ในภาพมี 96 × 96 พิกเซล การปรับมาตราส่วนสไปรต์เป็น 288 × 288 ไม่ได้อ่านเส้นโค้งต้นฉบับใหม่ หากต้องการเตรียมพิกเซลเพิ่ม ให้โหลดเท็กซ์เจอร์แยกด้วยความละเอียดสูงกว่า:

const largeTexture = await Assets.load({
  src: 'emblem.svg?resolution=3',
  data: { resolution: 3 }
});

ในบิลด์ที่ทดสอบ วิธีนี้สร้างต้นทาง 288 × 288 พิกเซลที่มีขนาดเชิงตรรกะของเท็กซ์เจอร์ 96 × 96 และความละเอียดต้นทาง 3 ใช้ largeTexture เมื่อสร้างสไปรต์ สตริงคิวรีทำให้การทดลองนี้มีคีย์แคชต่างออกไป โดยเซิร์ฟเวอร์ต้องส่ง SVG เดียวกันสำหรับ URL นั้น คู่มือ Assets ของ Pixi อธิบายการแคชตาม URL และ คู่มือเท็กซ์เจอร์ แยกเท็กซ์เจอร์ออกจากต้นทางของมัน

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

รายละเอียดหายไป

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

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

เตรียมต้นฉบับก่อนนำเข้า

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

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

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

ตรวจไอคอนที่ส่งมอบ

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

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

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

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

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

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

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

1. คู่มือ SVG ของ PixiJS — อธิบายวิธีนำเข้าเท็กซ์เจอร์กับรูปทรงและความละเอียดเท็กซ์เจอร์
2. คู่มือ Graphics ของ PixiJS — อธิบายการใช้ GraphicsContext ร่วมกันและขอบเขตการรองรับ SVG
3. คู่มือ Assets ของ PixiJS — อธิบายการโหลดไฟล์และการแคชตาม URL
4. คู่มือเท็กซ์เจอร์ของ PixiJS — อธิบายความสัมพันธ์ระหว่างเท็กซ์เจอร์กับต้นทาง
5. ตัวแยกวิเคราะห์ SVG ของ PixiJS 8.21.0 — ให้การทำงานที่ล็อกเวอร์ชันไว้สำหรับสืบหาความต่างการนำเข้า