🏾 🖐🏻 🤔 वेब-ड्राइंग लाइब्रेरी: पेपर.जेएस बनाम। प्रसंस्करण। जेएस बनाम। Raphael.js ✋🏿 😏 🧑🏿‍🤝‍🧑🏽

डब्ल्यूईबी पेपर.जेएस , प्रोसेसिंग.जेएस और राफेल.जेएस में ड्राइंग के लिए तीन जेएस लाइब्रेरी की तुलना करते हुए मुझे एक लेख आया। मुझे लगता है कि यह न केवल मेरे लिए दिलचस्प होगा।

इससे पहले कि आप किसी ब्राउज़र में कुछ भी लिखना शुरू करें, अपने आप से निम्नलिखित तीन चीजों के बारे में पूछें:

क्या आपको पुराने ब्राउज़रों के लिए समर्थन की आवश्यकता है?
अगर जवाब हां है , तो एकमात्र विकल्प रफाल है। यह IE 7 और फ़ायरफ़ॉक्स 3 तक ब्राउज़रों का समर्थन करता है। Raphaël का IE 6 के लिए सीमित समर्थन है, हालांकि इस ब्राउज़र में कुछ मुख्य पुस्तकालय तकनीकों को लागू नहीं किया जा सकता है।
क्या आपको Android समर्थन की आवश्यकता है?
Android SVG को सपोर्ट नहीं करता है, इसलिए आपको Paper.js या Processing.js का उपयोग करना होगा। ऐसी अफवाहें हैं कि एंड्रॉइड 4 एसवीजी का समर्थन करेगा, लेकिन अधिकांश आधुनिक एंड्रॉइड डिवाइस अब इसका समर्थन नहीं करेंगे।
क्या आपका ड्राइंग इंटरैक्टिव है?
Raphaël और Paper.js क्लिक करके, खींचकर और टैप करके खींचे गए तत्वों के साथ बातचीत करने पर ध्यान केंद्रित करते हैं। प्रसंस्करण .js किसी भी वस्तु स्तर की घटनाओं का समर्थन नहीं करता है, इसलिए इसमें उपयोगकर्ता आंदोलनों को संसाधित करना मुश्किल है। प्रसंस्करण .js आपके होमपेज पर शांत एनिमेशन आकर्षित कर सकते हैं, जबकि राफेल और पेपर.ज इंटरैक्टिव अनुप्रयोगों के लिए अधिक उपयुक्त हैं।

Paper.js, Processing.js और Raphaël वर्तमान में वेब पर प्रमुख ड्राइंग लाइब्रेरी हैं। कुछ नए लोग भी हैं जिनकी लोकप्रियता बढ़ रही है, और निश्चित रूप से आप हमेशा फ्लैश का उपयोग कर सकते हैं, लेकिन यह ट्रिनिटी एचटीएमएल 5 के साथ अच्छी तरह से काम करती है और ब्राउज़र निर्माताओं के बीच सबसे बड़ा समर्थन है।

सबसे उपयुक्त ढांचा चुनना आपकी परियोजना की सफलता को निर्धारित कर सकता है। यह लेख प्रत्येक पुस्तकालय के फायदे और नुकसान का वर्णन करेगा और सही विकल्प बनाने के लिए पर्याप्त जानकारी प्रदान करेगा।

इस लेख का सभी कोड ओपन सोर्स है और विशेष रूप से इस लेख का समर्थन करने के लिए बनाए गए डेमो पेज पर उपलब्ध है।

सामान्य विशेषताएं

	Paper.js	Processing.js	Raphaël
प्रौद्योगिकी	टैग कैनवास	टैग कैनवास	एसवीजी
भाषा	PaperScript	प्रसंस्करण स्क्रिप्ट	जावास्क्रिप्ट
ब्राउज़रों के साथ	IE 9	IE 9	IE 7
मोबाइल ब्राउजर	हां	हां	केवल आई.ओ.एस.
आदर्श	वेक्टर और रेखापुंज	रेखापुंज	वेक्टर
कर्नेल फ़ाइल का आकार	56 केबी	64 केबी	20 केबी

हर कोई जावास्क्रिप्ट का विशेष रूप से उपयोग करता है, लेकिन प्रत्येक रूपरेखा अपना दृष्टिकोण लागू करती है। Raphaël को सीधे JavaScript में लिखा जाता है, लेकिन Paper.js PaperScript का उपयोग करता है, और Processing.js अपनी भाषा का उपयोग करता है। वे सभी फ़ायरफ़ॉक्स, क्रोम और सफारी में समर्थित हैं, इंटरनेट एक्सप्लोरर के साथ एकमात्र समस्या - पेपर.जेएस और प्रोसेसिंग.जेएस कैनवास टैग का उपयोग करते हैं और इसलिए न्यूनतम 9 IE की आवश्यकता होती है।
पेपरस्क्रिप्ट जावास्क्रिप्ट भाषा का एक विस्तार है जो आपको कोड लिखने की अनुमति देता है जो वैश्विक नाम स्थान को प्रदूषित नहीं करता है। यह जावास्क्रिप्ट में संघर्षों की संभावना को कम करता है। पेपरस्क्रिप्ट भी सीधे तौर पर गणितीय प्राथमिकताओं का समर्थन करता है, जैसे बिंदु और आकार : आप दो बिंदुओं को एक साथ जोड़ सकते हैं जैसे कि वे प्रमुख संख्याएं थीं।
प्रसंस्करण .js प्रसंस्करण नामक एक रूपरेखा पर आधारित है, जो काम करने के लिए वर्चुअल जावा मशीन का उपयोग करता है। आप var के बजाय int और float को परिभाषित करते हैं, और आप जावा-स्टाइल इनहेरिटेंस का भी उपयोग कर सकते हैं। इस तथ्य के बावजूद कि प्रसंस्करण.जेएस पर स्क्रिप्ट जावा की तरह अधिक है, यह अभी भी जावास्क्रिप्ट है और अधिक जावा-विशिष्ट चीजों की आवश्यकता नहीं है।
यदि आप जावास्क्रिप्ट से परिचित हैं, तो तीन पुस्तकालयों में से किसी का उपयोग करना एक समस्या नहीं होगी।

चलिए शुरू करते हैं

शुरू करने के लिए, हम प्रत्येक पुस्तकालय का आयात करते हैं। प्रत्येक मामले में, यह प्रक्रिया थोड़ी अलग है।

हम Paper.js कनेक्ट करते हैं

Paper.js स्क्रिप्ट के प्रकार को टेक्स्ट / पेपरस्क्रिप्ट और कैनवास लक्ष्य तत्व की आईडी को परिभाषित करता है, जिस पर हम आकर्षित होंगे।

<head> <script src="paper.js" type="text/javascript" charset="utf-8"></script> <script type="text/paperscript" canvas="paperCircle" src="paper_circle.pjs" id="script"></script> </head> <body> <canvas id="paperCircle" class="canvas" width="200" height="200" style="background-color: white;"></canvas> </body>

हम प्रोसेसिंग.जेएस कनेक्ट करते हैं

प्रसंस्करण .js डेटा-प्रोसेसिंग-स्रोत कैनवास टैग विशेषता का उपयोग आरंभ करने के लिए करता है। लेखक ने प्रोसेसिंग फाइल के साथ स्क्रिप्ट के लिए .java एक्सटेंशन का उपयोग किया ताकि उसका कोड एडिटर सिंटैक्स हाइलाइटिंग को सही ढंग से प्रदर्शित करे। अन्य लेखक .pde या .pjs एक्सटेंशन का उपयोग कर सकते हैं। जैसा आप पसंद करते हैं।

 <head> <script src="processing.js" type="text/javascript" charset="utf-8"></script> </head> <body> <canvas width="200" height="200" class="canvas" data-processing-sources="processing_circle.java"></canvas> </body>

राफेल कनेक्ट कर रहा है

राफेल किसी भी अन्य जावास्क्रिप्ट फ़ाइल की तरह जुड़ती है। यह jQuery के तैयार फ़ंक्शन और अन्य सभी जेएस फ्रेमवर्क के साथ संयोजन के रूप में महान काम करता है।

 <head> <script src="raphael-min.js" type="text/javascript" charset="utf-8"></script> <script src="raphael_circle.js" type="text/javascript" charset="utf-8"></script> </head>

अब हम आकर्षित करने के लिए तैयार हैं

ऑब्जेक्ट ओरिएंटेड ड्राइंग

Paper.js और Raphaël दोनों ही ड्राइंग प्रक्रिया के लिए ऑब्जेक्ट ओरिएंटेड दृष्टिकोण का उपयोग करते हैं: आप एक वृत्त खींचते हैं और एक सर्कल ऑब्जेक्ट प्राप्त करते हैं। प्रसंस्करण। Js सिर्फ एक वृत्त खींचता है और कुछ भी नहीं लौटाता है। निम्न कोड दिखाता है कि यह कैसे होता है। स्क्रीन के केंद्र में 100 बाय 100 सर्कल से शुरू करते हैं।

Paper.js:

 var circle = new Path.Circle(new Point(100, 100), 10); circle.fillColor = '#ee2a33';

Raphaël:

 var paper = Raphael('raphaelCircle', 200, 200); var c = paper.ellipse(100, 100, 10, 10); c.attr({'fill': '#00aeef', 'stroke': '#00aeef'});

Processing.js:

 void setup() { size(200, 200); } void draw() { background(#ffffff); translate(100, 100); fill(#52b755); noStroke(); ellipse(0, 0, 20, 20); }

कोड का प्रत्येक टुकड़ा समान सर्कल खींचता है। अंतर यह है कि आप बाद में इसके साथ क्या कर सकते हैं।

Paper.js एक पथ ऑब्जेक्ट के रूप में एक सर्कल बनाता है। हम इसे बचा सकते हैं और भविष्य में बदल सकते हैं। पेपर.जेएस में, सर्कल.फिलकॉर्नर = 'रेड'; एक लाल वृत्त खींचता है, और Circle.scale (2) इसे दो बार बड़ा बनाता है।

राफेल, पेपर.जैस की तरह, ऑब्जेक्ट-ओरिएंटेड मॉडल को लागू करता है। राफेल में, हम सर्कल का उपयोग करके अपने सर्कल का रंग बदल सकते हैं। ('फिल', 'रेड'); और सर्कल.काले (2, 2) लिखकर इसे आकार दें; मुख्य विचार यह है कि एक सर्कल एक वस्तु है जिसके गुण हम बाद में एक्सेस कर सकते हैं।

प्रसंस्करण .js वस्तुओं का उपयोग नहीं करता है; दीर्घवृत्त () फ़ंक्शन मान वापस नहीं करता है। जैसे ही हम प्रसंस्करण का उपयोग करके एक सर्कल बनाते हैं। जेएस, यह बनाई गई छवि का हिस्सा बन जाता है, जैसा कि कागज पर स्याही के साथ सामान्य ड्राइंग में; यह कोई अलग वस्तु नहीं है कि किन गुणों को बदला जा सकता है। रंग बदलने के लिए, हमें उसी सर्कल को खींचना होगा, लेकिन पहले के ऊपर एक अलग रंग।
जब हम भरण () फ़ंक्शन कहते हैं, तो नीचे दिखाए गए सभी प्राइमेट के लिए रंग बदलता है। अनुवाद () और भरण () फ़ंक्शन को कॉल करने के बाद, सभी आकृतियों को हरा रंग दिया जाएगा।

चूंकि फ़ंक्शन एक साथ सब कुछ बदलते हैं, इसलिए हम आसानी से पूरी तरह से अप्रत्याशित प्रभाव प्राप्त कर सकते हैं। आप एक हानिरहित फ़ंक्शन कहते हैं और अचानक सब कुछ हरा हो जाता है! प्रसंस्करण.जेएस बदलावों को अलग करने के लिए पुशमैट्रिक्स () और पॉपमैट्रिक्स () फ़ंक्शन प्रदान करता है, लेकिन आपको उन्हें कॉल करने के लिए याद रखने की आवश्यकता है।
प्रसंस्करण.जेएस में वस्तुओं की अनुपस्थिति का मतलब है कि जटिल चित्र बहुत तेजी से संसाधित होते हैं। Paper.js और Raphaël सभी खींची गई वस्तुओं के लिंक को स्टोर करता है, जिससे उपयोग की जाने वाली मेमोरी की मात्रा बढ़ जाती है और जटिल ग्राफिक्स पर यह एप्लिकेशन को धीमा कर देता है। प्रसंस्करण .js में निर्मित वस्तुओं के संदर्भ नहीं होते हैं; परिणामस्वरूप, ड्राइंग का प्रत्येक भाग बहुत कम मेमोरी लेता है। यदि आप ऑब्जेक्ट को बाद में एक्सेस करना चाहते हैं, तो ऑब्जेक्ट दृष्टिकोण उचित है, अन्यथा यह संसाधनों की बर्बादी है। पेपर.जेएस अनावश्यक मेमोरी खपत से बचने के लिए संभव बनाता है जहां इसकी आवश्यकता नहीं है। इसके लिए, सिंबल का उपयोग किया जाता है जो ऑब्जेक्ट को रैस्टोर करता है, लेकिन निश्चित रूप से आपको पहले से सब कुछ योजना बनाने की आवश्यकता है ताकि आवेदन जल्दी से पर्याप्त काम करे।

विभिन्न दृष्टिकोण पुस्तकालयों के साथ काम करने की पूरी शैली निर्धारित करते हैं। बेशक, यह भी प्रभावित करता है कि वे एनीमेशन के साथ कैसे काम करते हैं।

उन्हें स्थानांतरित करें

मंडलियों का रोटेशन बहुत शानदार नहीं है, इसलिए चलो वृत्त के चारों ओर एक वर्ग घूमने दें।

प्रसंस्करण में एनिमेशन। js

प्रोसेसिंग. js सेटअप () और ड्रा () फ़ंक्शंस, कुछ इस तरह से एनीमेशन का समर्थन करता है:

 float angle = 0.0; void setup() { size(200, 200); frameRate(30); } void draw() { background(#ffffff); translate(100, 100); fill(#52b755); noStroke(); ellipse(0, 0, 20, 20); rotate(angle); angle += 0.1; noFill(); stroke(#52b755); strokeWeight(2); rect(-40, -40, 80, 80); }

एप्लिकेशन शुरू होने पर सेटअप फ़ंक्शन को कहा जाता है। हम कहते हैं कि प्रसंस्करण। प्रति सेकंड 30 तख्ते पर, इसलिए हमारे ड्रॉ () फ़ंक्शन को 30 बार प्रति सेकंड कहा जाएगा। यह संख्या अधिक लग सकती है, लेकिन यदि हम एक चिकनी एनीमेशन चाहते हैं तो यह सामान्य है।
ड्रा () फ़ंक्शन पहले पूरे कैनवास को एक रंग से भरता है; यह पिछले फ्रेम के अवशेषों पर पेंट करेगा। यह प्रसंस्करण की मुख्य विशेषता है। जेएस: हम वस्तुओं में हेरफेर नहीं करते हैं, इसलिए हमें पिछले फ्रेम से बने रहने वाले सभी चीजों को स्पष्ट करना चाहिए।
इसके बाद, हम फोकस को बिंदु 100,100 पर ले जाते हैं। जब तक हम निर्देशांक नहीं बदलते तब तक सभी ड्राइंग ऑपरेशन के लिए कैनवास के ऊपर से 100 पिक्सेल बाईं ओर और 100 पिक्सेल खींचता है। अगला, हम झुकाव के कोण के पिछले मूल्य को बदलते हैं। यह मान प्रत्येक फ्रेम के साथ बढ़ता है जिससे चौकोर घूमता है। और अंतिम चरण भरण और सुधार कार्यों का उपयोग करके वर्ग को प्रदर्शित करना है।

आमतौर पर, रोटेट () प्रसंस्करण। जेएस फ़ंक्शन डिग्रियों के बजाय रेडियन से संचालित होता है। इसलिए, हर बार हम कोण के मान को 0.2 से बढ़ाते हैं, न कि बड़े मूल्य के, उदाहरण के लिए 3. यह सॉफ्टवेयर ड्राइंग में कई मामलों में से एक है जब हमें त्रिकोणमिति की आवश्यकता होती है।

एनिमेशन पेपर .js

Paper.js में, सरल एनीमेशन प्रसंस्करण से लागू करना आसान है। एक निरंतर आयत वस्तु का उपयोग करके।

 var r; function init() { var c = new Path.Circle(new Point(100, 100), 10); c.fillColor = '#ee2a33'; var point = new Point(60, 60); var size = new Size(80, 80); var rectangle = new Rectangle(point, size); r = new Path.Rectangle(rectangle); r.strokeColor = '#ee2a33'; r.strokeWidth = 2; } function onFrame(event) { r.rotate(3); } init();

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

राफेल एनीमेशन

रैफेल एनीमेशन मानक जावास्क्रिप्ट में लिखा गया है, अर्थात राफेल प्रबंधन कर्मियों के लिए किसी विशेष कार्य को परिभाषित नहीं करता है। इसके बजाय, हम नियमित सेटइंटरवल () फ़ंक्शन का उपयोग करते हैं।

 var paper = Raphael('raphaelAnimation', 200, 200); var c = paper.ellipse(100, 100, 10, 10); c.attr({ 'fill': '#00aeef', 'stroke': '#00aeef' }); var r = paper.rect(60, 60, 80, 80); r.attr({ 'stroke-width': 2, 'stroke': '#00aeef' }); setInterval(function() { r.rotate(6); }, 33);

Raphaël अपने ऑब्जेक्ट ओरिएंटेड दृष्टिकोण में Paper.js के समान है। हमारे पास एक वर्ग है, और हम इसे घुमाते हैं () विधि। इस तरह हम कोड की कुछ लाइनों का उपयोग करके वर्ग को घुमा सकते हैं।

बातचीत

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

रापाल पर बातचीत

 var paper = Raphael('raphaelInteraction', 200, 200); var r = paper.rect(60, 60, 80, 80); r.attr({'fill': '#00aeef', 'stroke': '#00aeef'}); var clicked = false; r.click(function() { if (clicked) { r.attr({'fill': '#00aeef', 'stroke': '#00aeef'}); } else { r.attr({'fill': '#f00ff0', 'stroke': '#f00ff0'}); } clicked = !clicked; });

Raphaël में क्लिक () फ़ंक्शन jQuery की तरह काम करता है, और इसे किसी भी ऑब्जेक्ट पर लटका दिया जा सकता है। क्लिक इवेंट प्राप्त करने के बाद, वर्ग का रंग बदलना कोई समस्या नहीं है। Raphaël में ड्रैग और ड्रॉप, ऑब्जेक्ट पर कर्सर और जावास्क्रिप्ट में उपलब्ध अन्य सभी घटनाओं का समर्थन करने के लिए अतिरिक्त सुविधाएँ हैं।

पेपर.जेएस में सहभागिता

Paper.js इंटरेक्शन कार्यों को पूरा करने का दूसरा तरीका जाता है, लेकिन यह भी काफी सरल है:

 var hitOptions = { fill: true, tolerance: 5 }; function init() { var point = new Point(60, 60); var size = new Size(80, 80); var rectangle = new Rectangle(point, size); r = new Path.Rectangle(rectangle); r.fillColor = '#ee2a33'; } function onMouseUp(event) { var hitResult = project.hitTest(event.point, hitOptions); if (hitResult && hitResult.item) { if (hitResult.item.clicked) { hitResult.item.fillColor = '#ee2a33'; } else { hitResult.item.fillColor = '#f00ff0'; } hitResult.item.clicked = !hitResult.item.clicked; } } init();

Paper.js " हिट टेस्टिंग " नामक एक अवधारणा का उपयोग करके कर्सर के साथ काम करता है। क्लिक बिंदु की गणना कर्सर के वर्तमान निर्देशांक के आधार पर की जाती है और लाइब्रेरी को वहां स्थित वस्तु प्राप्त होती है। सेटिंग्स आपको प्रोग्राम के व्यवहार को कॉन्फ़िगर करने की अनुमति देती हैं: आप इस तरह की चीजों को निर्दिष्ट कर सकते हैं: ऑब्जेक्ट पर क्लिक की गणना करने के लिए कर्सर कितना पास होना चाहिए, चाहे वह वस्तु अपने पूरे आंतरिक स्थान या सिर्फ किनारे पर हो। हम इस क्लिक का पता लगाने के लिए किसी भी वस्तु (या वस्तुओं के समूह) को Paper.js में लागू कर सकते हैं।
Paper.js की टीम ने भी कुछ हफ़्ते पहले (फरवरी 2012 तक) राफेल के समान एक वस्तु दृष्टिकोण जोड़ा। घटनाएँ अगले संस्करण में दिखनी चाहिए।

प्रसंस्करण में सहभागिता। js

प्रसंस्करण .js में माउस क्लिक का पता लगाने के बजाय एक भ्रामक है। ऑब्जेक्ट शैली समर्थित नहीं है, इसलिए हमें मुख्य रूप से अपनी ताकत पर भरोसा करना चाहिए।

 float bx; float by; int bs = 20; boolean bover = false; boolean clicked = false; void setup() { size(200, 200); bx = width/2.0; by = height/2.0; noStroke(); fill(#52b755); frameRate(10); } void draw() { background(#ffffff); // Test if the cursor is over the box if (mouseX > bx-bs && mouseX < bx+bs && mouseY > by-bs && mouseY < by+bs) { bover = true; } else { bover = false; } translate(100, 100); rect(-40, -40, 80, 80); } void mousePressed() { if (bover) { if (clicked) { fill(#52b755); } else { fill(#f00ff0); } clicked = !clicked; } }

जैसे ही Processing.js एक वर्ग खींचता है, यह इसके बारे में भूल जाता है। हम चाहते हैं कि एक वर्ग पर क्लिक करने पर इसका रंग बदल जाए, लेकिन स्क्रिप्ट को यह पता नहीं है, इसलिए हमें सभी गणना स्वयं करनी चाहिए। ड्रा () फ़ंक्शन कर्सर की स्थिति निर्धारित करता है और गणना करता है कि यह हमारे वर्ग के भीतर है या नहीं।
एक वर्ग के लिए, कोड इतना डरावना नहीं है, लेकिन एक सर्कल के लिए उदाहरण के लिए प्रत्येक बार पीआर ² को गिनना आवश्यक होगा। और अधिक जटिल आकार जैसे अंडाकार, घटता और जटिल आकार को और भी अधिक गणित की आवश्यकता होगी।

कोई स्पष्ट विजेता नहीं है

प्रत्येक ढांचे के अपने फायदे हैं। प्रत्येक पुस्तकालय शांत डेमो और अधिक शांत अनुप्रयोगों को बनाने के लिए अवसर प्रदान करता है।

कागज़ के लाभ। js

पेपर.जेएस जटिल आकृतियों में हेरफेर करने के लिए बहुत अच्छा है। यह सैकड़ों विभिन्न तरीकों से किसी भी वस्तु को घुमा, घुमा और बदल सकता है। यह माउस (जेस्चर) के साथ इशारों का उपयोग करके वस्तुओं को संशोधित करना संभव बनाता है। नया Google संगीत टूर रंग लाइनों को संगीत में ले जाता है, जिसमें दिखाया गया है कि कैसे यह लाइब्रेरी सरल आकृतियों के जटिल परिवर्तनों को संभालती है।

Paper.js में एक और वाह कारक बिटमैप ग्राफिक्स के लिए समर्थन है। पेपर.जेएस पूरी तरह से उस तरीके को बदल सकते हैं जो छवियां प्रदर्शित होती हैं - उदाहरण के लिए, उन्हें सर्पिल या क्यूब कैनवस (क्यू * बर्ट बोर्ड) में बदलना।

प्रसंस्करण के लाभ। js

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

पानी को फैलाने वाली पूंछ और मछलियों के तैरते हुए शरीर बहुत स्वाभाविक लगते हैं। Processing.js आपको केवल घटता और अनुकूलन एनिमेशन का उपयोग करके इसे प्राप्त करने की अनुमति देता है।
प्रसंस्करण .js छायांकन, प्रकाश व्यवस्था और 3-डी परिवर्तनों जैसे तत्वों पर जटिल प्रभावों का भी समर्थन करता है। यदि आप जल्दी से कैनवास पर जटिल एनिमेशन बनाना चाहते हैं, तो प्रसंस्करण। जेएस सबसे अच्छा विकल्प है।

राफेल के लाभ

राफेल की सबसे अच्छी विशेषताओं में से एक इंटरनेट एक्सप्लोरर 7 और 8 के लिए समर्थन है। यदि आपके आवेदन को पुराने ब्राउज़रों का समर्थन करना चाहिए, तो राफेल एकमात्र विकल्प है।

राफेल का एक और महत्वपूर्ण लाभ इसका समुदाय है। Raphaël, Paper.js और Processing.js से पुराना है और इसलिए उनके पास विशिष्ट समस्याओं के उदाहरण, ट्यूटोरियल और विवरणों की एक गैलरी बनाने और उन्हें हल करने के लिए अधिक समय था। इसमें सहजता , परिवर्तन एनिमेशन और घटना संचालकों के लिए अंतर्निहित समर्थन है, जिसे हमने एक इंटरैक्टिव उदाहरण में देखा था; उनकी अपनी खुद की चार्टिंग लाइब्रेरी भी है।

राफेल में कई प्रकार के उपकरण भी हैं।

उपकरण

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

आइए कुछ और जटिल बनाएं

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

जब सभी सतहों को एक ही रंग से भर दिया जाता है, तो आंकड़ा एक गियर जैसा दिखता है।

एनीमेशन के प्रत्येक फ्रेम पर गियर थोड़ा घूमेगा। मुख्य गियर गति निर्धारित करेगा, और अन्य सभी इसके आधार पर घूमेंगे। ट्रिगोनोमेट्री की एक पागल राशि के आधार पर गियर एक दूसरे के खिलाफ स्थित, युग्मित और घूमेंगे। उन्हें एक कैनवास पर रखें और आपको एक जटिल गियर सिस्टम मिलेगा।

Paper.js:

Processing.js:

Raphaël:

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

वेब पर ड्राइंग का भविष्य

हम प्रत्येक नई मस्तूल तकनीक के साथ खेलते हैं: हमें उम्मीद है कि यह हमारी कई समस्याओं को हल कर देगी और यह इसके अध्ययन में निवेश का भुगतान करेगा। प्रौद्योगिकी लोकप्रियता प्राप्त कर रही है और खो रही है, लेकिन कई कारक शामिल हैं, जैसे निर्माता समर्थन या व्यावसायिक आवश्यकताएं। हमारे उद्योग का भविष्य अक्सर अनुमान का खेल है।
आज, फ्लैश सीखने के लिए सबसे अच्छी तकनीक की तरह नहीं दिखता है। फ्लैश में महान विकास उपकरण, विकास के अनुभव और एक बड़ा समुदाय है, लेकिन यहां तक कि एडोब भी इससे दूर जा रहा है।
एसवीजी के साथ, एक समान स्थिति। ब्राउज़र इसका समर्थन करते हैं, लेकिन बहुत अधिक ध्यान नहीं देते हैं।
प्रत्येक ब्राउज़र निर्माता कैनवास को रेंडर करने की गति को बढ़ाने के लिए लगातार काम कर रहा है, ताकि हार्डवेयर त्वरण और बेहतर सहायक पुस्तकालयों जैसे पेपर.जेएस और प्रोसेसिंग.जेएस का उपयोग करने का अवसर मिल सके। सभी ए-क्लास मोबाइल ब्राउज़र कैनवास का समर्थन करते हैं, और उनके डेवलपर्स इस समर्थन की गुणवत्ता में सुधार करने के लिए लगातार काम कर रहे हैं।

Upd।
मूल लेख पर टिप्पणियों में सैम दिमित्री बरनोवस्की ने अपने लेखक के निम्नलिखित आरोपों को चुनौती दी:
राफेल एक निश्चित बिंदु के आसपास रोटेशन का समर्थन नहीं करता है। - समर्थन करता है
राफेल प्रबंधन कर्मियों के लिए किसी विशेष कार्य को परिभाषित नहीं करता है - - परिभाषित करता है

उन्होंने यह भी आश्वासन दिया कि राफेल आईई 6 में भी काम करता है

वेब-ड्राइंग लाइब्रेरी: पेपर.जेएस बनाम। प्रसंस्करण। जेएस बनाम। Raphael.js

सामान्य विशेषताएं

चलिए शुरू करते हैं

हम Paper.js कनेक्ट करते हैं

हम प्रोसेसिंग.जेएस कनेक्ट करते हैं

राफेल कनेक्ट कर रहा है

ऑब्जेक्ट ओरिएंटेड ड्राइंग

Paper.js:

Raphaël:

Processing.js:

उन्हें स्थानांतरित करें

प्रसंस्करण में एनिमेशन। js

एनिमेशन पेपर .js

राफेल एनीमेशन

बातचीत

रापाल पर बातचीत

पेपर.जेएस में सहभागिता

प्रसंस्करण में सहभागिता। js

कोई स्पष्ट विजेता नहीं है

कागज़ के लाभ। js

प्रसंस्करण के लाभ। js

राफेल के लाभ

उपकरण

आइए कुछ और जटिल बनाएं

Paper.js:

Processing.js:

Raphaël:

वेब पर ड्राइंग का भविष्य

More articles: