जैसा कि हमने जावास्क्रिप्ट के लिए एसवीजी विजेट्स लिखा है

अस्वीकरण।

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

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

कार्य

कल्पना कीजिए कि आप एक वेब-प्रोग्रामर हैं जो एक जटिल SCADA प्रणाली को लागू करता है, एक डैशबोर्ड (क्षमा करें, मैंने इस शब्द का स्पष्ट अनुवाद रूसी में नहीं देखा है), एक इंटरैक्टिव मैट्रिक्स प्रबंधन प्रणाली, या बस अपनी वेबसाइट पर एक मुश्किल से एक घड़ी सम्मिलित करने की आवश्यकता है डिजाइन। इस मामले में, आपको सभी प्रकार के तराजू, मोड़ और तीर (अंग्रेजी में इसे गेज कहा जाता है), घड़ियां और अन्य "डिवाइस" जोड़ने की आवश्यकता है, संभवतः इंटरएक्टिव भी।

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

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

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

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

हमने कई तकनीकी कार्यों का सामना किया, जिन्हें हल किया जाना था:

• क्रॉस-प्लेटफॉर्म। मंच और तकनीक की परवाह किए बिना, विजेट को शुद्ध HTML + जावास्क्रिप्ट में काम करना चाहिए था।
• मानक। मानकों को अनुकूलित करने के लिए विजेट को सीएसएस का समर्थन करना चाहिए।
• प्रदर्शन। मूल्यों के परिवर्तन के दौरान, तीर को सुचारू रूप से चलना चाहिए, प्रोसेसर को 100% धीमा या लोड नहीं करना चाहिए।
• अन्तरक्रियाशीलता। उपयोगकर्ता को तीर को खींचकर मूल्य निर्धारित करने में सक्षम होना चाहिए (जबकि विजेट, फिर से, धीमा नहीं होना चाहिए)।
• सादगी। प्रोग्रामर को सरल और आरामदायक होना चाहिए: एक वेब पेज में एक विजेट एम्बेड करना कोड की कई स्पष्ट लाइनों का उपयोग करना चाहिए।

ढांचा

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

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

हालांकि, हमने स्थिति से बहुत अच्छा तरीका पाया, जो कि, हम सक्रिय रूप से सभी .NET डेवलपर्स को जावास्क्रिप्ट में RIA लिखने की सलाह देंगे। यह आउटपुट स्क्रिप्ट # नामक एक फ्रेमवर्क था, जिसे Microsoft द्वारा विकसित किया जा रहा है। यह आपको C # में कोड लिखने और जावास्क्रिप्ट में अनुवाद करने की अनुमति देता है। इसके अलावा, मैं बिल्कुल ईमानदारी से कहूंगा: आउटपुट में जेएस-कोड की गुणवत्ता बहुत ही सभ्य है। बेशक, वहाँ फ़ंक्शंस का सेट काफी सीमित है, लेकिन यह जेएस में पूरी तरह से व्यक्तिगत तरीकों को लागू करने का अवसर बचाता है, जिसके बाद उन्हें परिणामस्वरूप फ़ाइल में बदलाव किए बिना अनुवाद किया जाता है। सामान्य तौर पर, यदि आप C # में लिखते हैं, तो मैं एक कोशिश की सलाह देता हूं।

आर्किटेक्चर

एसवीजी बनाम। कैनवास

यह तुरंत स्पष्ट हो गया था कि HTML5 का उपयोग करके विकास किया जाना चाहिए। पहला सवाल जो हमने निश्चित रूप से पूछा था वह एसवीजी और कैनवस के बीच का चुनाव था।

एक तरफ, एसवीजी संपादक में व्यक्तिगत वस्तुओं और आदिम से इकट्ठा किए गए विगेट्स के साथ काम करने के लिए सबसे उपयुक्त था। दूसरी ओर, हमने एसवीजी के प्रदर्शन और विभिन्न ब्राउज़रों में इसके समर्थन के लिए आशंका जताई। मैं वास्तव में ऐसी स्थिति में नहीं रहना चाहता जहाँ घटक सामान्य रूप से केवल Google Chrome के नवीनतम संस्करण में काम करता हो। इसके अलावा, महत्वपूर्ण बिंदु मोबाइल उपकरणों का समर्थन था: आईओएस, एंड्रॉइड और अन्य चिड़ियाघर।

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

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

इस प्रकार, जबकि सभी विगेट्स शुद्ध एसवीजी पर तैयार किए गए हैं।

ऑब्जेक्ट मॉडल

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

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

हालांकि, उद्देश्यपूर्ण होने के लिए, सी # और स्क्रिप्ट # उत्पादों के बीच कोड अलगाव के सफल उदाहरण हैं।

