Konva SVG आयात: छवि या संपादन योग्य पाथ चुनें

जब पूरा SVG कैनवस पर रखना हो, तो Konva.Image इस्तेमाल करें। जब एप्लिकेशन को अलग पाथ आकार का रंग बदलना या उन्हें सँभालना हो, तो अलग Konva.Path नोड इस्तेमाल करें। SVG छवि लोड करने से उसके अंदर हर एलिमेंट के लिए अपने आप Konva ऑब्जेक्ट नहीं बनता। Konva की SVG मार्गदर्शिका इन्हें अलग तरीके बताती है।

लोगो चुनने वाले या रचना बनाने वाले टूल के लिए एक छवि पर्याप्त हो सकती है। दो रंग वाले बैज में जब क्षेत्रों के अलग नियंत्रण चाहिए, तो ऑब्जेक्ट संरचना ज़रूरी है। लोडर चुनने से पहले तय करें कि उपयोगकर्ता को क्या संपादित करना है और कैनवस दृश्य के साथ SVG स्रोत रखें।

आयात से पहले प्रस्तुति का रूप चुनें

Konva का Path ट्यूटोरियल data के ज़रिए SVG पाथ डेटा स्वीकार करता है। यह पाथ के d एट्रिब्यूट का मान है, पूरा SVG दस्तावेज़ नहीं। केवल d मान कॉपी करने से पैरेंट समूह का ट्रांसफ़ॉर्म, पैरेंट से मिला रंग या SVG का viewBox व्यवहार साथ नहीं आता।

स्रोत फ़ाइल का अलग प्रश्न भी है: क्या SVG में पाथ हैं भी? जब चित्र SVG में लिपटा बिटमैप हो, तो एम्बेडेड रास्टर जाँच मार्गदर्शिका इस्तेमाल करें। मान्य पाथ आधारित SVG भी Konva में एक छवि नोड बन सकता है; इससे स्रोत फ़ाइल नकली वेक्टर नहीं हो जाती।

दिखाई देने वाली भरण जाँच वाला दो रंग का उदाहरण

नीचे मूल चिह्न में स्पष्ट भरण वाले दो हाथ से लिखे पाथ हैं। बायाँ कैनवस दोनों को एक छवि की तरह लोड करता है। दायाँ उसी ज्यामिति से दो Path नोड बनाता है। दोनों को गुलाबी भरण का अनुरोध और 1.3 का पैमाना मिलता है।

बाईं ओर गुलाबी आयत उपयोगी प्रमाण है: imageNode.fill() छवि आकार की पृष्ठभूमि बदलता है, जबकि अपारदर्शी हरे और पीले क्षेत्र अपने स्रोत रंग रखते हैं। दाईं ओर paths[0].fill() केवल पहला क्षेत्र बदलता है। यह परीक्षण मूल ज्यामिति इस्तेमाल करता है, PerfectVector रूपांतरण परिणाम नहीं।

नीचे की सामग्री HTML फ़ाइल में सहेजें और स्थानीय विकास सर्वर से उपलब्ध करें। यह Konva के संस्करण को 10.6.0 पर निश्चित रखती है, दो 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 ट्यूटोरियल सामान्य छवि लोडिंग कार्यप्रवाह दिखाता है। SVG URL को छवि की तरह लोड करें, उसके लोड होने का इंतज़ार करें, फिर उसे Konva.Image को दें। SVG मार्कअप रेंडर करने वाला React कंपोनेंट उस छवि ऑब्जेक्ट से अलग मान है जिसे कैनवस अपेक्षित करता है।

जटिल चित्र में पाथ डेटा से अधिक साथ लाएँ

उदाहरण का parts ऐरे दो ज्ञात आकार का स्पष्ट मॉडल है। यह SVG आयातक नहीं। निर्यात किए चित्र पर ऐसा तरीका अपनाने से पहले देखें कि उसका रूप किससे बनता है:

• समूह ट्रांसफ़ॉर्म सभी चाइल्ड को खिसका, घुमा या स्केल कर सकता है। वह संबंध सुरक्षित रखें या सोच-समझकर ट्रांसफ़ॉर्म को ज्यामिति में लागू करें।
• रंग किसी पूर्वज या CSS नियम से आ सकता है। यह मानने के बजाय कि हर पाथ उन्हें घोषित करता है, इच्छित fill और stroke पता करें।
• ग्रेडिएंट, क्लिपिंग, मास्क और फ़िल्टर की अपनी परिभाषाएँ और संदर्भ हैं। कॉपी की गई d स्ट्रिंग वे प्रभाव दोबारा नहीं बनाती।
• टेक्स्ट और बुनियादी आकारों को अलग सँभालना पड़ सकता है। यह न मानें कि हर दिखाई देने वाला ऑब्जेक्ट पहले से पाथ है।

परीक्षण करते समय पुनर्निर्माण के पास मूल की रेंडरिंग रखें। एक पहचानने योग्य क्षेत्र से शुरू करें, उसकी स्थिति और रंग मिलाएँ, फिर बाकी आकार जोड़ें। जब ऑब्जेक्ट संरचना में काम कठिन हो, तो SVG संपादन मार्गदर्शिका स्रोत सफ़ाई बताती है।

यदि अलग पाथ नियंत्रण आवश्यक नहीं, तो पूरा SVG छवि के रूप में लोड करने से पुनर्निर्माण बच सकता है। Konva canvg जैसी बाहरी लाइब्रेरी से SVG रेंडर करके बने कैनवस को Konva.Image में रखने का तरीका भी बताता है। वह अभी भी छवि प्रस्तुति है; इससे उपयोगकर्ता को हर स्रोत पाथ का अलग Konva नोड नहीं मिलता। दस्तावेज़ के विकल्प देखें।

जिस चित्र में केवल अलग स्रोत रंग चाहिए, उसमें दूसरा तरीका खुद SVG अपडेट करना और उसकी छवि दोबारा लोड करना है। Konva का रखरखावकर्ता react-konva issue 530 में यह कार्यप्रवाह बताता है। हर fill अंधाधुंध बदलकर इच्छित रंग अंतर खोने के बजाय अपने ज्ञात SVG के अनुकूल संरचित संपादन करें।

कैनवस निर्यात को रास्टर डिलीवरी मानें

उदाहरण pathScene.stage.toDataURL({ pixelRatio: 2 }) बुलाता है। उसके 320 × 240 स्टेज से डिकोड हुआ 640 × 480 PNG बनता है। pixelRatio बढ़ाने से निर्यात के पिक्सेल आयाम बदलते हैं; इससे PNG संपादन योग्य SVG नहीं बनता। Konva का निर्यात दस्तावेज़ यह सेटिंग समझाता है।

इन तीन अंतिम फ़ाइलों को अलग रखें:

1. मूल SVG, वेक्टर संपादन और तुलना के लिए।
2. एप्लिकेशन का दृश्य डेटा, जिसमें पाथ या छवि संदर्भ और ऐप के समर्थित संपादन हों।
3. PNG या दूसरा रास्टर निर्यात, उन उपयोगों के लिए जिन्हें रेंडर की गई तस्वीर चाहिए।

निर्यात किया PNG दोबारा खोलें और उसके आयाम तथा छोटी बारीकियाँ देखें। एप्लिकेशन के समर्थित ब्राउज़र में SVG छवि भी जाँचें; Konva SVG मार्गदर्शिका रेंडरिंग संगतता अंतर बताती है। यह उदाहरण एक साधारण, स्वतंत्र SVG जाँचता है, इसलिए हर निर्यात फ़ाइल या प्रभाव का समर्थन सिद्ध नहीं करता।

केवल कैनवस पूर्वावलोकन से वेक्टर गुणवत्ता न आँकें। पिक्सेलेटेड SVG मार्गदर्शिका स्रोत ज्यामिति को रास्टर पूर्वावलोकन और प्रदर्शन आकार से अलग करती है।

PerfectVector स्रोत में कब मदद करता है

यदि शुरुआती एसेट केवल PNG या JPG मोटिफ है, तो Konva दृश्य बनाने से पहले PerfectVector संपादन योग्य SVG ज्यामिति पुनर्निर्मित करने में मदद कर सकता है। छवि को वेक्टर में बदलें, परिणाम संपादक में खोलें और ऐप में पाथ मैप करने से पहले बाहरी आकृति, खाली हिस्से और रंग क्षेत्र देखें।

वेक्टराइज़ेशन Konva दृश्य मॉडल या मनमाना SVG पार्सर नहीं बनाता। प्रस्तुति चुनना और उसकी आवश्यक विशेषताएँ साथ लाना अभी भी आपका काम है। यदि उपयोगी SVG मूल फ़ाइल पहले से है, तो उसी से काम करें। फ़ोटोग्राफ़ी या पेंट की बनावट जो पिक्सेल ही रहनी चाहिए, उसके लिए बिना ट्रेसिंग का छवि नोड अक्सर उपयुक्त है।

अपने चित्र से आयात जाँचें

दोबारा इस्तेमाल योग्य संपादक में SVG जोड़ने से पहले:

1. उपयोगकर्ता के आवश्यक नियंत्रणों के अनुसार एक पूरी छवि नोड या अलग आकार नोड चुनें।
2. एक क्षेत्र का रंग बदलें और सुनिश्चित करें कि केवल इच्छित ऑब्जेक्ट बदलता है।
3. पूरे डिज़ाइन का आकार बदलें और दूरी, स्ट्रोक रूप तथा क्लिपिंग देखें।
4. आवश्यक पिक्सेल आयामों पर निर्यात करें और रास्टर फ़ाइल दोबारा खोलें।
5. सहेजी SVG मूल फ़ाइल स्वतंत्र रूप से दोबारा खोलें ताकि कैनवस निर्यात कभी आपकी एकमात्र प्रति न बने।

अक्सर पूछे जाने वाले प्रश्न

क्या Konva.Image SVG के अंदर पाथ को संपादन योग्य बनाता है? नहीं। यह SVG को एक छवि नोड की तरह दिखाता है। अलग पाथ क्षेत्रों के नियंत्रण के लिए उपयुक्त पाथ डेटा से अलग Path नोड बनाएँ या दस्तावेज़ संरचना सुरक्षित रखने वाला SVG संपादन कार्यप्रवाह अपनाएँ।

fill मेरे SVG का रंग बदलने के बजाय आयत क्यों जोड़ता है? Image नोड पर fill उसकी छवि सामग्री के पीछे छवि आकार रंगता है। यह SVG के अंदर भरण नहीं बदलता। स्रोत SVG संपादित करके दोबारा लोड करें, या ऐप में अलग रंग नियंत्रण चाहिए हों तो अलग Path नोड इस्तेमाल करें।

क्या pixelRatio बढ़ाने से वेक्टर फ़ाइल निर्यात होती है? नहीं। इस उदाहरण में pixelRatio 2 स्टेज की दुगनी चौड़ाई और ऊँचाई वाला PNG बनाता है। वेक्टर संपादन के लिए SVG स्रोत अलग रखें।

स्रोत

1. Konva — कैनवस पर SVG — Image, Path, बाहरी रेंडरर विकल्प और ब्राउज़र संगतता सीमाएँ समझाता है।
2. Konva — Path ट्यूटोरियल — SVG पाथ डेटा और स्पष्ट रंग गुण से Path बनाने का दस्तावेज़ देता है।
3. Konva — Image ट्यूटोरियल — छवि लोड करके Konva दृश्य में रखना दिखाता है।
4. Konva — उच्च गुणवत्ता छवि निर्यात — रास्टर निर्यात और आउटपुट आयाम पर pixelRatio का प्रभाव समझाता है।
5. Konva — react-konva issue 530 — SVG छवि रंग बदलने के लिए रखरखावकर्ता का स्रोत संपादित करके दोबारा लोड करने का तरीका दर्ज करता है।

केवल रास्टर आइकन से शुरू कर रहे हैं? अपनी छवि को SVG पाथ में बदलें, वापस मिले रंग क्षेत्र देखें और बाकी संपादक जोड़ने से पहले Konva में एक क्षेत्र जाँचें।