LibCanvas मूल बातें - सिद्धांत

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

मुझे उम्मीद है कि इस लेख में सवालों के जवाब दिए गए हैं: लिबासनवास क्या है? इसकी आवश्यकता क्यों है और इसके क्या फायदे हैं? कहाँ से शुरू करें?

यह लेख केवल एक सिद्धांत होगा, और इस ज्ञान को व्यवहार में कैसे लागू किया जाए इसका खुलासा अगले लेख में किया गया है

सामान्य जानकारी

LibCanvas कैनवास और संबंधित तकनीकों के साथ काम करने के लिए एक रूपरेखा है, जिसका उपयोग गेम और अन्य इंटरैक्टिव अनुप्रयोगों को विकसित करने के लिए किया जा सकता है।

यह AtomJS पर आधारित है, एक हल्का जावास्क्रिप्ट ढांचा जो कुछ हद तक MooTools और jQuery के समान है। काफी अच्छा अंग्रेजी AtomJS प्रलेखन है, और यदि आपने पहले MooTools का उपयोग किया है, तो यह आपके लिए AtomJS को सही ठहराने के लिए पर्याप्त होगा।

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

कोर

सभी कोड LibCanvas नामस्थान में संग्रहीत हैं। यह अच्छा है क्योंकि पुस्तकालय वैश्विक नाम स्थान को अव्यवस्थित नहीं करता है। हालांकि, एक खामी है - क्रिया सिंटैक्स अंत में पर्याप्त है:

var circle = new LibCanvas.Shapes.Circle( 100, 100, 50 ); var circle = new LibCanvas.Shapes.Circle( 222, 222, 22 ); 

यह स्थिर LibCanvas.extract () विधि का उपयोग करके तय किया जा सकता है। यह स्वयं LibCanvas को वैश्वीकृत करता है ताकि आप अपने आवेदन में लघु श्रेणी के नामों का उपयोग कर सकें:

 LibCanvas.extract(); var circle = new Circle( 100, 100, 50 ); var circle = new Circle( 222, 222, 22 ); 

उपनाम का उपयोग करने के लिए एक और विकल्प है:

 var Circle = LibCanvas.Shapes.Circle; var circle1 = new Circle( 100, 100, 50 ); var circle2 = new Circle( 222, 222, 22 ); 

LibCanvas.Context2D

एक अंतर्निहित LibCanvas संदर्भ है। कॉल करने के लिए बहुत सरल है:

 var context = document.getElementsByTagName('canvas')[0].getContext('2d-libcanvas'); // or: var context = atom.dom('canvas').first.getContext('2d-libcanvas'); 

कृपया ध्यान दें कि मूल '2 डी' संदर्भ अभी भी सुलभ है और प्रभावित नहीं है, इसलिए इसे आपके अनुप्रयोगों में सुरक्षित रूप से उपयोग किया जा सकता है:

 var context = atom.dom('canvas').first.getContext('2d'); 

'2d-libcanvas' संदर्भ मूल संदर्भ के साथ पिछड़ा हुआ है ('2d-libcanvas' संदर्भ में '2d' संदर्भ के लिए लिखे गए सभी कोड) काम करेंगे, लेकिन इसके निम्न फायदे हैं:
1. चेनेबल - सभी तरीकों को चेन कहा जा सकता है। यह तरीका jQuery के आगमन के साथ विशेष रूप से लोकप्रिय हो गया:

 context .set({ fillStyle: 'black', strokeStyle: 'red' }) . fillRect(20, 20, 40, 40) .strokeRect(50, 50, 100, 100); 

2. नामांकित तर्क - अब आप न केवल पात्रों का एक सेट पारित कर सकते हैं, बल्कि एक हैश:

 context.drawImage(img, 10, 15, 40, 45, 20, 25, 50, 55); // vs context.drawImage({ image: img, crop : [10, 15, 40, 45], draw : [20, 25, 50, 50] }); 

3. आकृतियाँ - आप आकृतियों को स्थानांतरित कर सकते हैं, संख्याओं को नहीं। यह विशेष रूप से सुविधाजनक है जब आपके पास निर्मित वस्तुओं के साथ एक बड़ा अनुप्रयोग है:

 //  : context.drawImage( image, rect.from.x, rect.from.y, rect.width, rect.height ); // vs context.drawImage( image, rect ); //      : context.save(); context.fillStyle = 'red'; context.fillRect( rect.from.x, rect.from.y, rect.width, rect.height ) context.restore(); // vs: context.fill( rect, 'red' ); 

4. एक्सटेंशन एपीआई - यहां सुविधाओं की एक पूरी श्रृंखला है। सबसे पहले, पथ, पाठ, चित्र, परिवर्तनों, आदि के साथ अधिक सुविधाजनक कार्य।:

 //      ,   : // original ctx: context.save(); context.translate(this.position.x, this.position.y); context.rotate(this.angle); context.translate(-this.image.width/2, -this.image.height/2); context.drawImage(this.image, 0, 0); context.restore(); // vs context.drawImage({ image : this.image, center: this.position, angle : this.angle }); // : context.text({ text: 'Test string \n with line breaks \n is here' padding: [ 30, 50 ], size: 20, align: 'center' }) //    : context.translate( point.x, point.y); context.rotate(angle); context.translate(-point.x, -point.y); // vs: context.rotate( angle, point ); //   context.beginPath( ); context.moveTo( mt.x, mt.y ); context.lineTo( lt.x, lt.y ); context.bezierCurveTo( bc1.x, bc1.y, bc2.x, bc2.y, bc.x, bc.y ); context.quadraticCurveTo( qc1.x, qc1.y, qc.x, qc.y ); context.closePath(); // vs context .beginPath( mt ) .lineTo( lt ); .curveTo( bc, bc1, bc2 ) .curveTo( qc, qc1 ) .closePath(); //  : var circle = new Circle( 130, 120, 50 ); context.beginPath(); context.arc( circle.center.x, circle.center.y, circle.radius, 0, Math.PI * 2 ); context.closePath(); context.clip(); // vs: context.clip( circle ); //   : context.clear( 0, 0, canvas.width, canvas.height ); // vs context.clearAll(); 

और इसी तरह। मुझे लगता है कि आप स्वयं अंतर्निहित संदर्भ की सुविधा देखते हैं।

LibCanvas वस्तु

LibCanvas का निर्माण करते समय, एक LibCanvas.Canvas2D ऑब्जेक्ट बनाया जाता है। पहला तर्क आपको आवश्यक कैनवास तत्व (सीएसएस-चयनकर्ता, डोम-ऑब्जेक्ट, आदि) के लिए एक लिंक पास करना चाहिए। आप अतिरिक्त सेटिंग्स को दूसरी - एफपीएस सीमा पर, फिर से तैयार करने से पहले सफाई, चित्रों को लोड करने और अन्य को स्थानांतरित कर सकते हैं ।

 var libcanvas = new LibCanvas('#my-canvas'); libcanvas instanceof LibCanvas; // true libcanvas instanceof LibCanvas.Canvas2D; // true //      : libcanvas.ctx instanceof LibCanvas.Context2D; // true 

प्रत्येक फ्रेम में दो चरण होते हैं। पहला डेटा रेंडरिंग है। यह हर बार किया जाता है और गणितीय कार्यों के लिए पूरी तरह से जिम्मेदार है - वस्तुओं, टकरावों आदि की गति। इस लेयर में कोई रिड्रास्टिंग नहीं होनी चाहिए। दूसरा चरण एक रेंडर है। इसमें वह भाग होता है जो स्क्रीन की सामग्री को फिर से तैयार करने के लिए ज़िम्मेदार होता है और यह केवल स्क्रीन पर किसी भी परिवर्तन के मामले में किया जाएगा। यह libcanvas.update() पद्धति को कॉल करके रेंडरिंग चरण में रिपोर्ट किया जा सकता है।

आप libcanvas.addRender() विधि का उपयोग करके रेंडरिंग चरण में एक फ़ंक्शन जोड़ सकते हैं, आप libcanvas.addRender() विधि का उपयोग करके रेंडरिंग चरण में एक फ़ंक्शन जोड़ सकते हैं। साथ ही, रेंडरिंग के चरण में, स्थानांतरित वस्तुओं के ड्रा तरीकों को कहा जाता है। लगभग कोड इस तरह दिखता है:

 libcanvas .addFunc(function () { scene.recount(); if (scene.somethingChanged()) { libcanvas.update(); } }) .addRender(function () { //      libcanvas.update(); scene.drawAll(); }); 

बहुत सारे अनुप्रयोग - केवल उपयोगकर्ता कार्रवाई के क्षणों में पुनर्विकास के साथ अधिकांश समय स्थिर होते हैं। यह प्रोसेसर पर व्यर्थ भार को कम करने में काफी मदद करेगा।

व्यवहार में, addRender का उपयोग शायद ही कभी किया जाता है क्योंकि यह draw() का उपयोग करके वस्तुओं को आकर्षित करने के लिए बहुत सुविधाजनक है (उस पर अधिक)।

परिवर्तन होने पर ही स्क्रीन पर हमेशा कुछ नया करें। कई अनुप्रयोगों में, ऐसा बुनियादी तंत्र पर्याप्त नहीं होगा, लेकिन यह कुछ भी नहीं से बेहतर है।

प्वाइंट

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

 //   A  60    B: var A = new Point(10, 10), B = new Point(20, 20); A.rotate( (60).degree(), B ); //        : var sum = 0 + matrix[py-1][px-1] + matrix[py-1][px] + matrix[py-1][p.x+1] + matrix[py ][px-1] + matrix[py ][p.x+1] + matrix[p.y+1][px-1] + matrix[p.y+1][px] + matrix[p.y+1][p.x+1] ; // vs var sum = point.neighbours.reduce(function(value, p) { return value + matrix[py][px]; }, 0); 

आंकड़े

LibCanvas.Shapes.* में निहित हैं LibCanvas.Shapes.* और छोटे उपनामों के लिए वैश्विक हैं। सबसे प्रसिद्ध आंकड़े Rectangle , Circle , Line । LibCanvas का उपयोग करते समय - आपको यह महसूस करना चाहिए कि आकृतियों में स्वयं का रूप नहीं है, उनके पास एक रंग - रूप या छाया नहीं हो सकता है। एक वस्तु जो किसी आकृति का उपयोग करती है, उपस्थिति के लिए जिम्मेदार है, उदाहरण के लिए, LibCanvas.Ui.Shaper, जबकि आंकड़े स्वयं में केवल गणितीय कार्य होते हैं - एक पथ, चौराहों पर कैसे जाएं, क्या एक बिंदु आंकड़ा के अंदर है, आदि। वे एक सूक्ष्म हैं, लेकिन भौतिक शरीर नहीं हैं।

यह आपको उपस्थिति से व्यवहार को अलग करने की अनुमति देता है। उदाहरण के लिए, हमारे पास एक सन्दूक में एक बोर्ड है। वास्तव में यह एक तस्वीर है, लेकिन हम एक साधारण आकृति के साथ सभी क्रियाएं कर सकते हैं:

 var Unit = atom.Class({ initialize: function (rectangle, image) { this.shape = rectangle; this.image = image; }, collision: function (anotherUnit) { return this.shape.intersect( anotherUnit.shape ); }, draw: function () { this.libcanvas.ctx.drawImage( this.image, this.shape ); } }); 

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

जब किसी विधि को आयत जैसे तर्क की आवश्यकता होती है, तो वह आयत की तरह दिखने वाले किसी भी तर्क को स्वीकार कर सकती है। उदाहरण के लिए:

 context.drawImage({ image: image, crop: { from: { x: 15, y: 10 }, size: { width: 50, height: 100 } }, draw: [10,20,100,200] }); 

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

 var Item = atom.Class({ initialize: function (image) { this.image = image; this.cropRect = new Rectangle(15, 10, 50, 100); this.drawRect = new Rectangle(10, 20, 100, 200); }, draw: function () { context.drawImage({ image: this.image, crop : this.cropRect, draw : this.drawRect }); } }); 

अन्य आकृतियों का भी इसी प्रकार उपयोग किया जाता है:

 // : context.arc({ circle: new Circle( 100, 100, 50 ), angle : [ (45).degree(), (135).degree() ] }); //  : context.stroke( new Line([13, 13], [42, 42]), 'red' ); 

व्यवहार

अगला भाग LibCanvas.Behaviors.* । उनमें से प्रत्येक सिर्फ एक प्रशंसा है जो आपकी कक्षा में विशिष्ट कार्यक्षमता या व्यवहार जोड़ता है। उदाहरण के लिए, Animatable एक animate विधि जोड़ता है जो आपको किसी वस्तु के गुणों को सुचारू रूप से बदलने की अनुमति देता है, जबकि ड्राएबल आपके वर्ग की वस्तुओं को रेंडरिंग के लिए एक LibCanvas ऑब्जेक्ट में जोड़ने की अनुमति देता है।

वैसे, यह ड्राबल है जो लिबकनवास में प्रस्तुत करने का आधार है। ड्राएबल और आकार का मिश्रण। * आपको कैनवास पर किसी भी आकृति को आकर्षित करने की अनुमति देता है, और अन्य व्यवहारों को जोड़ने से यह आकार अतिरिक्त कार्यक्षमता देगा।

 var Item = atom.Class({ Implements: [ Drawable, Draggable ], initialize: function (shape) { this.shape = shape; }, draw: function () { this.libcanvas.ctx.stroke( this.shape, 'red' ); } }); libcanvas.addElement( new Item( new Rectangle(50, 50, 100, 100) ).draggable() ); 

वास्तव में - ड्राइंग आकृतियों के लिए एक समान पैटर्न अक्सर बनाया जाना था, क्योंकि Ui.Shaper पहले ही लागू किया जा चुका है:

 libcanvas.createShaper({ shape : new Rectangle(50, 50, 100, 100), stroke: 'red' }).draggable(); 

कीबोर्ड और माउस

कीबोर्ड के साथ काम करना काफी सरल है। एप्लिकेशन को प्रारंभ करते समय libcanvas.listenKeyboard() विधि को कॉल करना पर्याप्त है, और यदि आप कुंजी की स्थिति का पता लगाने के लिए libcanvas.getKey( keyName ) विधि का उपयोग कर सकते हैं:

 update: function () { if( this.libcanvas.getKey('aup') ) { this.move(); } } 

माउस के साथ काम इसके लायक है। सबसे पहले, यदि आप अपने आवेदन में माउस का उपयोग करना चाहते हैं, तो libcanvas.listenMouse() विधि को कॉल करना सुनिश्चित करें। अनुकूलन करने के लिए, माउस की घटनाओं का विश्लेषण तब तक नहीं किया जाता है जब तक कि इसे कहा नहीं जाता है, क्योंकि ऐसे अनुप्रयोग हैं जिन्हें माउस की आवश्यकता नहीं है। उसके बाद, आप माउस ऑब्जेक्ट में एक तत्व जोड़कर आसानी से माउस घटनाओं की सदस्यता ले सकते हैं:

 this.libcanvas.mouse.subscribe( element ); 

यह महत्वपूर्ण है कि तत्व के आकार की संपत्ति का मूल्य आकार ( LibCanvas.Shapes.* ) में से एक है, ZIndex संपत्ति, और यह atom.Class.Events वर्ग को लागू करता है। व्यवहार में, यह सब व्यवहार के पीछे छिपा हुआ है और जब आप कॉल करते हैं, उदाहरण के लिए, Draggable व्यवहार का draggable() तरीका, ऑब्जेक्ट स्वचालित रूप से माउस ईवेंट की सदस्यता लेता है। यदि आपको केवल माउस घटनाओं को सुनने की आवश्यकता है, तो बस MouseListener व्यवहार को लागू करें और तत्व listenMouse विधि listenMouse कॉल करें। फिर भी, मुख्य बिंदु अभी भी बना हुआ है - तत्व के अंदर कुछ आकार के साथ Shape गुण होना चाहिए। जब आपकी वस्तु पर माउस की घटनाओं को सुना जाता है, तो आप निम्नलिखित में से किसी भी घटना की सदस्यता ले सकते हैं:

 /* - click - mouseover - mousemove - mouseout - mouseup - mousedown - away:mouseover - away:mousemove - away:mouseout - away:mouseup - away:mousedown */ // : element .listenMouse() .addEvent('click', function () { alert('element clicked'); }); 

निष्कर्ष

मैंने यहाँ LibCanvas पर विकास के सैद्धांतिक भाग की मूल बातें बताई हैं। यह कई दिलचस्प अवसरों और सिद्धांतों को प्रकट नहीं करता है, लेकिन इसका उद्देश्य विचारधारा की व्याख्या करना और पाठक को यह दिखाना है कि कहां से शुरू करना है।

अगले लेख का विषय LibCanvas पर विकास का व्यावहारिक हिस्सा है ।