वास्तविक जीवन में एसवीजी। यैंडेक्स रिपोर्ट

नमस्ते, मेरा नाम एर्टोम है, मैं यैंडेक्स में इंटरफ़ेस विकास समूहों में से एक का प्रमुख हूं। एक हफ्ते पहले हां पर। सबबॉटनिक मैंने बताया कि किस तरह हमने आंतरिक कैलेंडर बनाने के लिए एसवीजी का उपयोग किया। यह मेरी रिपोर्ट की एक प्रतिलिपि है, कैलेंडर विजेट के कार्यान्वयन से कई कहानियाँ: स्केलिंग, पैटर्न भरने, मास्क, प्रतीक और प्रारूप सुविधाएँ।



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

हमने शुरू किया, निश्चित रूप से, एक लेआउट के साथ। वह इस तरह दिखे:



यह विभिन्न भरावों के साथ सम और विषम घटनाओं को दर्शाता है। अन्य ईवेंट्स को ओवरलैप करने वाली घटनाएँ, दूसरी परत पर हैं - एक और फिल। पूरे दिन पूरे रंग लेने वाली घटनाएँ। वर्तमान समय नीचे प्रदर्शित किया गया है। यही लक्ष्य था।



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

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



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

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



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

व्यूबॉक्स चार मापदंडों द्वारा निर्धारित किया जाता है। समन्वय प्रणाली में पहले दो ऊपरी बाएं बिंदु हैं, जहां से व्यूबॉक्स माना जाता है, हमारे लिए यह 0.0 है। चौड़ाई 60 दिनों की संख्या के लिए है, और घंटे की संख्या के लिए ऊंचाई 60 * है।

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

यह आयत, चूंकि कोई भरण रंग निर्दिष्ट नहीं है, एसवीजी से भरण संपत्ति का वारिस होगा। इस मामले में, यह दिन काम कर रहा है, और सप्ताह में दो दिन, इसलिए वे प्रकाश से भर गए हैं। यह सिर्फ कक्षाओं द्वारा निर्धारित किया जाता है।



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



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



अन्य घटनाओं के साथ यह थोड़ा अधिक कठिन है। एक बैठक है। यह नीला भरा है, सब कुछ सरल है। हालांकि, यदि दो बैठकें एक पंक्ति में आयोजित की जाती हैं, तो हमारे लेआउट के अनुसार, हम उन्हें अलग-अलग रंगों से भरते हैं, वे समान और विषम हैं।

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



अब पूरी रिपोर्ट से सबसे कठिन उदाहरण होगा, धैर्य रखें और देखें, तीन चरण होंगे, तब यह आसान हो जाएगा।

चलिए शुरू करते हैं। एसवीजी में एक <ढ्डह्म> टैग है, यह आपको इसके अंदर तत्वों को घोषित करने की अनुमति देता है जो प्रदर्शित नहीं होते हैं, लेकिन आप उन्हें संदर्भ देकर, उनका उपयोग कर सकते हैं। पहली चीज जो हम करेंगे वह है डिक्लेयर <ढ्डह्म> और इसमें एक पैटर्न बनाना। <पैटर्न> एक टैग है जो आपको एक पैटर्न घोषित करने की अनुमति देता है जिसका उपयोग आप किसी विशेष पैटर्न के साथ एक विशेष तत्व को भरने के लिए कर सकते हैं।

हमें इस पैटर्न में सेल बनाने की जरूरत है। हमारे पास 60 से 60 पिक्सेल हैं, कोशिकाओं को 6 से 6 होना चाहिए, इसलिए हमने 12 को 12 पैटर्न घोषित किया और इसके अंदर एक <मार्ग> आकर्षित किया, जैसा कि बाईं ओर आरेख में है। इसमें एक विशेषता d है, जो इंगित करता है कि लाइन कैसे चलती है। यह बिंदु 0,0 से शुरू होता है, और फिर निर्देशांक तीर दिखाते हैं कि यह कैसे खींचा जाता है। यदि हम इसे सफेद रंग से भरते हैं, तो हमें निम्नलिखित पैटर्न मिलते हैं: सफेद के साथ बाढ़ नहीं आती है, काले से बाढ़ आती है।



