प्रतीक: रेखापुंज बनाम वेक्टर

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

रेखापुंज

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

थोड़ा सोचने के बाद, हम दावा करते हैं: “यूरेका! आखिरकार, आप इसके विपरीत, बड़ी तस्वीर को कम कर सकते हैं। " और अपनी आस्तीन को ऊपर उठाते हुए, हम अपने सभी आइकन को सबसे बड़े आकार (आमतौर पर 64x64) पर फिर से बनाते हैं।
लेकिन यहां, भौतिकी हमारे खिलाफ है। तथ्य यह है कि मॉनिटर के निर्माता (शायद समझौते से) केवल एक निश्चित संख्या में पिक्सेल के साथ मॉनिटर बना सकते हैं और ये पिक्सेल भी एक निश्चित आकार हैं।
मान लीजिए कि हम 64x64 की छवि को 32x32 तक कम करना चाहते हैं। इसका मतलब है कि यदि आप मूल छवि में 2 बाय 2 वर्ग लेते हैं, तो जब आप इसे कम करते हैं, तो इसे एक पिक्सेल में बदलना चाहिए (बहुत ही मोटा, लेकिन ऐसा कुछ काम करता है)।
इस परिवर्तन के साथ, सूचना हानि अपरिहार्य है। नतीजतन, छवि या तो "धुंधला" है या कुछ विवरण इसमें से गायब हो गए हैं। एकमात्र छवि जो सही ढंग से सिकुड़ती है वह एकल-रंग 64x64 वर्ग है।

क्या करें? प्रत्येक आकार के लिए अलग-अलग चिह्न बनाएं। कोई विकल्प नहीं। एक बहुत स्पष्ट उदाहरण नोटपैड (Win7) को लॉन्च करना और टास्कबार पर प्रदर्शित आइकन और विंडो शीर्षक में आइकन की तुलना करना है।

इसलिए, हमने सभी आवश्यक आकारों के आइकन तैयार किए हैं और ऐसा लगता है कि हम शांति से सो सकते हैं। लेकिन नहीं। ध्यान रखने के लिए दो और बिंदु हैं:

1. एनीमेशन। उदाहरण के लिए, जब आप माउस को घुमाते हैं, तो चित्र 1.5 गुना बढ़ जाता है।
2. गैर-मानक डीपीआई मॉनिटर करता है। धीरे-धीरे (ठीक है, यह बहुत धीमा है, जहां मेरा मॉनिटर 24 "और 300DPI है;) वे दिखाई देने लगते हैं। अधिकतर मोबाइल उपकरणों और नेटबुक पर।

काश, उपरोक्त समस्याओं में से कोई भी अच्छा समाधान नहीं है। यह आराम करने और हर चीज को छोड़ने का मजा लेता है।

वेक्टर

जब मैंने पहली बार WPF की कोशिश की, तो मुझे Xaml में बटन के लिए आइकन बनाने में सक्षम होने में बहुत खुशी हुई। ऐसा लगता है कि यह सभी समस्याओं का समाधान है। लेकिन वहाँ यह (ओह, कि लानत भौतिकी) था।

सबसे पहले, भले ही चित्र वेक्टर है, आपको इसे एक रेखापुंज स्क्रीन (रेखांकन) पर खींचने की आवश्यकता है। इसलिए, वेक्टर आइकन को उन्हीं समस्याओं की विशेषता है जो ऊपर वर्णित हैं।
सामान्य तौर पर, आपको प्रत्येक आकार के लिए एक आइकन बनाना होगा। हालाँकि यह अक्सर स्वीकार्य गुणवत्ता प्राप्त करने के लिए संभव है जब SnapsToDevicePixels को सही और छवि को सरल बनाने के लिए स्केलिंग करके।

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

पृष्ठभूमि

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