एचटीएमएल 5 कैनवस के साथ एक विज़ुअल इमेज लाइब्रेरी कैसे बनाएं

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

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

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

• आवेदन अवलोकन
• उपकरण
• एचटीएमएल 5 पेज
• डेटा पुनर्प्राप्ति
• मैप लोडिंग और कैश हैंडलिंग
• नक्शा प्रदर्शन
• माउस नियंत्रण
• राज्य संरक्षण
• एनीमेशन
• विभिन्न उपकरणों के साथ काम करें
• निष्कर्ष

आवेदन अवलोकन

हम एक आवेदन करेंगे जो हमें मैजिक द गैदरिंग © मानचित्र संग्रह प्रदर्शित करने की अनुमति देता है। माउस का उपयोग करते समय स्क्रॉलिंग और ज़ूम उपयोगकर्ताओं के लिए उपलब्ध होगा (उदाहरण के लिए, बिंग मैप्स में)।



तैयार आवेदन यहां देखा जा सकता है: bolaslenses.catuhe.com
सूत्र यहां से डाउनलोड किए जा सकते हैं: www.catuhe.com/msdn/bolaslenses.zip

मैप्स विंडोज एज़्योर स्टोरेज में स्टोर किए जाते हैं और अधिकतम प्रदर्शन के लिए एज़्योर कंटेंट डिस्ट्रीब्यूशन नेटवर्क ( सीडीएन : एक सर्विस जो एंड यूजर्स को डेटा प्रदान करती है) का उपयोग करते हैं। ASP.NET सेवा का उपयोग मानचित्रों की सूची ( JSON प्रारूप का उपयोग करके) करने के लिए किया जाता है।

उपकरण

हमारे आवेदन को लिखने के लिए, हम वेब मानक अपडेट के साथ विजुअल स्टूडियो 2010 SP1 का उपयोग करेंगे। यह एक्सटेंशन HTML5 पेज के लिए IntelliSense समर्थन जोड़ता है (यह वास्तव में महत्वपूर्ण बात है)।
हमारे समाधान में .js फ़ाइलों के साथ एक HTML5 पेज होगा। डिबगिंग के बारे में: विजुअल स्टूडियो आपको ब्रेकपॉइंट सेट करने और उनके साथ सीधे अपने वातावरण में काम करने की अनुमति देता है।


दृश्य स्टूडियो 2010 में डिबगिंग

और इसलिए हमारे पास IntelliSense और डिबगिंग समर्थन के साथ एक आधुनिक विकास का माहौल है। इसलिए, हम शुरू करने के लिए तैयार हैं, और शुरू करने के लिए, हम एक HTML5 पेज लिखेंगे।

HTML5 पेज

हमारा पेज HTML5 कैनवस के आसपास बनाया जाएगा, जिसका उपयोग हम नक्शे: कोड बनाने में करेंगे

यदि हम अपने पृष्ठ को देखते हैं, तो हम देख सकते हैं कि यह 2 भागों में विभाजित है:

• शीर्षक, लोगो और विशेष लिंक के साथ शीर्षक
• कैनवास तत्व और टूलटिप्स युक्त मुख्य भाग जो एप्लिकेशन की स्थिति प्रदर्शित करेगा। और एक छिपी हुई छवि (बैकइमेज) नक्शे के लिए एक स्रोत के रूप में उपयोग की जाती है जो अभी तक लोड नहीं हुई है।

हमने एक स्टाइलशीट भी भरी । इस प्रकार हमें निम्नलिखित पृष्ठ मिला:



शैलियाँ एक शक्तिशाली उपकरण है जो आपको अनंत संख्या में मैपिंग बनाने की अनुमति देता है।

हमारा इंटरफ़ेस अब तैयार है और हम देख सकते हैं कि डिस्प्ले के लिए मैप डेटा कैसे प्राप्त किया जाए।

डेटा पुनर्प्राप्ति

सर्वर निम्नलिखित लिंक पर JSON प्रारूप का उपयोग करते हुए मानचित्रों की एक सूची प्रदान करता है:
bolaslenses.catuhe.com/Home/ListOfCards/?colorString=0
वांछित रंग (0 = सभी) का चयन करने के लिए URL एक पैरामीटर (colorString) लेता है।
जावास्क्रिप्ट के साथ विकसित करते समय, यह देखना अच्छा होगा कि आज हमारे पास क्या है (यह अन्य प्रोग्रामिंग भाषाओं के लिए सही है, लेकिन यह जावास्क्रिप्ट के लिए बहुत महत्वपूर्ण है): आपको खुद से पूछना चाहिए कि क्या हम विकसित करने जा रहे थे, तो क्या नहीं था पहले से ही मौजूदा रूपरेखाओं में बनाया गया है?
वास्तव में, दुनिया में कई ओपन सोर्स जावास्क्रिप्ट प्रोजेक्ट हैं। उनमें से एक jQuery है , जो काम की सुविधाओं की एक बहुतायत प्रदान करता है।
इस प्रकार, हमारे मामले में, हमारे सर्वर के URL से जुड़ने और नक्शे की एक सूची प्राप्त करने के लिए, हम XmlHttpRequest का उपयोग कर सकते हैं और लौटे JSON के पार्स के साथ मज़े कर सकते हैं। या हम jQuery का उपयोग कर सकते हैं।
हम getJSON फ़ंक्शन का उपयोग करेंगे, जो हमारे लिए सब कुछ का ख्याल रखता है:

function getListOfCards() { var url = "http://bolaslenses.catuhe.com/Home/ListOfCards/?jsoncallback=?"; $.getJSON(url, { colorString: "0" }, function (data) { listOfCards = data; $("#cardsCount").text(listOfCards.length + " cards displayed"); $("#waitText").slideToggle("fast"); }); } 

जैसा कि हम देख सकते हैं, हमारा कार्य चर सूची में नक्शे की सूची को बचाता है।

• पाठ - टैग का पाठ बदलता है
• स्लाइडटॉगल - अपनी ऊंचाई को एनिमेट करके एक टैग को छुपाता / दिखाता है

सूचीऑफकार्ड्स सूची में प्रारूप में ऑब्जेक्ट शामिल हैं:

• आईडी : कार्ड आईडी
• पथ : सापेक्ष मानचित्र पथ (कोई एक्सटेंशन नहीं)

यह ध्यान दिया जाना चाहिए कि सर्वर URL को "Jsoncallback =?" प्रत्यय के साथ कहा जाता है। अजाक्स कॉल को उसी स्क्रिप्ट से कनेक्ट करने की सुरक्षा द्वारा सीमित किया जाता है जिसे तथाकथित स्क्रिप्ट कहा जाता है। हालाँकि, JSONP नामक एक समाधान है जो हमें सर्वर पर संयुक्त कॉल करने की अनुमति देगा। और सौभाग्य से, jQuery सब कुछ अकेले संभाल सकता है, आपको केवल सही प्रत्यय जोड़ने की आवश्यकता है।
जैसे ही हमें हमारे कार्ड की सूची मिलती है, हम छवियों के लोडिंग और कैशिंग को कॉन्फ़िगर कर सकते हैं।

मैप लोडिंग और कैश हैंडलिंग

स्क्रीन पर दिखाई देने वाले कार्डों को केवल ड्राइंग में हमारे आवेदन की मुख्य चाल है। प्रदर्शन विंडो पूरे सिस्टम के ज़ूम स्तर और इंडेंट (x, y) द्वारा निर्धारित की जाती है।

var visuControl = { zoom : 0.25, offsetX : 0, offsetY : 0 };



पूरी प्रणाली को 14,819 कार्डों द्वारा परिभाषित किया गया है, जिन्हें 200 से अधिक कॉलम और 75 लाइनों में वितरित किया गया है।
हमें यह भी पता होना चाहिए कि प्रत्येक कार्ड तीन संस्करणों में उपलब्ध है:

• उच्च संकल्प: 480x680 संपीड़न के बिना (.jpg प्रत्यय)
• मध्यम संकल्प: मानक संपीड़न के साथ 240x340 (.50.jpg प्रत्यय)
• कम संकल्प: 120x170 मजबूत संपीड़न के साथ (.25.jpg प्रत्यय)

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

  function imageCache(substr, replacementCache) { var extension = substr; var backImage = document.getElementById("backImage"); this.load = function (card) { var localCache = this; if (this[card.ID] != undefined) return; var img = new Image(); localCache[card.ID] = { image: img, isLoaded: false }; currentDownloads++; img.onload = function () { localCache[card.ID].isLoaded = true; currentDownloads--; }; img.onerror = function() { currentDownloads--; }; img.src = "http://az30809.vo.msecnd.net/" + card.Path + extension; }; this.getReplacementFromLowerCache = function (card) { if (replacementCache == undefined) return backImage; return replacementCache.getImageForCard(card); }; this.getImageForCard = function(card) { var img; if (this[card.ID] == undefined) { this.load(card); img = this.getReplacementFromLowerCache(card); } else { if (this[card.ID].isLoaded) img = this[card.ID].image; else img = this.getReplacementFromLowerCache(card); } return img; }; } 

ImageCache प्रत्यय और वांछित कैश देता है।
यहाँ 2 महत्वपूर्ण विशेषताएं हैं:

• लोड : यह फ़ंक्शन वांछित छवि को लोड करेगा और इसे कैश में बचाएगा ( msecnd.net url Azure CDN में मैप का पता है)
• getImageForCard : यह फ़ंक्शन कैश से एक चित्र लौटाता है यदि इसे पहले ही डाउनलोड किया जा चुका है या किसी नए पर लोड करता है, तो इसे कैश में डालता है

3 कैश स्तरों को संसाधित करने के लिए, हम 3 चर घोषित करेंगे:

  var imagesCache25 = new imageCache(".25.jpg"); var imagesCache50 = new imageCache(".50.jpg", imagesCache25); var imagesCacheFull = new imageCache(".jpg", imagesCache50); 

सही कैश चुनना ज़ूम पर निर्भर करता है:

  function getCorrectImageCache() { if (visuControl.zoom <= 0.25) return imagesCache25; if (visuControl.zoom <= 0.8) return imagesCache50; return imagesCacheFull; } 

उपयोगकर्ता प्रतिक्रिया के लिए, हम एक टाइमर जोड़ेंगे जो एक टूलटिप को नियंत्रित करेगा जो पहले से लोड की गई तस्वीरों की संख्या प्रदर्शित करता है:

  function updateStats() { var stats = $("#stats"); stats.html(currentDownloads + " card(s) currently downloaded."); if (currentDownloads == 0 && statsVisible) { statsVisible = false; stats.slideToggle("fast"); } else if (currentDownloads > 1 && !statsVisible) { statsVisible = true; stats.slideToggle("fast"); } } setInterval(updateStats, 200); 

नोट: एनीमेशन को सरल बनाने के लिए jQuery का उपयोग करना बेहतर है।
अब हम मानचित्र प्रदर्शन पर चलते हैं।

नक्शा प्रदर्शन

हमारे नक्शे खींचने के लिए, हमें इसके 2D संदर्भ का उपयोग करके कैनवास तत्व को भरने की आवश्यकता है (जो केवल तभी मौजूद है जब ब्राउज़र HTML5 कैनवास का समर्थन करता है):

  var mainCanvas = document.getElementById("mainCanvas"); var drawingContext = mainCanvas.getContext('2d'); 

