वस्तुओं को स्थानांतरित करने के लिए कैनवास में SVG रास्तों का उपयोग करना

यदि कैनवास में एक वस्तु को (और न केवल) को चेतन करने के लिए, आपको इसे कुछ वांछित पथ के साथ स्थानांतरित करने की आवश्यकता है, शायद यहां तक ​​कि कई जिन्हें यादृच्छिक या क्रमिक रूप से चुना जा सकता है, तो यह svg रास्तों का उपयोग करके किया जा सकता है। पथ के साथ एक सरल लेकिन हरा वर्ग शुरू करके चलो।



ऐसा करने के लिए, हम एक या एक से अधिक रास्तों के साथ svg बना या उधार लेंगे।

Document.createElementNS फ़ंक्शन का उपयोग करके एक तत्व बनाएं। एमडीएन हमें बताता है कि सभी आधुनिक ब्राउज़रों में विधि का मूल समर्थन है। फिर बनाए गए तत्व में पथ जोड़ें।

let path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute('d', 'M148.185,118.975c0,0-92.592,39.507-80.247,79.013,s79.012,143.21,129.629,124.691s64.198-113.856,120.988-100.755s118.518,30.384,116.049,109.397s-82.715,118.519-97.53,201.235,s-92.593,139.505,0,159.259'); 

यहां, विशेषताओं में, कुछ svg फ़ाइल से पहला आंख को पकड़ने वाला मार्ग पेश किया गया है, कॉपी-पेस्ट विधि। बेशक, यह एकमात्र और नहीं है, इसके अलावा, सबसे सुविधाजनक तरीका नहीं है, लेकिन पहले उदाहरण में उपयोग के लिए पर्याप्त स्पष्ट है।

अब लूप में, हम वेपॉइंट के निर्देशांक प्राप्त करेंगे और उन्हें अपनी वस्तु को सौंपेंगे। इसके लिए दो SVGGeometryElement विधियां पर्याप्त हैं:

 path.getTotalLength() 

कुल पथ लंबाई का परिकलित मान देता है और

  path.getPointAtLength(index) 

यह एक फ्लोट तर्क लेता है, और एक SVGPoint ऑब्जेक्ट देता है जिसमें हमारे लिए x और y निर्देशांक के हित हैं। यदि तर्क मान शून्य से कम या पथ लंबाई से अधिक हैं, तो क्रमशः पहले या अंतिम बिंदु, परिणाम के रूप में वापस आ जाएंगे।

फ्रेम को अपडेट करते समय, हम बिंदु प्राप्त करते हैं और आंदोलन के लिए इसके निर्देशांक का उपयोग करते हैं।

→ कोडपेन पर पूर्ण उदाहरण कोड

लेकिन, आप उदाहरण के लिए, कई रास्तों के निर्देशांक के साथ वस्तु को स्थानांतरित करने के लिए एक अधिक दिलचस्प विकल्प का उपयोग कर सकते हैं:



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

 extractPathsfromSvg: function(svg){ let results = svg.match(/<path\b([\s\S]*?)><\/path>/g); let paths = []; let len = results.length; for(let i = 0; i < len; i++){ let str = results[i]; let data = str.match(/[^\w]d="([\s\S]*?)"/); paths.push(data[1]); } return paths; } 

रास्तों की एक सरणी बनाने के बाद, यह बदले में उन्हें निकालने के लिए रहता है और उन्हें उसी तरह से संसाधित करता है जैसे कि वर्ग के आंदोलन के लिए एकमात्र मार्ग। दिलचस्प प्रभाव पड़ रहा है।
नीचे दिए गए उदाहरण के लिए पूरा कोड देखें।

पथ के निर्देशांक के साथ किसी वस्तु को ले जाने पर अधिक नियंत्रण जोड़ने के लिए, आप जुड़वा बच्चों का उपयोग कर सकते हैं। परीक्षण मामलों के लिए, मैंने पहला ग्रीनस्कॉक पुस्तकालय लिया, जिसने मेरी आंख को पकड़ लिया, लेकिन यह किसी अन्य के लिए निकला हो सकता है।

पहले मामले में, जब वर्ग एकमात्र पथ के साथ चलता है, तो एक मध्यवर्ती ऑब्जेक्ट हेल्पर बनाएं, और इसे ट्वीन बनाने के लिए पास करें।

 var helper = {progress: 0} helper.update = function(value){ point = path.getPointAtLength(totalLength * helper.progress); x = point.x; y = point.y; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, x, y ); } var tw = new TweenLite.to(helper, 5, {progress: 0, }); tw.eventCallback("onUpdate", helper.update); 

आप कोड का उपयोग करके कोड के पहले उदाहरण में, कोड के साथ ट्वीन का उपयोग करके टिक कर सकते हैं।

कई रास्तों के साथ आगे बढ़ने पर, हम निम्नानुसार आगे बढ़ते हैं। पहले की तरह, प्रगति संपत्ति के साथ एक सहायक वस्तु बनाएं। हम सभी रास्तों की कुल लंबाई की गणना करते हैं, और इसे हैंडलर.प्रोग्रेस असाइन करते हैं। आइए एक ट्रैवर्सेड वैरिएबल बनाएं जिसमें पहले से कवर किए गए रास्तों को संक्षेप में प्रस्तुत किया जाएगा।

वर्तमान पथ पर एक बिंदु प्राप्त करने के लिए, हेल्पर.प्रोग्रेस से घटाएं, जो कि ट्वीन्स में बदलता है, पहले से ही यात्रा की गई पथ का पता लगाया जाता है। हम हमेशा की तरह बिंदु के निर्देशांक का उपयोग करते हैं।

 var traversed = 0; helper.progress = totalLenghtAllPath; helper.update = function() { var localPoint = helper.progress - traversed; if(localPoint > curPath.getTotalLength()){ traversed += curPath.getTotalLength(); curPath = paths[next()]; if(curPath){ return false; } localPoint = helper.progress - traversed; } /*       */ } var tw = TweenLite.to( helper, 25, {progress: totalLenghtAllPath, ease: Power2.easeOut } ); tw.eventCallback("onUpdate", helper.update); 

कोड सरल है, पूर्ण कोड यहाँ है: