Paper.js SVG बूलियन: आयात किए चित्र काटें और जोड़ें

SVG आयात करें, इच्छित पाथ ऑब्जेक्ट खोजें, फिर भरे क्षेत्रों को जोड़ने के लिए unite() या एक क्षेत्र से दूसरा निकालने के लिए subtract() कॉल करें। परिणाम जाँचने तक दोनों इनपुट रखें और कहीं और इस्तेमाल करने से पहले निर्यात SVG दोबारा खोलें।

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

ऐसी भरी ज्यामिति से शुरू करें जिसे आप पहचान सकें

Paper.js का SVG आयातक SVG मार्कअप, SVG एलिमेंट या URL स्वीकार करता है। इन रास्तों का लोडिंग व्यवहार अलग है: यह उदाहरण इनलाइन स्ट्रिंग आयात करता है; दूरस्थ फ़ाइल लोड होने के बाद आयात कॉलबैक में प्रोसेस करनी चाहिए।

इस काम में इनपुट Path या CompoundPath ऑब्जेक्ट होने चाहिए। समूह एक कंटेनर है और रास्टर छवि पाथ बूलियन के लिए आवश्यक सीमा नहीं देती। फ़ाइल केवल एक चित्र जैसा व्यवहार करे तो पहले जाँचें कि SVG का समूह क्यों नहीं टूटता।

आपके नियंत्रण वाले हिस्सों के लिए ID इस्तेमाल करें। अलग-अलग निर्यात में यह न मानें कि children[0] का अर्थ “लोगो” है। अपरिचित चित्र जाँचें और हिस्से सोच-समझकर निर्धारित करें। मौजूदा कंपाउंड पाथ के उपपाथ पहले से इच्छित छेद परिभाषित करते हों तो उसे अखंड रखें।

छोटा आयात, संघ और घटाव उदाहरण चलाएँ

हमने निम्न कोड ब्राउज़र में Paper.js 0.12.18 से जाँचा। चित्र मौलिक, हाथ से लिखा SVG है: चौकोर मुख्य भाग, ओवरलैप करता टैब और इच्छित खुले हिस्से को दर्शाता सफ़ेद वर्ग। यह PerfectVector रूपांतरण नमूना नहीं है।

खाली फ़ोल्डर में निश्चित संस्करण वाली लाइब्रेरी स्थापित करें:

npm install --save-exact paper@0.12.18

इसे index.html के रूप में सहेजें:

<!doctype html>
<meta charset="utf-8">
<title>SVG Boolean example</title>
<canvas id="work" width="300" height="220" hidden></canvas>
<div id="result" style="background:#d8e8e0; width:300px"></div>
<pre id="svg-output"></pre>
<script src="node_modules/paper/dist/paper-full.min.js"></script>
<script src="example.js"></script>

इसे example.js के रूप में सहेजें, फिर HTML ब्राउज़र में खोलें:

paper.setup(document.getElementById('work'));
const source = `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="220" viewBox="0 0 300 220">
  <path id="body" fill="#176b62" d="M40 40H180V180H40Z"/>
  <path id="tab" fill="#ee9852" d="M160 80H260V140H160Z"/>
  <path id="hole" fill="#ffffff" d="M80 80H130V130H80Z"/>
</svg>`;
const imported = paper.project.importSVG(source, { insert: false, expandShapes: true });
function operand(name) {
  const item = imported.getItem({ name });
  if (!(item instanceof paper.Path || item instanceof paper.CompoundPath)) {
    throw new Error(`Expected path geometry for ${name}`);
  }
  return item;
}
const joined = operand('body').unite(operand('tab'), { insert: false });
const cut = joined.subtract(operand('hole'), { insert: false });
cut.fillColor = '#176b62';
cut.strokeColor = null;
paper.project.activeLayer.addChild(cut);
const output = paper.project.exportSVG({ asString: true, bounds: new paper.Rectangle(0, 0, 300, 220) });
document.getElementById('result').innerHTML = output;
document.getElementById('svg-output').textContent = output;

insert: false आयात को दृश्य के बाहर रखता है। expandShapes: true आयातक से समर्थित बुनियादी आकारों को पाथ में बदलने को कहता है; हमारे नमूने में पहले से पाथ एलिमेंट हैं। स्पष्ट क्लास जाँच फिर भी मायने रखती है क्योंकि आयात की गई ID कंटेनर या दूसरे प्रकार का आइटम पहचान सकती है।

बूलियन API नया पाथ आइटम लौटाता है। यहाँ परिणाम अंतिम कटा आकार जोड़ने तक दृश्य से बाहर रहता है। मूल हिस्से imported के तहत उपलब्ध रहते हैं, इसलिए असफल ऑपरेशन पर स्रोत दोबारा बनाने की ज़रूरत नहीं पड़ती।

joined.subtract(hole) संयुक्त बाहरी आकृति से छेद हटाता है। इनपुट का क्रम उलटने से प्रश्न बदल जाता है और परिणाम खाली या अप्रत्याशित हो सकता है। Paper.js का डिफ़ॉल्ट घटाव मोड इनपुट को क्षेत्रों की तरह मानता है। उसका trace विकल्प बूलियन ज्यामिति से संबंधित है; उसका PNG को वेक्टर में ट्रेस करने से संबंध नहीं है।

परिणाम को ज्यामिति और फ़ाइल दोनों के रूप में जाँचें