क्रमबद्धता

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

प्रारंभ में, यह योजना बनाई गई थी कि विजेट के विवरण के साथ JSON उपयोगकर्ता (यानी, हमारे उत्पाद का उपयोग करने वाला प्रोग्रामर) द्वारा बनाया जाएगा, लेकिन फिर वे इस विचार से थोड़ा दूर चले गए। JSON ऑब्जेक्ट के विवरण के साथ बनाया जाता है जब विजेट संपादक में निर्यात किया जाता है। पहले संस्करण में, हमने कम से कम प्रतिरोध का रास्ता अपनाया और मानक JSON-Serializer को खराब कर दिया, जो .NET फ्रेमवर्क 3.5 के साथ आता है। कार्यान्वयन के विवरण में जाने के बिना, मैं कहूंगा कि विजेट के ऑब्जेक्ट मॉडल को JSON में एक मानक तरीके से क्रमबद्ध किया गया है और परिणाम प्रोग्रामर को वापस कर दिया गया है। किसी पृष्ठ पर एक विजेट जोड़ने पर, प्रोग्रामर इस JSON को कंस्ट्रक्टर पैरामीटर (जावास्क्रिप्ट में) के रूप में पास करता है। एक विजेट बनाते समय, JSON को इंजन द्वारा पार्स किया जाता है, और इस पर SVG प्रिमिटिव का एक सेट बनाया जाता है।

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

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

कार्यान्वयन

एनीमेशन

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

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

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

सीएसएस

हमारा कार्य प्रोग्रामर को सीएसएस में व्यक्तिगत विजेट तत्वों के रंगों को कॉन्फ़िगर करने की क्षमता प्रदान करना था। सामान्य तौर पर, यहां कोई समस्या नहीं है। एक एसवीजी तत्व है, इसमें एक वर्ग है, इस वर्ग के लिए सेटिंग्स के साथ सीएसएस है। केवल एक चीज जो निराश थी वह सीएसएस में एसवीजी के लिए ढाल को ठीक से स्थापित करने में असमर्थता थी। विनिर्देशन द्वारा, SVG ऑब्जेक्ट्स के लिए ग्रेडिएंट फिल का उपयोग करने के लिए, आपको पहले उसी SVG में इसे घोषित रूप से बताना होगा।

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

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

अन्तरक्रियाशीलता

हमने मूल रूप से विगेट्स लिखे ताकि उपयोगकर्ता तीर या स्लाइडर को खींचकर, एक नया मान सेट कर सके। बेशक, विजेट कॉलबैक को कॉल करता है और जावास्क्रिप्ट को सूचित करता है।

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

इस मामले में, यह निर्धारित करना एक कठिन कार्य था जब उपयोगकर्ता अपेक्षाकृत जटिल सीमा वाले क्षेत्र पर क्लिक करता है। "सामान्य" भाषाओं में, हिटटेस्ट पद्धति का उपयोग आमतौर पर इसके लिए किया जाता है, लेकिन एसवीजी के लिए जावास्क्रिप्ट में, दुर्भाग्य से, यह नहीं है।

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

अंत में, प्रत्येक घटक के लिए अलग से HitText लिखने का निर्णय लिया गया, विश्लेषणात्मक ज्यामिति को याद करते हुए और ऑब्जेक्ट को सरलतम प्राइमेटिक्स के साथ अनुमानित किया गया।

एक और छोटा कार्य तब उत्पन्न हुआ जब हमने उपयोगकर्ता कार्यों के जवाब में विजेट को फिर से बनाना शुरू किया। उदाहरण के लिए, उपयोगकर्ता "एब्स" को पकड़ लेता है और इसे बड़ी तेजी से मोड़ना शुरू कर देता है। स्वाभाविक रूप से, वहाँ बहुत कुछ है। वेक्टर एसवीजी का उपयोग करने के बारे में सकारात्मक बात यह थी कि रीड्रा (और ज्यादातर मामलों में सिर्फ घुमाएगी) केवल वस्तुओं को हिलाने और दूसरों को छूने के लिए नहीं, जबकि कैनवास का उपयोग करते हुए हमें ऑब्जेक्ट को तीर के नीचे भी फिर से बनाना होगा। दूसरी ओर, कभी-कभी मुझे काफी कम करना पड़ता था।

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

वैसे, एक दिलचस्प नोट: फ़ाइल सिस्टम से लोड किए गए पृष्ठ पर जावास्क्रिप्ट का स्थानीय संस्करण एक ही ब्राउज़र में एक ही पृष्ठ की तुलना में बहुत धीमा काम करता है, लेकिन सर्वर से लोड होता है। कौन जानता है कि क्यों, कृपया टिप्पणियों में साझा करें।