ड्राइंग प्रक्रिया द्वारा प्रदर्शन किया जाएगा ListOfCards समारोह (प्रति सेकंड 60 बार कहा जाता है):

  function processListOfCards() { if (listOfCards == undefined) { drawWaitMessage(); return; } mainCanvas.width = document.getElementById("center").clientWidth; mainCanvas.height = document.getElementById("center").clientHeight; totalCards = listOfCards.length; var localCardWidth = cardWidth * visuControl.zoom; var localCardHeight = cardHeight * visuControl.zoom; var effectiveTotalCardsInWidth = colsCount * localCardWidth; var rowsCount = Math.ceil(totalCards / colsCount); var effectiveTotalCardsInHeight = rowsCount * localCardHeight; initialX = (mainCanvas.width - effectiveTotalCardsInWidth) / 2.0 - localCardWidth / 2.0; initialY = (mainCanvas.height - effectiveTotalCardsInHeight) / 2.0 - localCardHeight / 2.0; // Clear clearCanvas(); // Computing of the viewing area var initialOffsetX = initialX + visuControl.offsetX * visuControl.zoom; var initialOffsetY = initialY + visuControl.offsetY * visuControl.zoom; var startX = Math.max(Math.floor(-initialOffsetX / localCardWidth) - 1, 0); var startY = Math.max(Math.floor(-initialOffsetY / localCardHeight) - 1, 0); var endX = Math.min(startX + Math.floor((mainCanvas.width - initialOffsetX - startX * localCardWidth) / localCardWidth) + 1, colsCount); var endY = Math.min(startY + Math.floor((mainCanvas.height - initialOffsetY - startY * localCardHeight) / localCardHeight) + 1, rowsCount); // Getting current cache var imageCache = getCorrectImageCache(); // Render for (var y = startY; y < endY; y++) { for (var x = startX; x < endX; x++) { var localX = x * localCardWidth + initialOffsetX; var localY = y * localCardHeight + initialOffsetY; // Clip if (localX > mainCanvas.width) continue; if (localY > mainCanvas.height) continue; if (localX + localCardWidth < 0) continue; if (localY + localCardHeight < 0) continue; var card = listOfCards[x + y * colsCount]; if (card == undefined) continue; // Get from cache var img = imageCache.getImageForCard(card); // Render try { if (img != undefined) drawingContext.drawImage(img, localX, localY, localCardWidth, localCardHeight); } catch (e) { $.grep(listOfCards, function (item) { return item.image != img; }); } } }; // Scroll bars drawScrollBars(effectiveTotalCardsInWidth, effectiveTotalCardsInHeight, initialOffsetX, initialOffsetY); // FPS computeFPS(); } 

यह सुविधा कई प्रमुख बिंदुओं के आसपास बनाई गई है:

• यदि नक्शे की सूची अभी तक लोड नहीं की गई है, तो हम संकेत देते हैं कि लोडिंग अभी भी जारी है:

  var pointCount = 0; function drawWaitMessage() { pointCount++; if (pointCount > 200) pointCount = 0; var points = ""; for (var index = 0; index < pointCount / 10; index++) points += "."; $("#waitText").html("Loading...Please wait<br>" + points); } 

• इसके बाद, हम डिस्प्ले विंडो (नक्शे और निर्देशांक के संदर्भ में) की स्थिति निर्धारित करते हैं, फिर हम कैनवास को साफ करते हैं:

  function clearCanvas() { mainCanvas.width = document.body.clientWidth - 50; mainCanvas.height = document.body.clientHeight - 140; drawingContext.fillStyle = "rgb(0, 0, 0)"; drawingContext.fillRect(0, 0, mainCanvas.width, mainCanvas.height); } 

• फिर हम नक्शे की एक सूची प्रदर्शित करते हैं और ड्राइमेज संदर्भ के कैनवास फ़ंक्शन को कॉल करते हैं। विशिष्ट छवि सक्रिय कैश (ज़ूम निर्भर) द्वारा प्रदान की जाती है:

  // Get from cache var img = imageCache.getImageForCard(card); // Render try { if (img != undefined) drawingContext.drawImage(img, localX, localY, localCardWidth, localCardHeight); } catch (e) { $.grep(listOfCards, function (item) { return item.image != img; }); 

• हमें RoundedRectangle फ़ंक्शन का उपयोग करके एक स्क्रॉल बार आकर्षित करने की आवश्यकता है, जो द्विघात घटता का उपयोग करता है:

  function roundedRectangle(x, y, width, height, radius) { drawingContext.beginPath(); drawingContext.moveTo(x + radius, y); drawingContext.lineTo(x + width - radius, y); drawingContext.quadraticCurveTo(x + width, y, x + width, y + radius); drawingContext.lineTo(x + width, y + height - radius); drawingContext.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); drawingContext.lineTo(x + radius, y + height); drawingContext.quadraticCurveTo(x, y + height, x, y + height - radius); drawingContext.lineTo(x, y + radius); drawingContext.quadraticCurveTo(x, y, x + radius, y); drawingContext.closePath(); drawingContext.stroke(); drawingContext.fill(); } function drawScrollBars(effectiveTotalCardsInWidth, effectiveTotalCardsInHeight, initialOffsetX, initialOffsetY) { drawingContext.fillStyle = "rgba(255, 255, 255, 0.6)"; drawingContext.lineWidth = 2; // Vertical var totalScrollHeight = effectiveTotalCardsInHeight + mainCanvas.height; var scaleHeight = mainCanvas.height - 20; var scrollHeight = mainCanvas.height / totalScrollHeight; var scrollStartY = (-initialOffsetY + mainCanvas.height * 0.5) / totalScrollHeight; roundedRectangle(mainCanvas.width - 8, scrollStartY * scaleHeight + 10, 5, scrollHeight * scaleHeight, 4); // Horizontal var totalScrollWidth = effectiveTotalCardsInWidth + mainCanvas.width; var scaleWidth = mainCanvas.width - 20; var scrollWidth = mainCanvas.width / totalScrollWidth; var scrollStartX = (-initialOffsetX + mainCanvas.width * 0.5) / totalScrollWidth; roundedRectangle(scrollStartX * scaleWidth + 10, mainCanvas.height - 8, scrollWidth * scaleWidth, 5, 4); } 

• अंत में, हमें प्रति सेकंड फ्रेम की संख्या की गणना करने की आवश्यकता है:

  function computeFPS() { if (previous.length > 60) { previous.splice(0, 1); } var start = (new Date).getTime(); previous.push(start); var sum = 0; for (var id = 0; id < previous.length - 1; id++) { sum += previous[id + 1] - previous[id]; } var diff = 1000.0 / (sum / previous.length); $("#cardsCount").text(diff.toFixed() + " fps. " + listOfCards.length + " cards displayed"); } 

ड्राइंग मैप मुख्य रूप से कैनवास तत्व के प्रतिपादन को गति देने के लिए ब्राउज़र की क्षमता पर निर्भर करता है। उदाहरण के लिए, यह न्यूनतम ज़ूम स्तर (0.05) के साथ मेरी मशीन पर प्रदर्शन है:

ब्राउज़र	एफपीएस
इंटरनेट एक्सप्लोरर 9	30
फ़ायरफ़ॉक्स ५	30
क्रोम 12	17
iPad (ज़ूम स्तर 0.8 पर)	7
विंडोज फोन मैंगो (ज़ूम स्तर 0.8 पर)	20 (!!)

यदि वे HTML5 का समर्थन करते हैं तो साइट मोबाइल फोन और टैबलेट पर भी काम करती है।

यहां हम एचटीएमएल 5 ब्राउज़रों की आंतरिक शक्ति देख सकते हैं जो प्रति सेकंड 30 से अधिक बार पूर्ण-स्क्रीन नक्शे को संभाल सकते हैं। यह हार्डवेयर त्वरण के साथ संभव है।

माउस नियंत्रण

हमारे कार्डों के संग्रह के सामान्य देखने के लिए, हमें माउस (पहिया सहित) को नियंत्रित करने में सक्षम होना चाहिए।
स्क्रॉल करने के लिए, हम बस ऑनमाउवमोव, ऑनमाउसअप और ऑनमोसडाउन इवेंट को प्रोसेस करते हैं।

माउस क्लिक पर नज़र रखने के लिए ऑनमाउसअप और ऑनमोसडाउन ईवेंट का उपयोग किया जाएगा:

  var mouseDown = 0; document.body.onmousedown = function (e) { mouseDown = 1; getMousePosition(e); previousX = posx; previousY = posy; }; document.body.onmouseup = function () { mouseDown = 0; }; 

Onmousemove घटना कैनवास तत्व से जुड़ी है और इसका उपयोग दृश्य को स्थानांतरित करने के लिए किया जाता है:

  var previousX = 0; var previousY = 0; var posx = 0; var posy = 0; function getMousePosition(eventArgs) { var e; if (!eventArgs) e = window.event; else { e = eventArgs; } if (e.offsetX || e.offsetY) { posx = e.offsetX; posy = e.offsetY; } else if (e.clientX || e.clientY) { posx = e.clientX; posy = e.clientY; } } function onMouseMove(e) { if (!mouseDown) return; getMousePosition(e); mouseMoveFunc(posx, posy, previousX, previousY); previousX = posx; previousY = posy; } 

यह फ़ंक्शन (onMouseMove) वर्तमान स्थिति की गणना करता है और पिछले मूल्य प्रदान करता है यदि डिस्प्ले विंडो की शिफ्ट को स्थानांतरित किया जाता है:

  function Move(posx, posy, previousX, previousY) { currentAddX = (posx - previousX) / visuControl.zoom; currentAddY = (posy - previousY) / visuControl.zoom; } MouseHelper.registerMouseMove(mainCanvas, Move); 

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

  function wheel(event) { var delta = 0; if (event.wheelDelta) { delta = event.wheelDelta / 120; if (window.opera) delta = -delta; } else if (event.detail) { /** Mozilla case. */ delta = -event.detail / 3; } if (delta) { wheelFunc(delta); } if (event.preventDefault) event.preventDefault(); event.returnValue = false; } 

इवेंट लॉग फ़ंक्शन:

  MouseHelper.registerWheel = function (func) { wheelFunc = func; if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel; }; //  MouseHelper.registerWheel(function (delta) { currentAddZoom += delta / 500.0; }); 

अंत में, हम चिकनेपन की अनुभूति देने के लिए माउस को स्थानांतरित करते समय (या ज़ूम के दौरान) थोड़ी सी जड़ता जोड़ते हैं:

  //  var inertia = 0.92; var currentAddX = 0; var currentAddY = 0; var currentAddZoom = 0; function doInertia() { visuControl.offsetX += currentAddX; visuControl.offsetY += currentAddY; visuControl.zoom += currentAddZoom; var effectiveTotalCardsInWidth = colsCount * cardWidth; var rowsCount = Math.ceil(totalCards / colsCount); var effectiveTotalCardsInHeight = rowsCount * cardHeight var maxOffsetX = effectiveTotalCardsInWidth / 2.0; var maxOffsetY = effectiveTotalCardsInHeight / 2.0; if (visuControl.offsetX < -maxOffsetX + cardWidth) visuControl.offsetX = -maxOffsetX + cardWidth; else if (visuControl.offsetX > maxOffsetX) visuControl.offsetX = maxOffsetX; if (visuControl.offsetY < -maxOffsetY + cardHeight) visuControl.offsetY = -maxOffsetY + cardHeight; else if (visuControl.offsetY > maxOffsetY) visuControl.offsetY = maxOffsetY; if (visuControl.zoom < 0.05) visuControl.zoom = 0.05; else if (visuControl.zoom > 1) visuControl.zoom = 1; processListOfCards(); currentAddX *= inertia; currentAddY *= inertia; currentAddZoom *= inertia; // Epsilon if (Math.abs(currentAddX) < 0.001) currentAddX = 0; if (Math.abs(currentAddY) < 0.001) currentAddY = 0; } 

इस तरह के एक छोटे से कार्य को लागू करना मुश्किल नहीं है, लेकिन यह उपयोगकर्ता के साथ काम की गुणवत्ता में सुधार करेगा।

राज्य संरक्षण

साथ ही, देखने को अधिक सुविधाजनक बनाने के लिए, हम डिस्प्ले विंडो और ज़ूम की स्थिति को बनाए रखेंगे। ऐसा करने के लिए, हम लोकलस्टोरेज सेवा का उपयोग करते हैं, जो लंबे समय तक कुंजी / मान जोड़े को बचाता है (ब्राउज़र को बंद करने के बाद डेटा सहेजा जाता है) और केवल वर्तमान विंडो ऑब्जेक्ट के लिए उपलब्ध है:

  function saveConfig() { if (window.localStorage == undefined) return; // Zoom window.localStorage["zoom"] = visuControl.zoom; // Offsets window.localStorage["offsetX"] = visuControl.offsetX; window.localStorage["offsetY"] = visuControl.offsetY; } // Restore data if (window.localStorage != undefined) { var storedZoom = window.localStorage["zoom"]; if (storedZoom != undefined) visuControl.zoom = parseFloat(storedZoom); var storedoffsetX = window.localStorage["offsetX"]; if (storedoffsetX != undefined) visuControl.offsetX = parseFloat(storedoffsetX); var storedoffsetY = window.localStorage["offsetY"]; if (storedoffsetY != undefined) visuControl.offsetY = parseFloat(storedoffsetY); } 

एनीमेशन

हमारे एप्लिकेशन में अधिक गतिशीलता जोड़ने के लिए, हम अपने उपयोगकर्ताओं को ज़ूम के लिए मानचित्र पर डबल-क्लिक करने और उस पर ध्यान केंद्रित करने की अनुमति देते हैं।

हमारे सिस्टम को 3 मानों को चेतन करना चाहिए: दो इंडेंट (ऑफ़सेट्स (एक्स, वाई)) और ज़ूम। ऐसा करने के लिए, हम एक फ़ंक्शन का उपयोग करते हैं जो एक निश्चित अवधि के साथ स्रोत से अंतिम मूल्य तक चर को एनिमेट करने के लिए जिम्मेदार होगा:

  var AnimationHelper = function (root, name) { var paramName = name; this.animate = function (current, to, duration) { var offset = (to - current); var ticks = Math.floor(duration / 16); var offsetPart = offset / ticks; var ticksCount = 0; var intervalID = setInterval(function () { current += offsetPart; root[paramName] = current; ticksCount++; if (ticksCount == ticks) { clearInterval(intervalID); root[paramName] = to; } }, 16); }; }; 

समारोह उपयोग:

  //    var zoomAnimationHelper = new AnimationHelper(visuControl, "zoom"); var offsetXAnimationHelper = new AnimationHelper(visuControl, "offsetX"); var offsetYAnimationHelper = new AnimationHelper(visuControl, "offsetY"); var speed = 1.1 - visuControl.zoom; zoomAnimationHelper.animate(visuControl.zoom, 1.0, 1000 * speed); offsetXAnimationHelper.animate(visuControl.offsetX, targetOffsetX, 1000 * speed); offsetYAnimationHelper.animate(visuControl.offsetY, targetOffsetY, 1000 * speed); 

एनिमेशनहेल्पर का लाभ यह है कि यह आपके जितने मापदंडों को पसंद करता है, उतने में सक्षम है।

विभिन्न उपकरणों के साथ काम करें

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

  <link href="Content/full.css" rel="stylesheet" type="text/css" /> <link href="Content/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" /> <link href="Content/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" /> 

यहाँ हम देखते हैं कि यदि स्क्रीन की चौड़ाई 480 पिक्सेल से कम है, तो निम्नलिखित शैली जोड़ी जाएगी:

  #legal { font-size: 8px; } #title { font-size: 30px !important; } #waitText { font-size: 12px; } #bolasLogo { width: 48px; height: 48px; } #pictureCell { width: 48px; } 

यह शैली शीर्षक के आकार को कम कर देगी और साइट को दृश्यमान बनाए रखेगी भले ही ब्राउज़र की चौड़ाई 480 पिक्सेल से कम हो (उदाहरण के लिए, आपके फ़ोन पर):

निष्कर्ष

एचटीएमएल 5 / सीएसएस 3 / जावास्क्रिप्ट और विजुअल स्टूडियो 2010 आपको कुछ बेहतरीन विशेषताओं जैसे हार्डवेयर त्वरित प्रतिपादन के साथ पोर्टेबल और कुशल समाधान (एचटीएमएल 5 का समर्थन करने वाले ब्राउज़र के भीतर) विकसित करने की अनुमति देता है।
JQuery जैसे चौखटे का उपयोग करके इस प्रकार के विकास को सरल बनाया गया है।

अंत में, मैं कहूंगा कि कुछ सुनिश्चित करने के लिए - आपको इसे आज़माने की ज़रूरत है!