कैनवस पर नक्शा

बहुत पहले नहीं, एक परियोजना के लिए एक नक्शा लिखना आवश्यक था जो निम्नलिखित आवश्यकताओं को पूरा करेगा:

• चिकनी स्क्रॉलिंग
• नक्शा क्षेत्रों लोड हो रहा है

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

नए संस्करण में, मैंने सभी त्रुटियों को ध्यान में रखा, और अंत में मैं यह सुनिश्चित करने में कामयाब रहा कि कार्ड बताई गई आवश्यकताओं को पूरा करता है।

ट्रेनिंग

मैं तैयारी के चरणों का वर्णन नहीं करूंगा, उन्हें पहले से ही हब पर कई बार वर्णित किया गया है, इसलिए मैं उन समस्याओं पर ध्यान दूंगा जहां मुझे समस्याएं थीं।
आधार, नक्शे का मूल, core.js फ़ाइल में निहित है, कैनवास के साथ काम करने के लिए मेरे पास एक अलग कैनवास है। js फ़ाइल।

मैप को इनिशियलाइज़ करने के लिए, index.html फ़ाइल में मैं एक ऑब्जेक्ट बनाता हूँ जिसमें मैं मैप के आकार और प्रारंभिक निर्देशांक को ट्रांसफर करता हूँ।

var map = new Zig.Map.Core($('body').width(), $('body').height(), 100, 100); map.addEventListener('change', function(data){ $('#coord').html(' : ' + data.x + ':' + data.y); }); 

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

मैं कैनवास की एक सरणी बनाता हूं, जहां पहले एक स्क्रीन पर मुख्य एक है, और बाकी सभी बफ़र हैं, बाद में मैं समझाऊंगा कि उनमें से बहुत सारे क्यों हैं।
आरंभीकरण के तुरंत बाद, कुछ निर्देशांक गोटो (x, y, कॉलबैक) में संक्रमण का कार्य कहा जाता है, जो अनुरोधित निर्देशांक के आसपास के मानचित्र क्षेत्र को लोड करता है।
इस तथ्य के कारण कि यह एक प्रोटोटाइप है, मैंने ajax द्वारा कार्ड की पूर्ण प्राप्ति नहीं की, इसे कुछ एनालॉग के साथ प्रतिस्थापित किया:

 _get_ajax_map : function(coords, callback) { setTimeout(function(){ //    var map = {}; for(var x = Math.min(coords.x1, coords.x2); x <= Math.max(coords.x1, coords.x2); x++) { for(var y = Math.min(coords.y1, coords.y2); y <= Math.max(coords.y1, coords.y2); y++) { if (typeof map[x] == 'undefined') { map[x] = {}; } if (x < 0 || y < 0) { //  (, , ,   ) map[x][y] = { image : null }; } else { map[x][y] = { image : 'img/' + (((y * 200 + x) % 7 + 2) + '.png') }; } } } callback && callback(map); }.bind(this), 0); } 

सेटटाइमआउट का उपयोग करके मैं एसिंक्रोनस रूप से एक प्रतिक्रिया प्राप्त करने का अनुकरण करता हूं।

प्रतिपादन

रेंडरिंग को कई भागों में विभाजित किया गया है, स्क्रीन पर बाद के रेंडरिंग कैनवस.जेएस और संबंधित मुख्य कार्य में होती है
सभी प्रकार की गणना core.js. में की जाती है।

 render : function(buffer, buffer2, mouse) { this._checkMoveMap(mouse); if (this._rebuild_buffer) { //   this._rebuild_buffer = false; this._rebuild_buffer2 = false; this._rebuildBuffer(buffer); this._rebuildBuffer2(buffer2); } else if (this._rebuild_buffer2) { this._rebuild_buffer2 = false; this._rebuildBuffer2(buffer2); } return this._options.pos.offset; } 

सबसे पहले, 2 बफ़र भरे जाते हैं, चर को सौंपा जाता है ।_rebuild_buffer = false; जो इंगित करता है कि में
अगले उपाय को बफर को अपडेट करने की आवश्यकता नहीं है।
यदि यह चर सत्य हो जाता है , तो बफर को अगले घड़ी चक्र में फिर से बनाया जाएगा। मैंने ऐसा इसलिए किया ताकि एक बार फिर से ब्राउज़र पर बोझ न पड़े
अनावश्यक काम।

इस फ़ंक्शन के निष्पादन का पुनर्निर्माण करने के बाद, मैं बस मुख्य बफर को साफ करता हूं और इसके ऊपर 2 बफ़र खींचता हूं, कुछ ऑफसेट के साथ जो मुझे प्रतिक्रिया में प्राप्त हुआ।

माउस इवेंट कैप्चर

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

इस तरह से मुझे स्क्रीन पर माउस की गति याद है:

 _move: function(e) { var x = e.offsetX || e.layerX, y = e.offsetY || e.layerY; this.diff.x += Math.abs(this.pos.x - x); this.diff.y += Math.abs(this.pos.y - y); if (this.pressed) { this._addToAction('drag', this.pos.x - x, this.pos.y - y); } else { this._action.move = {x : x, y : y}; } this.pos.x = x; this.pos.y = y; }, _addToAction : function(key, x, y) { if (typeof this._action[key] == 'undefined') { this._action[key] = {x : 0, y : 0}; } this._action[key].x += x; this._action[key].y += y; } 

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

 getAction : function() { var action = this._action; this._action = {}; return action; } 

कार्ड आंदोलन

पहला, थोड़ा सिद्धांत।
मेरे पास स्क्रीन पर एक कैनवास है, जिसके आयाम मैं आरंभीकरण के दौरान सेट करता हूं, और स्मृति में 3 और बफ़र्स भी हैं जो मुख्य बफर से दोगुना बड़े हैं।
यह कार्ड के मामूली आंदोलन पर बफर के पुनर्निर्माण के क्रम में नहीं किया जाता है। तो बफ़र्स एक मार्जिन के साथ बनाए जाते हैं, और सुरक्षित रूप से चारों ओर घूम सकते हैं।
उन्हें सही ढंग से रखने के लिए, मैं ऑफसेट का उपयोग करता हूं। यानी जहां मुख्य कैनवास में 0: 0 है, बफ़र्स का कुछ मान होगा, 512: 512।



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

 offset : { x : _ * 4, y : _ * 4 } 

वास्तव में, डिफ़ॉल्ट ऑफसेट लाल और पीले वर्गों के ऊपरी बाएं कोनों के बीच की दूरी के बराबर है।

जब नक्शा चलता है, मैं बस इन मूल्यों में एक डेल्टा जोड़ता हूं:

  this._options.pos.offset.x += act.drag.x; this._options.pos.offset.y += act.drag.y; 

और ऊपरी बाएँ वर्ग की स्थिति भी बदलें:

  this._options.pos.px.x += act.drag.x; this._options.pos.px.y += act.drag.y; 

यह इसलिए किया जाता है ताकि मैं हमेशा समस्याओं के बिना, यह पता लगाने में सक्षम हो जाऊं कि माउस किस वर्ग में बस इसे जोड़कर स्थित है
माउस समन्वय मूल्य।

इस तरह मुझे हमेशा पता है कि बफर कहाँ खींचना है ताकि दृश्य बिंदु अपने स्थानों पर बने रहें।

लेकिन, यदि आप कार्ड को बहुत दूर ले जाते हैं, तो बफर समाप्त हो जाएगा। और ऐसा होने से रोकने के लिए, आपको समय में बफर को अपडेट करने की आवश्यकता है, अर्थात। इसका पुनर्निर्माण करें
ताकि दिखाई देने वाली कोशिकाएं बाहरी रूप से बनी रहें।
और इसे प्राप्त करने के लिए, मैं न केवल ऑफसेट को डिफ़ॉल्ट मान प्रदान करता हूं, बल्कि यह पता लगाने के लिए सूत्र के अनुसार गणना भी करता हूं
कितना और किस दिशा में आपको विस्थापन के डिफ़ॉल्ट मूल्य को बदलने की आवश्यकता है, ताकि दृश्य कोशिकाएं जगह में रहें।
इसे स्पष्ट रूप से समझाने के लिए, आइए याद रखें कि, "कोने" से मैं मुख्य कैनवस-और के दृश्य ऊपरी बाएँ कोने को कॉल करूँगा
"स्क्वायर" - वह वर्ग जिससे "कोने" में स्थित बिंदु संबंधित है, अर्थात "कोने" के निर्देशांक इस "वर्ग" के अंदर हैं।

संभावना है कि "कोने" के निर्देशांक "वर्ग" के ऊपरी बाएं कोने के निर्देशांक के साथ मेल खाते हैं।
और इस संबंध में, हम केवल उन दोनों के बीच अंतर की गणना करते हैं, जिन्हें हम फिर डिफ़ॉल्ट ऑफसेट में जोड़ते हैं।

  this._options.pos.offset.x = w * 4 + (p.px.x - (xy.x + 4) * w); this._options.pos.offset.y = h * 4 + (p.px.y - (xy.y + 4) * h); 

जहाँ

• डब्ल्यू, एच - वर्ग की चौड़ाई और ऊंचाई
• p.px.x, p.px.y - पिक्सेल निर्देशांक जो मुख्य कैनवास के ऊपरी बाएँ कोने में स्थित हैं
• (xy.x + 4), (xy.y + 4) - कैनवास के ऊपरी बाएँ कोने को छूने वाले वर्ग के आंतरिक निर्देशांक

तीसरा बफ़र

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

निष्कर्ष

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

स्रोत कोड

BitBucket
डेमो