इस उदाहरण में संघ ने Path लौटाया; घटाव ने दो कंटूर वाला CompoundPath लौटाया। अंतिम सीमाएँ SVG इकाइयों में x = 40, y = 40, चौड़ाई = 220, ऊँचाई = 140 थीं। चित्र 300 × 220 निर्यात व्यूपोर्ट में बैठता है, इसलिए सीमाएँ और दस्तावेज़ आकार जानबूझकर अलग हैं।

हमने खुले हिस्से का केंद्र (105, 105) जाँचा: वह संयुक्त बाहरी आकृति के अंदर और घटाए परिणाम के बाहर था। ठोस मुख्य भाग का बिंदु (60, 60) अंदर रहा। निर्यात SVG दोबारा आयात करने से सीमाएँ सुरक्षित रहीं और छेद का केंद्र फिर बाहर रहा। ये इस सरल नमूने के परिणाम हैं, हर आयात फ़ाइल की गारंटी नहीं।

निर्यात API SVG स्ट्रिंग लौटा सकता है और स्पष्ट सीमाएँ ले सकता है। परिणाम के नीचे दिखता मार्कअप result.svg में कॉपी करें, फिर वह फ़ाइल अलग से खोलें। हमारे सहेजे निर्यात में दो बंद उपपाथ वाला एक पाथ एलिमेंट था; सीधे ब्राउज़र में खोलने पर भी वह सही रेंडर हुआ।

अपने चित्र के लिए जाँचें:

• बाहरी आकृति और हर खुले हिस्से को मूल से मिलाएँ;
• कहीं पृष्ठभूमि या छिपा सहायक आकार गलती से शामिल तो नहीं हुआ;
• इच्छित भरण, क्योंकि एक संयुक्त आकार दो स्वतंत्र रूप से संपादन योग्य ठोस भरण सुरक्षित नहीं रख सकता;
• निर्यात व्यूपोर्ट, खासकर जब चित्र दस्तावेज़ के किनारे तक पहुँचता हो;
• फ़ाइल को उस एप्लिकेशन में जो वास्तव में उसे इस्तेमाल करेगा।

सफ़ेद ओवरले सफ़ेद कागज़ पर खुले हिस्से जैसा दिख सकता है। पारदर्शिता जाँचने के लिए परिणाम विपरीत रंग की पृष्ठभूमि पर रखें। भरे SVG छेद की मार्गदर्शिका संबंधित कंपाउंड पाथ और भरण नियम की समस्याएँ समझाती है।

जब ऑपरेशन गलत आकार देता है

कोई मेथड उपलब्ध नहीं है। चुने आइटम की क्लास देखें। समूह में इच्छित पाथ खोजें या आयात के दौरान समर्थित बुनियादी आकारों को पाथ में बदलें। हर वंशज को जोड़कर इसे हल न करें: कंपाउंड पाथ के भी चाइल्ड होते हैं, और उनके छेद के संबंध मायने रखते हैं।

परिणाम बदला हुआ नहीं लगता। सुनिश्चित करें कि आप लौटाया गया आइटम दिखाते हैं। मूल हिस्से दृश्य में रहने से सफल घटाव ढक सकता है। उदाहरण में केवल अंतिम परिणाम सक्रिय लेयर में जाता है।

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

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

जब स्रोत अब भी PNG या JPG है

संपादन योग्य मूल गायब हो तो PerfectVector का छवि से वेक्टर कार्यप्रवाह उपयुक्त रास्टर चित्र से SVG तैयार करने में मदद कर सकता है। परिणाम का पूर्वावलोकन देखें, कंटूर और खाली स्थान जाँचें तथा Paper.js में परीक्षण के लिए एक प्रारंभिक SVG फ़ाइल डाउनलोड करें।

वेक्टराइज़ेशन यह नहीं पहचानता कि आपके प्रोग्राम को कौन से हिस्से जोड़ने या घटाने चाहिए। आपको अब भी आयात संरचना देखनी होगी, सही इनपुट चुनने होंगे और निर्यात परिणाम जाँचना होगा। मूल वेक्टर हो तो वही लें; साधारण वर्ग या वृत्त ट्रेस करने के बजाय सीधे बनाएँ। छवि वेक्टराइज़ेशन परिचय स्रोत फ़ाइल का यह निर्णय समझाता है।

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

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

क्या subtract मूल पाथ हटा देता है? वह नया पाथ आइटम लौटाता है। यह उदाहरण आयात और बूलियन परिणामों के लिए insert: false लेता है, फिर केवल अंतिम परिणाम डालता है। स्रोत इनपुट आयात किए कंटेनर के तहत उपलब्ध रहते हैं।

छेद अब भी सफ़ेद क्यों दिखता है? रंगीन पृष्ठभूमि पर जाँचें। सफ़ेद भरा ऑब्जेक्ट पीछे की चीज़ ढकता है; घटाकर बनाया खुला हिस्सा पृष्ठभूमि दिखाता है। संबंध सुरक्षित रहने की पुष्टि के लिए निर्यात फ़ाइल दोबारा खोलें।

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

स्रोत

1. Paper.js — Project संदर्भ — SVG आयात, निर्यात, सीमाएँ और प्रोजेक्ट सामग्री का दस्तावेज़।
2. Paper.js — Path संदर्भ — संघ और घटाव, लौटाए पाथ आइटम और बूलियन विकल्प परिभाषित करता है।
3. Paper.js — CompoundPath संदर्भ — कंपाउंड ज्यामिति और उसके पाथ बताता है।

केवल रास्टर स्रोत हो तो एक प्रारंभिक SVG तैयार करें, उसके हिस्से देखें, फिर बाकी चित्र प्रोसेस करने से पहले सबसे छोटा उपयोगी बूलियन ऑपरेशन जाँचें।