कैसे एक एनिमेटेड SVG स्पीडोमीटर बनाने के लिए

ए गेज मीटर एक ऐसा उपकरण है जो नेत्रहीन दिए गए रेंज के भीतर एक मूल्य को इंगित करता है। कंप्यूटर में, ए “डिस्क स्थान सूचक” गेज मीटर का उपयोग यह दिखाने के लिए करता है कि कुल उपलब्ध जगह से डिस्क स्थान कितना उपयोग किया जाता है। Gauges के क्षेत्र या क्षेत्र होते हैं, प्रत्येक अपने रंग से भिन्न होता है। फ्रंट-एंड डेवलपमेंट में, हम इसका उपयोग कर सकते हैं HTML5 टैग एक विशिष्ट सीमा के भीतर डेटा प्रदर्शित करने के लिए.

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

मीटर का है रेंज 0-100 है, और यह प्रदर्शित करता है तीन बराबर क्षेत्र पीले, नीले और लाल रंग में। आप अपनी ज़रूरतों के अनुसार ज़ोन की सीमा और संख्या बदल सकते हैं.

स्पष्टीकरण के प्रयोजनों के लिए, मैं मैन्युअल गणना करूँगा, और निम्न चरणों में इनलाइन एसवीजी विशेषताओं / गुणों का उपयोग करूँगा.

मेरा अंतिम डेमो, हालांकि, एसवीजी गुणों की गणना और सम्मिलन के लिए सीएसएस और जावास्क्रिप्ट का उपयोग करता है ताकि इसे और अधिक लचीला बनाया जा सके.

1. एक सर्कल बनाएं

एसवीजी में एक सरल सर्कल बनाएं। HTML5 का नया टैग हमें SVG को HTML कोड में जोड़ने की अनुमति देता है। के अंदर टैग, हम जोड़ते हैं एसवीजी आकार इस तरह:

CSS में, चलिए जोड़ते हैं चौड़ाई तथा ऊंचाई रैपर के गुण, जो सर्कल के व्यास से अधिक या बराबर हैं (यह हमारे उदाहरण में 300px है)। हमें इसकी चौड़ाई और ऊंचाई भी निर्धारित करनी होगी #मीटर तत्व 100%.

 # श्रावक चौड़ाई: ४०० पीएक्स; ऊंचाई: 400px;  # मीटर चौड़ाई: 100%; ऊंचाई: 100%; 

2. सर्कल में रूपरेखा जोड़ें और भरण निकालें

की मदद से आघात तथा रेखा की चौड़ाई एसवीजी गुण हम सर्कल के लिए एक रूपरेखा जोड़ते हैं, और का उपयोग करके भरने = "कोई नहीं" संपत्ति हम सर्कल के भरण को भी हटा देते हैं.

3. सर्कल के केवल आधे हिस्से को कवर करें

स्ट्रोक-dasharray एसवीजी संपत्ति एक धराशायी रूपरेखा बनाता है, और दो मान लेता है, पानी का छींटा लंबाई तथा अंतराल की लंबाई.

सेमी-सर्कल की रूपरेखा के लिए, पानी का छींटा लंबाई मूल्य की आवश्यकताएं सर्कल के अर्ध-परिधि के बराबर होनी चाहिए, ताकि डैश सर्कल की परिधि के आधे हिस्से को कवर करे, और ए अंतराल की लंबाई मूल्य की आवश्यकताएं शेष परिधि के बराबर या उससे अधिक होनी चाहिए.

जब यह अधिक हो जाता है, तो इसे ब्राउज़र द्वारा शेष परिधि में बदल दिया जाएगा, इसलिए हम इसके लिए पूर्ण परिधि मान का उपयोग करेंगे अंतराल की लंबाई. इस तरह हम शेष परिधि की गणना करने से बच सकते हैं.

आइए गणना देखें:

$\mathrm{परिधि}=2एक\; ??\; Â\; हैं\; ??\; एक¢Â\; ??\; Â\; ??\pi \times \mathrm{आर}$

कहा पे आर त्रिज्या है। 150 की त्रिज्या के लिए, परिधि है:

$\begin{array}{}\mathrm{परिधि}=2एक\; ??\; Â\; हैं\; ??\; एक¢Â\; ??\; Â\; ??\pi \times \mathrm{150}\\ \mathrm{परिधि}=942.48\end{array}$

यदि हम इसे 2 से विभाजित करते हैं, तो हमें अर्ध-परिधि के लिए 471.24 मिलते हैं, इसलिए इसका मूल्य स्ट्रोक-dasharray 150 त्रिज्या सर्कल में एक अर्ध-सर्कल रूपरेखा के लिए संपत्ति है 471, 943. इस सेमी सर्कल का उपयोग मीटर के लो रेंज जोन को दर्शाने के लिए किया जाएगा.

