कैनवस फ्रेमवर्क बनाना: ऑब्जेक्ट और माउस

कैनवस के बारे में सवालों के बीच , सबसे अक्सर पूछे जाने वाले प्रश्न चौखटे के आंतरिक के बारे में थे - कैसे समझें कि माउस तत्व से ऊपर है, क्योंकि यह फ्रेमवर्क में लागू किया गया है। विषय में, हम AtomJS पर आधारित एक समान कैनवस ढांचे को लागू कर रहे हैं।

वैश्विक इंटरफ़ेस

पहले, चलो हमारे ढांचे के इंटरफेस के साथ आते हैं। चलो इसे कैनवस फ्रेमवर्क कहते हैं, शॉर्ट के लिए - सीएफ। यह तात्कालिकता के लिए वैश्विक कारखाना चर होगा।
पहला तर्क हम इसमें पास करेंगे जो वांछित तत्व का लिंक है:

var cf = new CF('#my-canvas'); 

कार्यान्वयन सरल है:

 window.CF = atom.Class({ initialize: function (canvas) { this.canvas = atom.dom( canvas ).first; this.ctx = this.canvas.getContext('2d'); } }); 

तब हम इस इकाई का उपयोग करके ऑब्जेक्ट बना सकते हैं:

 cf.circle([50, 50, 10] , { fill: 'red' , hover : { fill: 'blue' } }); cf.rect ([10, 10, 20, 20], { fill: 'green', hover : { fill: 'blue' } }); 

सरलता के लिए, सभी वस्तुओं को खींच लिया जाएगा और माउस घटनाओं को सुनेंगे।

आंकड़ों का कार्यान्वयन

अब हमें आंकड़े के आधार वर्ग को परिभाषित करने की आवश्यकता है।

 //    var Shape = atom.Class({ Implements: [ atom.Class.Events, atom.Class.Options ], cf : null, data : null, hover: false, path: atom.Class.abstractMethod, initialize: function (data, options) { this.data = data; this.setOptions( options ); }, hasPoint: function (x, y) { var ctx = this.cf.emptyCanvas.ctx; this.path( ctx ); return ctx.isPointInPath(x, y); }, draw: function () { var ctx = this.cf.ctx, o = this.options; this.path( ctx ); ctx.save(); ctx.fillStyle = this.hover ? o.hover.fill : o.fill; ctx.fill(); ctx.restore(); } }); 

आप देखते हैं कि हमें कुछ खाली जगहों की आवश्यकता होगी - यह एक छिपा हुआ कैनवस होगा, जिसमें हम अपने रास्तों को आकर्षित करेंगे ताकि "लड़ाई" कैनवास के मार्गों का उल्लंघन न हो। सीएफ निर्माता को अपडेट करें:

 window.CF = atom.Class({ initialize: function (canvas) { [...] this.emptyCanvas = atom.dom.create( 'canvas', { width: 1, height: 1 }).first; this.emptyCanvas.ctx = this.emptyCanvas.getContext('2d'); } }); 

प्रत्येक अंतर्निहित आकृति को केवल पथ विधि को लागू करना होगा। आइए कुछ आकृतियों को जोड़ते हैं - आयत और वृत्त।

 // circle.data == [x, y, radius] var Circle = atom.Class({ Extends: Shape, path: function (ctx) { ctx.beginPath(); ctx.arc( this.data[0], this.data[1], this.data[2], 0, Math.PI * 2, false ); ctx.closePath(); } }); var Rect = atom.Class({ Extends: Shape, path: function (ctx) { ctx.beginPath(); ctx.rect.apply( ctx, this.data ); ctx.closePath(); } }); 

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

 var Mouse = atom.Class({ x: 0, y: 0, initialize: function (canvas) { this.elements = []; canvas.bind({ mousemove: this.move.bind(this), mousedown: this.fire.bind(this, 'mousedown'), mouseup: this.fire.bind(this, 'mouseup' ) }); }, add: function (element) { this.elements.push( element ); }, move: function (e) { //   layer*,        if (e.layerX == null) { // opera this.x = e.offsetX; this.y = e.offsetY; } else { // fx, chrome this.x = e.layerX; this.y = e.layerY; } this.elements.forEach(function (el) { el[i].hover = el[i].hasPoint(this.x, this.y) }.bind(this)); }, fire: function (name, e) { this.elements.forEach(function (el) { if (el.hasPoint(this.x, this.y)) { el.fireEvent(name, e); } }.bind(this)); } }); //    : window.CF = atom.Class({ initialize: function (canvas) { [...] this.mouse = new Mouse( this.canvas ); } }); 

अब आपको एक कैनवास अपडेट की आवश्यकता है।

 window.CF = atom.Class({ initialize: function (canvas) { [...] // 25 fps this.update.periodical( 1000/25, this ); }, update: function (shapes) { this.ctx.clearRect(0,0,this.canvas.width, this.canvas.height); this.elements.invoke('draw'); } }); 

हम अपनी वैश्विक वस्तु को संपादित करते हैं ताकि हम तत्व बना सकें:

 window.CF = atom.Class({ [...], elements: [], _shape: function (Class, args) { var e = new Class(args[0], args[1]); this.mouse.add( e ); this.elements.push( e ); e.cf = this; return e; }, circle: function (data, options) { return this._shape(Circle, arguments); }, rect: function (data, options) { return this._shape(Rect, arguments); } }) 

सभी, हम अपना आवेदन बनाते हैं:

 var write = function (msg) { atom.dom.create('p').text(msg).appendTo('body'); }; var cf = new CF('canvas'); cf.circle([50, 50, 10] , { fill: 'red' , hover : { fill: 'blue' } }) .addEvent('mousedown', write.bind( window, 'circle mousedown' )); cf.rect ([10, 10, 20, 20], { fill: 'green', hover : { fill: 'blue' } }) .addEvent('mousedown', write.bind( window, 'rect mousedown' )); 

परिणाम

निष्कर्ष

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

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

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