अगले चरण पर जाएं, अब मुखौटा घोषित करें। <मास्क> एसवीजी में एक ऐसा तत्व है जो आपको अन्य तत्वों में एक अल्फा चैनल जोड़ने की अनुमति देता है। मुखौटे में काले रंग में जो खींचा जाता है, उस तत्व में जिस पर मुखौटा लगाया जाता है, अदृश्य, पारदर्शी होता है। सफेद रंग में जो चित्रित किया गया है वह अपारदर्शी है। क्या ग्रे है पारभासी है। हमारे पास एक काला और सफेद पैटर्न है, और हम मुखौटा के अंदर एक आयत जोड़ देंगे, और इसे इस पैटर्न के साथ भर देंगे। अब हमारे पास एक मुखौटा है।

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



अब आपको यह निर्धारित करने की आवश्यकता है कि किसी निश्चित दिन को कैलेंडर में किन घटनाओं को शामिल किया जाना चाहिए। हमारे पास +3 का समय क्षेत्र है, जिसमें हम सभी बैठते हैं, इसका 9 से 20 घंटे का पैमाना है। एक व्यक्ति भी है जो सशर्त ओरेनबर्ग में बैठता है, उसके पास +5 का समय क्षेत्र है, उसका पैमाना हमारे सापेक्ष दो घंटे है। हम UTC पर एक प्रक्षेपण करेंगे, और देखेंगे कि UTC पर इस अंतराल को ऊपर से नीचे तक प्रदर्शित करने की आवश्यकता है, ताकि उपयोगकर्ता समय क्षेत्र के बीच स्विच कर सके, दोनों घटनाओं को अपने कैलेंडर और उस व्यक्ति के कैलेंडर में देखें जो वह देख रहा है ।

इन नंबरों को याद रखें, जो ऑफसेट में हैं, क्योंकि यूटीसी में आने वाली घटनाओं को उसी यूटीसी में रखना सबसे आसान है। ऐसा करने के लिए, हम <g> टैग लेते हैं, जो SVG में एक समूह को दर्शाता है, और हम UTC द्वारा पूरी तरह से वहां सभी घटनाओं की स्थिति बनाते हैं, और हम <g> को एक या दूसरे समय क्षेत्र को प्रदर्शित करने के लिए आवश्यक पिक्सेल की संख्या से स्थानांतरित कर देंगे।



इस अध्ययन को सारांशित करते हुए, हमें पता चलता है कि हमारे पास एक प्रतीक है जिसका हम उल्लेख करते हैं, एक घटना प्रकार, स्तर, समता है, यूटीसी में दिन की शुरुआत से -120 मिनट और 30 मिनट की अवधि है। सभी घटनाओं को जोड़कर, हमें ऐसी तस्वीर मिलती है।



वर्तमान समय भी बस किया जाता है, यह एक ही गैर-स्केलिंग-स्ट्रोक प्रभाव के साथ एक पंक्ति होगी, ताकि यह हमेशा एकल-पिक्सेल हो। इसे इसी तरह प्रदर्शित किया जाता है।

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



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



यह HTML जोड़ने के लिए रहता है ताकि शीर्ष पर अक्षर और संख्याएं हों। एक कैलेंडर प्राप्त करें।



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



कुछ और उदाहरण। यहां डेवलपर का कैलेंडर है, उसके पास स्टैंड-अप, कई नियमित बैठकें और वह है। यहाँ प्रबंधक का कैलेंडर है और यहाँ डिजाइनर है।

CSS का उपयोग करें, SVG का उपयोग करें। धन्यवाद!