जैसा कि आप देख सकते हैं, यह उल्टा है, तो चलो एसवीजी को जोड़कर बदल दें परिवर्तन के मूल्य के साथ सीएसएस संपत्ति rotateX (180deg) को HTML तत्व.

 # मीटर ट्रांसफॉर्म: रोटैक्सएक्स (180 डीजी); 

4. अन्य जोन जोड़ें

मध्य क्षेत्र (नीला) सेमी-सर्कल के ⅔ भाग को कवर करने के लिए है, और 31 471 का। 314 है। तो, चलिए हमारे एसवीजी में एक और सर्कल जोड़ते हैं स्ट्रोक-dasharray संपत्ति फिर से, लेकिन अब के मूल्य के साथ ३१४, ९ ४३.

  < /circle>  

अंतिम क्षेत्र (लाल) को सेमी-सर्कल के अंतिम cover भाग को कवर करना है, और ४1१ का 157 157 है, इसलिए हम इस मान को इसमें जोड़ देंगे स्ट्रोक-dasharray तीसरे सर्कल की संपत्ति.

5. मीटर की रूपरेखा जोड़ें

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

रेखा की चौड़ाई एक वास्तविक रूपरेखा की उपस्थिति देने के लिए संपत्ति को अन्य मंडलियों की तुलना में थोड़ा अधिक होना चाहिए.

     < /circle>      

रूपरेखा समाप्त होती है

जैसा कि रूपरेखा अर्ध-वृत्त के सिरों को कवर नहीं करती है, हम एक छोर पर दूसरे सर्कल को जोड़कर लगभग 2px की 2 पंक्तियों को भी जोड़ते हैं पानी का छींटा लंबाई of 2px और ए अंतराल की लंबाई अर्ध-परिधि माइनस 2px की। इसलिए का मूल्य स्ट्रोक-dasharray इस घेरे की संपत्ति है २, ४६ ९.

मुखौटा

अब निम्न, औसत और उच्च श्रेणी क्षेत्रों के बाद एक और वृत्त जोड़ते हैं। नया सर्कल अनावश्यक क्षेत्र के क्षेत्रों को छिपाने के लिए मुखौटा के रूप में कार्य करेगा जब गेज मीटर संचालित होगा.

इसके गुण बाह्यरेखा चक्र के समान होंगे, और इसका स्ट्रोक रंग भी ग्रे होगा। बाद में मुखौटा को इनपुट स्लाइडर के जवाब में इसके नीचे के क्षेत्रों को प्रकट करने के लिए जावास्क्रिप्ट के साथ आकार दिया जाएगा.

अब तक का संयुक्त कोड नीचे है.

यदि हम मास्क के तहत किसी क्षेत्र को प्रकट करना चाहते हैं, तो हमें मास्क के आकार को कम करना होगा पानी का छींटा लंबाई. उदाहरण के लिए, जब का मूल्य स्ट्रोक-dasharray मास्क सर्कल की संपत्ति है 157, 943, आर्क्स निम्नलिखित स्थिति में खड़ा होगा:

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

नीचे आप HTML, CSS और जावास्क्रिप्ट कोड पा सकते हैं जो ऊपर के समान परिणाम की ओर ले जाता है.

एचटीएमएल