स्पर्श उपकरणों के लिए "इशारों" के लिए समर्थन को लागू करने के लिए, पूरी तरह से अलग-अलग घटनाओं को संभालना आवश्यक है, उदाहरण के लिए, टचस्टार्ट, टचेंड, टचमोव, आदि। इसलिए, इस समर्थन को अलग से लिखना पड़ा।

लिपियों और आंतरिक तर्क

SharpShooter Gauges आंतरिक स्क्रिप्ट का समर्थन करने के लिए प्रसिद्ध था। ये स्क्रिप्ट विजेट के विकास में एक महत्वपूर्ण बिंदु थे, क्योंकि उन्होंने ग्राफिक तत्वों की स्थिति को तराजू और गाइड करने के लिए निर्धारित किया था।

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

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

आंतरिक स्क्रिप्टिंग की बिना शर्त शक्ति के बावजूद, फ्रैंक विपक्ष हैं।

सबसे पहले, समस्या एक स्ट्रिंग के लिए ऑब्जेक्ट्स (उदाहरण के लिए, दिनांक) की अंतर्निहित कास्टिंग में है। तथ्य यह है कि जावास्क्रिप्ट और .NET में तिथि अलग-अलग तरीके से एक स्ट्रिंग में डाली जाती है, जो विंडोज और एचटीएमएल 5 के संस्करणों के लिए उचित मात्रा में असंगति जोड़ता है।

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

छोटे-छोटे मुद्दों को अलग करें

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

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

IOS उपकरणों पर RGBA के साथ समस्या।विकास के मध्य में, विभिन्न मॉडलों के उपकरणों पर विगेट्स का परीक्षण करते हुए, हमने देखा कि iPhone 4 और iPad पर हमारा भराव पूरी तरह से काला था। बेशक, इस वजह से विगेट्स बहुत गॉथिक और मजाकिया लग रहे थे, लेकिन अभी भी पूरी तरह से गलत है। थोड़ा शोध के बाद, हमने महसूस किया कि RGBA प्रारूप, जिसका उपयोग रंग निर्धारित करने के लिए किया गया था, iOS4 + के तहत सफारी में समर्थित नहीं है (जो आश्चर्यजनक है, iPhone 3 जी पर काम किया गया सब कुछ)। परिणामस्वरूप, हमने आरजीबीए मान को दो अलग-अलग (रंग और पारदर्शिता) में विभाजित किया जहां भी हमने इसका उपयोग किया। इससे मदद मिली।

निष्कर्ष

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

निष्कर्ष 1. अधिकांश आधुनिक ब्राउज़र एसवीजी के साथ सामान्य ऑपरेशन का समर्थन करते हैं और नेत्रहीन समान परिणाम देते हैं।
निष्कर्ष 2. Freymvork स्क्रिप्ट # अपने कार्य के साथ copes, आप जावास्क्रिप्ट और एचटीएमएल 5 के लिए रिया विकास के लिए सी # का उपयोग करने की इजाजत दी।
निष्कर्ष 3. मानक सीएसएस एनीमेशन अभी भी कच्चा है और काम के लिए इसका उपयोग करने के लिए ब्राउज़र-निर्भर है। एसवीजी के पुनर्विकास भाग पर आधारित "मैनुअल" एनीमेशन हर जगह एक ही काम करता है और, न्यूनतम अनुकूलन के साथ, बिल्कुल भी धीमा नहीं होता है (यहां तक ​​कि आईई में भी)।
निष्कर्ष 4. सीएसएस से आप सामान्य रूप से एसवीजी तत्वों की शैली को कॉन्फ़िगर कर सकते हैं। ग्रेडिएंट फिल को कॉन्फ़िगर करने के लिए, इसे पहले उसी एसवीजी में घोषित किया जाना चाहिए, ताकि आप केवल सीएसएस नहीं कर सकें। शंक्वाकार कास्टिंग, अफसोस, समर्थित नहीं है।
निष्कर्ष 5. iOS डिवाइस (सबसे पुराने के अपवाद के साथ) RGBA रंग का समर्थन नहीं करते हैं। इसलिए, शैलियों की स्थापना करते समय, आपको आरजीबी और अल्फा को अलग से निर्दिष्ट करने की आवश्यकता होती है।
अंतिम निष्कर्ष। हमने एक अच्छा उत्पाद बनाया जिसे हम खुद पसंद करते हैं :)।
खैर, निश्चित रूप से आप देख सकते हैं कि हमारे साथ यहां क्या हुआ ।