นำเข้า SVG ใน Konva: เลือกรูปภาพหรือพาธที่แก้ไขได้

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

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

เลือกรูปแบบแทนข้อมูลก่อนนำเข้า

บทเรียน Path ของ Konva รับข้อมูลพาธ SVG ผ่าน data ซึ่งคือค่าแอตทริบิวต์ d ของพาธ ไม่ใช่เอกสาร SVG ทั้งหมด การคัดลอกค่า d อย่างเดียวไม่ได้นำการแปลงของกลุ่มแม่ สีที่สืบทอด หรือพฤติกรรม viewBox ของ SVG มาด้วย

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

ตัวอย่างสองสีที่เห็นผลทดสอบ fill ชัดเจน

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

สี่เหลี่ยมชมพูด้านซ้ายเป็นหลักฐานที่มีประโยชน์: imageNode.fill() เปลี่ยนพื้นหลังรูปทรงภาพ ขณะที่พื้นที่เขียวและเหลืองทึบรักษาสีต้นฉบับ ด้านขวา paths[0].fill() เปลี่ยนเฉพาะพื้นที่แรก การทดสอบนี้ใช้รูปทรงที่เราสร้าง ไม่ใช่ผลแปลง PerfectVector

บันทึกต่อไปนี้เป็นไฟล์ HTML แล้วให้บริการผ่านเซิร์ฟเวอร์พัฒนาท้องถิ่น มันล็อก Konva 10.6.0 สร้าง stage สองตัวขนาด 320 × 240 และรอภาพ SVG ถอดรหัสก่อนวาด โค้ดเป็นการเปรียบเทียบเดียวกับที่ใช้จับภาพ

<div id="image-scene"></div>
<div id="path-scene"></div>
<script src="https://unpkg.com/konva@10.6.0/konva.min.js"></script>
<script type="module">
const parts = [
  { data: 'M20 80 C20 30 70 20 100 40 L100 140 C60 140 20 120 20 80 Z', fill: '#176b55' },
  { data: 'M100 40 C150 20 180 50 180 85 C180 120 145 140 100 140 Z', fill: '#e9b949' }
];
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">${parts.map(p => `<path d="${p.data}" fill="${p.fill}"/>`).join('')}</svg>`;
const source = new Image();
source.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
await source.decode();
 
function makeStage(container) {
  const stage = new Konva.Stage({ container, width: 320, height: 240 });
  const layer = new Konva.Layer();
  stage.add(layer);
  return { stage, layer };
}
const imageScene = makeStage('image-scene');
const pathScene = makeStage('path-scene');
const imageNode = new Konva.Image({
  image: source, x: 30, y: 16, width: 200, height: 160
});
imageScene.layer.add(imageNode);
const group = new Konva.Group({ x: 30, y: 16 });
const paths = parts.map(p => new Konva.Path(p));
group.add(...paths);
pathScene.layer.add(group);
 
// Compare the same fill request on the two representations.
imageNode.fill('#db567d');
paths[0].fill('#db567d');
 
// Resize both without changing their source geometry.
imageNode.scale({ x: 1.3, y: 1.3 });
group.scale({ x: 1.3, y: 1.3 });
imageScene.layer.draw();
pathScene.layer.draw();
 
const png = pathScene.stage.toDataURL({ pixelRatio: 2 });
const exported = new Image();
exported.src = png;
await exported.decode();
</script>

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

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

นำมากกว่าข้อมูลพาธเมื่องานภาพซับซ้อน

อาร์เรย์ parts ในตัวอย่างเป็นโมเดลชัดเจนสำหรับรูปทรงที่รู้โครงสร้างสองชิ้น ไม่ใช่ตัวนำเข้า SVG ก่อนใช้วิธีคล้ายกันกับงานส่งออก ให้ตรวจสิ่งที่สร้างรูปลักษณ์:

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

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

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

สำหรับงานที่ต้องการเพียงสีต้นฉบับต่างออกไป อีกวิธีคืออัปเดต SVG เองแล้วโหลดภาพใหม่ ผู้ดูแล Konva อธิบายกระบวนการนี้ใน react-konva issue 530 ใช้การแก้โครงสร้างที่เหมาะกับ SVG ที่รู้จัก แทนการแทน fill ทุกค่าโดยไม่แยกแยะจนสูญเสียความต่างสีที่ตั้งใจ

ถือการส่งออก canvas เป็นการส่งมอบราสเตอร์

ตัวอย่างเรียก pathScene.stage.toDataURL({ pixelRatio: 2 }) stage ขนาด 320 × 240 ให้ PNG ที่ถอดรหัสแล้วขนาด 640 × 480 การเพิ่ม pixelRatio เปลี่ยนขนาดพิกเซลส่งออก ไม่ได้เปลี่ยน PNG เป็น SVG ที่แก้ไขได้ เอกสารส่งออก Konva อธิบายการตั้งค่านี้

แยกสิ่งส่งมอบทั้งสามนี้:

1. SVG ต้นฉบับสำหรับแก้เวกเตอร์และเปรียบเทียบ
2. ข้อมูลฉากแอปพลิเคชัน รวมการอ้างอิงพาธหรือภาพและการแก้ที่แอปรองรับ
3. PNG หรือผลส่งออกราสเตอร์อื่นสำหรับการใช้งานที่ต้องการภาพเรนเดอร์

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

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

เมื่อใด PerfectVector จึงช่วยต้นฉบับได้

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

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

ตรวจการนำเข้าด้วยงานของคุณเอง

ก่อนเพิ่ม SVG ในโปรแกรมแก้ไขที่นำมาใช้ซ้ำ:

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

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

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

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

เพิ่ม pixelRatio แล้วส่งออกไฟล์เวกเตอร์หรือไม่? ไม่ ในตัวอย่างนี้ pixelRatio 2 ให้ PNG กว้างและสูงสองเท่าของ stage เก็บ SVG ต้นฉบับแยกไว้สำหรับแก้เวกเตอร์

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

1. Konva — SVG บน canvas — อธิบายตัวเลือก Image, Path และตัวเรนเดอร์ภายนอก รวมข้อจำกัดความเข้ากันได้เบราว์เซอร์
2. Konva — บทเรียน Path — อธิบายการสร้าง Path จากข้อมูลพาธ SVG และคุณสมบัติสีที่ระบุชัด
3. Konva — บทเรียน Image — แสดงการโหลดภาพและวางในฉาก Konva
4. Konva — ส่งออกภาพคุณภาพสูง — อธิบายการส่งออกราสเตอร์และผล pixelRatio ต่อขนาดเอาต์พุต
5. Konva — react-konva issue 530 — บันทึกวิธีแก้ต้นฉบับและโหลดใหม่ของผู้ดูแลเพื่อเปลี่ยนสีภาพ SVG

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