मैंने एक सुई छवि जोड़ी (गेज-needle.svg), एक रेंज स्लाइडर (इनपुट # स्लाइडर) उपयोगकर्ता इनपुट के लिए, और एक लेबल (लेबल # LBL) 0-100 की रेंज में स्लाइडर मूल्य प्रदर्शित करने के लिए.

    0 
 

सीएसएस

नीचे दिए गए CSS कोड SVG में स्टाइल नियम जोड़ता है, क्योंकि SVG आकृतियों को HTML तत्वों की तरह ही स्टाइल किया जा सकता है। यदि आप सीएसएस के साथ एसवीजी को कैसे स्टाइल करना चाहते हैं, इस बारे में अधिक पढ़ना चाहते हैं, तो इस पोस्ट को देखें स्लाइडर को स्टाइल करने के लिए, इस पोस्ट को देखें.

 # श्रावक स्थिति: रिश्तेदार; मार्जिन: ऑटो;  # मीटर चौड़ाई: 100%; ऊंचाई: 100%; परिवर्तन: रोट्रेक्स (180 डीजी);  .सीरोली भरना: कोई नहीं;  .आउटलाइन, # मास्क स्ट्रोक: # एफ 1 एफ 1 एफ 1; स्ट्रोक-चौड़ाई: 65;  .range स्ट्रोक-चौड़ाई: 60;  # स्लीडर, # स्लैब स्थिति: निरपेक्ष;  # साइडर कर्सर: पॉइंटर; बायां: 0; मार्जिन: ऑटो; सही: 0; शीर्ष: 58%; चौड़ाई: 94%;  # लाल पृष्ठभूमि-रंग: # 4B4C51; सीमा-त्रिज्या: 2 पीएक्स; सफ़ेद रंग; फ़ॉन्ट-परिवार: 'कूरियर नया'; फ़ॉन्ट-आकार: 15pt; फोंट की मोटाई: बोल्ड; गद्दी: 4px 4px 2px 4px; दाईं ओर: -48 पीएक्स; शीर्ष: 57%;  #meter_needle ऊंचाई: 40%; बायां: 0; मार्जिन: ऑटो; स्थिति: निरपेक्ष; सही: 0; शीर्ष 10%; परिवर्तन-उत्पत्ति: निचला केंद्र; / * ओरिएंटेशन फिक्स * / ट्रांसफॉर्म: रोटेट (270deg); 

जावास्क्रिप्ट

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

 / * सभी सर्कल के लिए त्रिज्या सेट करें * / var r = 250; var हलकों = document.querySelectorAll ('सर्कल'); var Total_circles = मंडलियों की गति; के लिए (var i = 0; मैं; < total_circles; i++)  circles[i].setAttribute('r', r);  /* Set meter's wrapper dimension */ var meter_dimension = (r * 2) + 100; var wrapper = document.querySelector("#wrapper"); wrapper.style.width = meter_dimension + "px"; wrapper.style.height = meter_dimension + "px"; /* Add strokes to circles */ var cf = 2 * Math.PI * r; var semi_cf = cf / 2; var semi_cf_1by3 = semi_cf / 3; var semi_cf_2by3 = semi_cf_1by3 * 2; document.querySelector("#outline_curves") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#low") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#avg") .setAttribute("stroke-dasharray", semi_cf_2by3 + "," + cf); document.querySelector("#high") .setAttribute("stroke-dasharray", semi_cf_1by3 + "," + cf); document.querySelector("#outline_ends") .setAttribute("stroke-dasharray", 2 + "," + (semi_cf - 2)); document.querySelector("#mask") .setAttribute("stroke-dasharray", semi_cf + "," + cf); /* Bind range slider event*/ var slider = document.querySelector("#slider"); var lbl = document.querySelector("#lbl"); var mask = document.querySelector("#mask"); var meter_needle = document.querySelector("#meter_needle"); function range_change_event()  var percent = slider.value; var meter_value = semi_cf - ((percent * semi_cf) / 100); mask.setAttribute("stroke-dasharray", meter_value + "," + cf); meter_needle.style.transform = "rotate(" + (270 + ((percent * 180) / 100)) + "deg)"; lbl.textContent = percent + "%";  slider.addEventListener("input", range_change_event); 

सीमा - शुल्क range_change_event () समारोह

मीटर का व्यवहार द्वारा किया जाता है range_change_event () कस्टम फ़ंक्शन जो मुखौटा आकार और सुई के एनीमेशन के समायोजन के लिए जिम्मेदार है.

यह स्लाइडर मान (उपयोगकर्ता इनपुट) लेता है, जो 0-100 के बीच होता है, इसे अर्ध-परिधि समतुल्य में परिवर्तित करता है (meter_value) का मान 471-0 (471 त्रिज्या 150 के लिए अर्ध-परिधि) है, और वह सेट करता है meter_value के रूप में पानी का छींटा लंबाई मास्क का स्ट्रोक-dasharray संपत्ति.

range_change_event () कस्टम फ़ंक्शन उपयोगकर्ता इनपुट को परिवर्तित करने के बाद सुई को घुमाता है (0-100 रेंज में आ रहा है) इसकी डिग्री 0-180 के बराबर है.

उपर्युक्त कोड में 270 ° सुई के रोटेशन में जोड़ा जाता है क्योंकि मैंने जो छवि का उपयोग किया है वह एक ईमानदार सुई की है और मुझे शुरू में इसे 270 ° घुमाने के लिए इसे अपनी बाईं ओर सपाट करना चाहिए.

अंत में, मैंने बाध्य किया range_change_event () रेंज स्लाइडर में कार्य करें, ताकि गेज मीटर को इसके साथ संचालित किया जा सके.

इसकी जाँच पड़ताल करो डेमो या हमारे स्रोत कोड पर एक नज़र डालें गितुब भंडार.