WPF में "साबुन" कहां से आता है और इससे कैसे निपटना है

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

सामग्री की तालिका

परिचय
1. रेखापुंज रेखापुंज छवियों
2. निर्देशांक जो पिक्सेल आकार के एक से अधिक नहीं हैं
3. रेखापुंज छवियों के मूल संकल्प
4. वेक्टर छवियों का रेखांकन
5. पाठ को लंबवत स्थानांतरित करें
6. SnapsToDevicePixels संपत्ति का उपयोग करना
7. स्व-ड्राइंग नियंत्रण
निष्कर्ष
संदर्भ

परिचय

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

सावधानी की एक छोटी परीक्षा:


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


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

मैनुअल के प्रत्येक खंड को एक डेमो एप्लिकेशन से लैस किया गया है जो प्रश्न को हल करने और उसे हल करने के तरीकों के बारे में बताता है। आप संकलित मॉड्यूल और उनके स्रोत कोड (VS2010 परियोजना प्रारूप) वाले एकल संग्रह (104 Kb) में सब कुछ डाउनलोड कर सकते हैं।

तो, WPF कहाँ से आता है और इससे कैसे निपटना है?

1. रेखापुंज रेखापुंज छवियों

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

विपक्ष

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

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

public static class Render { static Render() { var flags = BindingFlags.NonPublic | BindingFlags.Static; var dpiProperty = typeof(SystemParameters).GetProperty("Dpi", flags); Dpi = (int)dpiProperty.GetValue(null, null); PixelSize = 96.0 / Dpi; } //      public static double PixelSize { get; private set; } //  public static int Dpi { get; private set; } } 

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

 public class StaticImage : Image { static StaticImage() { //    Image.SourceProperty.OverrideMetadata( typeof(StaticImage), new FrameworkPropertyMetadata(SourceChanged)); } private static void SourceChanged( DependencyObject obj, DependencyPropertyChangedEventArgs e) { var image = obj as StaticImage; if (image == null) return; //      image.Width = image.Source.Width * Render.PixelSize; image.Height = image.Source.Height * Render.PixelSize; } } 

यदि स्केलिंग से बचा नहीं जा सकता है, तो आपके लिए जो कुछ भी है वह रेंडरऑफिस का उपयोग करके अपने मामले के लिए उपयुक्त आउटपुट एल्गोरिथ्म का चयन करके विकृति की डिग्री को कम करने के लिए लड़ना है। बिटमैपसक्लिंगमोड संपत्ति।

2. निर्देशांक जो पिक्सेल आकार के एक से अधिक नहीं हैं

अनियोजित ब्लर पाने का एक काफी सरल तरीका कंटेनर में छवि को केंद्रित करना है (यह आयत और अन्य आकृति के वंशजों के लिए भी काम करता है)। आधे मामलों में, कंटेनर की चौड़ाई पूरी तरह से आधे में विभाजित नहीं है।

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

 <!--      --> <Grid Width="117" Height="117"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <!--    --> <Grid.Resources> <Style TargetType="Image"> <Setter Property="Width" Value="48"/> <Setter Property="Height" Value="48"/> <Setter Property="Margin" Value="5"/> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="Source" Value="CookingPot.png"/> </Style> </Grid.Resources> <Image Grid.Column="0" Grid.Row="0"/> <Image Grid.Column="1" Grid.Row="0"/> <Image Grid.Column="0" Grid.Row="1"/> <Image Grid.Column="1" Grid.Row="1"/> </Grid> 

कोई भी कम प्रभावी रूप से कैनवस इंडेंट या पोजिशन में कार्य की तस्वीर को धब्बा लगाने में मदद नहीं करता है जो पिक्सेल के आकार से अधिक नहीं हैं।

इन सभी मामलों में, आपको "साबुन" मिलेगा, भले ही आउटपुट के दौरान कोई स्केलिंग न हो। छवि पिक्सेल की सीमाएं स्क्रीन पिक्सेल की सीमाओं के भीतर गिरना बंद कर देती हैं, और रेखापुंज होने पर उनकी स्मीयरिंग की जाती है।

विपक्ष

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

ध्यान दें कि अभिव्यक्ति "पूर्णांक निर्देशांक" का अर्थ है "सभी में पिक्सेल के आकार से विभाज्य निर्देशांक" केवल 96 डीपीआई के मानक रिज़ॉल्यूशन में, अन्य सभी Math.Round में आपकी मदद नहीं करेगा। सामान्य स्थिति में, आप इस तरह के निकटतम पिक्सेल बॉर्डर पर समन्वयन कर सकते हैं:

 static public double SnapToPixels(double value) { value += PixelSize / 2; //  DPI    WPF- . //  1000  -   //     double //2.4 / 0.4 = 5.9999999999999991 //240.0 / 40.0 = 6.0 var div = (value * 1000) / (PixelSize * 1000); return (int)div * PixelSize; } 

3. रेखापुंज छवियों के मूल संकल्प

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

प्रयोगों के लिए इन तीन छवियों को डाउनलोड करें (उनमें से प्रत्येक का एक अलग रिज़ॉल्यूशन है):



यदि तस्वीर का रिज़ॉल्यूशन आउटपुट के रिज़ॉल्यूशन के साथ मेल नहीं खाता है, तो जब इसके आयामों को लोड करना रिज़ॉल्यूशन के अनुपात से गुणा किया जाता है, और जब "मूल" आकार में रेंडर किया जाता है, तो आप अचानक स्केलिंग प्राप्त करते हैं। वैसे, पहली विधि में दिखाया गया StaticImage वर्ग भी इन विकृतियों से सुरक्षित नहीं है, क्योंकि यह Source.Width और Source.Height गुणों पर निर्भर करता है।

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

 <!--    ,   --> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Image Grid.Column="0" Source="Man1.png" Stretch="None" Margin="5"/> <Image Grid.Column="1" Source="Man2.png" Stretch="None" Margin="5"/> <Image Grid.Column="2" Source="Man3.png" Stretch="None" Margin="5"/> </Grid> 

विपक्ष

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

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


समान रूप से मुक्त पेंट.नेट संपादक में, "छवि" मेनू पर जाकर उसी प्रभाव को प्राप्त किया जा सकता है, फिर "कैनवास का आकार ..." (हॉटकी Ctrl + शिट + आर)।


यदि आप ग्राफ़िकल एडिटर में रिज़ॉल्यूशन के साथ काम नहीं कर सकते हैं या नहीं कर सकते हैं (उदाहरण के लिए, आपका एप्लिकेशन डाउनलोड करने योग्य कस्टम छवियों के साथ काम करता है), तो आप डाउनलोड की गई छवि के रिज़ॉल्यूशन को प्रोग्रामेटिक रूप से बदल सकते हैं। 32-बिट छवियों के लिए डाउनलोड फ़ंक्शन का एक उदाहरण यहां दिया गया है:

 // Image.Source    96 dpi BitmapSource ConvertBitmapTo96DPI(string path) { var uri = new Uri(path); var bitmapImage = new BitmapImage(uri); int width = bitmapImage.PixelWidth; int height = bitmapImage.PixelHeight; int stride = width * 4; // 4    var pixelData = new byte[stride * height]; bitmapImage.CopyPixels(pixelData, stride, 0); return BitmapSource.Create( width, height, 96, 96, PixelFormats.Bgra32, bitmapImage.Palette, pixelData, stride); } 

4. वेक्टर छवियों का रेखांकन

"साबुन" की उपस्थिति के पहले तीन कारणों के वर्णन से, आपके पास एक अच्छी तरह से स्थापित राय हो सकती है कि WPF में c बिटमैप्स में एक समस्या है। दरअसल, वेक्टर वातावरण में काम करने के लिए वेक्टर छवियों का उपयोग करना अधिक स्वाभाविक है। पहले प्रयोगों में, SVG से XAML में रूपांतरण एक रामबाण लगता है, जिससे आप आकार और पिक्सेल के बारे में अधिक समय तक नहीं सोच सकते हैं। काश, ऐसा नहीं होता। आधी रात को, गाड़ी कद्दू में बदल जाती है, और वेक्टर छवि प्रदर्शन के लिए व्यवस्थित हो जाती है।

जितने कम पिक्सेल आउटपुट में होते हैं, उतनी ही अधिक कलाकृतियाँ। 48 पिक्सल या उससे कम के आकार वाली छवियों पर (यह डेस्कटॉप अनुप्रयोगों में सभी ग्राफिक्स का लगभग 80% है), स्थिति निम्न में से एक में बदल जाती है: एक वेक्टर छवि सही ढंग से केवल एक रिज़ॉल्यूशन में rasterized है, जो बाकी के लिए अनुकूलित है, जैसा कि insofar। वेक्टर आइकन को गलत आकार में प्रदर्शित करें जिसके लिए इसे तैयार किया गया था, और अनुभवहीन एंटी-अलियासिंग आपको इंतजार नहीं कराएगी।

विपक्ष

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

5. पाठ को लंबवत स्थानांतरित करें

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

यहां दबाए जाने पर टेक्स्ट एनीमेशन के साथ एक बटन पर एक धब्बेदार धब्बा प्रभाव का एक उदाहरण है:

 <Button VerticalAlignment="Top"> <Button.Template> <ControlTemplate TargetType="Button"> <Border Width="255" Height="40" BorderThickness="1 0 1 1" CornerRadius="0 0 10 10" BorderBrush="#FF202020" Background="#FFF7941D"> <StackPanel Name="Panel" Orientation="Horizontal"> <Label Content="     " Foreground="#FF202020" VerticalAlignment="Center" Margin="20 0 0 0" Padding="0"/> </StackPanel> </Border> <ControlTemplate.Triggers> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="Panel" Property="Margin" Value="3 1 -3 -1"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> 

इस उदाहरण में धुंधला स्थिति बल्कि रहस्यमय हैं। जाहिर है, एक शीर्ष सीमा की कमी का एक संयोजन, स्टैकपैनल में पाठ का घोंसला बनाना (वास्तविक स्थिति में, बटन में एक तस्वीर भी थी) और पाठ की एक तेज शिफ्ट में एक या दो पिक्सल काम करने लगता है।

विपक्ष

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

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


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

6. SnapsToDevicePixels संपत्ति का उपयोग करना

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

 <!--      --> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.RowDefinitions> <RowDefinition Height="10"/> <RowDefinition Height="20"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="25"/> <ColumnDefinition Width="6"/> </Grid.ColumnDefinitions> <!--  (  ,  ) --> <Ellipse Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Fill="Black" Width="10" Height="10" VerticalAlignment="Top" Margin="15 5 0 0"/> <Line Grid.RowSpan="2" X1="10" X2="20" Y1="1" Y2="11" Stroke="Black"/> <Line Grid.ColumnSpan="2" Grid.RowSpan="2" X1="30" X2="20" Y1="1" Y2="11" Stroke="Black" /> <!--    (   ) --> <Border Grid.ColumnSpan="2" Grid.Row="1" Background="#FFF7941D"/> <Rectangle Grid.Column="0" Grid.Row="1" Fill="White" RadiusX="3" RadiusY="3" Margin="2.5"/> <!--  (  1,    ) --> <Line Grid.Column="1" Grid.Row="1" StrokeThickness="1" Stroke="Black" X1="0" X2="4" Y1="3" Y2="3"/> <Line Grid.Column="1" Grid.Row="1" StrokeThickness="1" Stroke="Black" X1="0" X2="4" Y1="5" Y2="5"/> <Line Grid.Column="1" Grid.Row="1" StrokeThickness="1" Stroke="Black" X1="0" X2="4" Y1="7" Y2="7"/> </Grid> 

नीचे दिए गए चित्र में, डेमो छवि के साथ नियंत्रण 0.2 पिक्सेल चरणों में चलता है। सबसे पहले, वह प्रत्येक कुल्हाड़ियों के साथ अलग-अलग करता है, फिर एक सर्कल के एक चाप के साथ। आंदोलन के चरण के आधार पर, नियंत्रण का स्थानीय समन्वय ग्रिड भौतिक रेखापुंज ग्रिड पर अलग से लगाया जाता है।



कभी-कभी टीवी की बाहरी सीमाएँ स्पष्ट होती हैं, कभी-कभी इसकी स्क्रीन की सीमाएँ भी होती हैं, लेकिन कभी भी ऐसा नहीं होता है। बटन क्षैतिज या लंबवत रूप से स्पष्ट हैं, और अधिक बार दोनों कुल्हाड़ियों पर धुंधले होते हैं। किसी भी संयोजन में एंटीना थोड़ा चिकना है और इस कारण से जटिल नहीं है।

विपक्ष

आप SnapsToDevicePixels गुण को True (ऐसा करने के लिए, बस रूट ग्रिड पर यह विशेषता सेट करें) सेट करके पिक्सेल बाइंडिंग के लिए नियंत्रण सक्षम कर सकते हैं। परिणाम अधिक स्थिर होगा:



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

SnapsToDevicePixels गुण को सही पर सेट करना दृश्य तत्व को प्रदान करते समय स्क्रीन पिक्सल की सीमाओं के भीतर गिरने के लिए प्रोत्साहित करता है। प्रत्येक नियंत्रण अलग-अलग उत्साह और अलग-अलग तरीकों से ऐसा करने का प्रयास करेगा। उदाहरण के लिए, छवि , लेबल और टेक्स्टब्लॉक पूरी तरह से इस विशेषता के प्रति उदासीन हैं। स्रोत ज्यामिति के सफल होने पर लाइन केवल पिक्सल को हिट करेगी। आयत , इसके विपरीत, पैंट से बाहर कूद जाएगा और हमेशा पिक्सेल को हिट करेगा।

अधिक स्थिर पिक्सेल तड़क के लिए, आपको मूल छवि को समायोजित करने की आवश्यकता है:

1. बटन का प्रतिनिधित्व करने वाली लाइनों के सभी वाई-निर्देशांक में 0.5 जोड़ दें ताकि उनके किनारों को नियंत्रण स्थान में पिक्सेल ग्रिड के साथ मिलाया जाए;
2. उदाहरण के लिए, टीवी स्क्रीन पूर्णांक को इंडेंट करें, ताकि यह निकटतम पिक्सेल सीमाओं से बंधन को हिला न सके।

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

7. स्व-ड्राइंग नियंत्रण

यदि आप अपने विजुअल एलिमेंट में ऑनरेंडर को ओवरलैप करते हैं और ड्रॉइंग कॉन्टेक्स्ट का उपयोग करके इसे ड्रा करते हैं, तो आपके पास पिछली विधि से शेप वार के समान ही रैस्टराइजेशन की समस्या है, लेकिन आपको खुद SnapsToDevicexixels कार्यक्षमता को लागू करना होगा। यदि, निश्चित रूप से, आप चाहते हैं। आप परेशान नहीं हो सकते हैं और ऐसा कुछ कर सकते हैं:

 public class Washer : FrameworkElement { public Washer() { _brush = new SolidColorBrush(Color.FromRgb(247, 148, 29)); _brush.Freeze(); _pen = new Pen(Brushes.Black, 1); _pen.Freeze(); } protected override void OnRender(DrawingContext dc) { // dc.DrawLine(_pen, new Point(1, 21), new Point(4, 21)); dc.DrawLine(_pen, new Point(12, 21), new Point(15, 21)); // var rect = new Rect(0, 0, 16, 21); dc.DrawRectangle(_brush, null, rect); // dc.DrawLine(_pen, new Point(12, 1), new Point(12, 4)); dc.DrawLine(_pen, new Point(14, 1), new Point(14, 4)); // dc.DrawEllipse(Brushes.White, _pen, new Point(8, 11), 5, 5); //   rect = new Rect(10, 10, 4, 2); dc.DrawRectangle(Brushes.White, _pen, rect); } private Pen _pen; private Brush _brush; } 

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


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

विपक्ष

WPF पिक्सेल के लिए तड़क-भड़क के लिए विशेष उपकरण प्रदान करता है - दिशानिर्देश । नियंत्रण प्रदान करने के लिए क्रियाओं की एक श्रृंखला बनाने के चरण में (यह वही है जो ऑनरेंडर विधि करती है ), आप नियंत्रण स्थान में ऊर्ध्वाधर और क्षैतिज निर्देशांक निर्दिष्ट कर सकते हैं, जो कि आउटपुट के समय, पिक्सेल की सीमाओं में बिल्कुल फिट होना चाहिए।


कोड में, यह इस तरह दिखता है ( केवल ऑनरेंडर विधि):

 protected override void OnRender(DrawingContext dc) { double halfPen = _pen.Thickness / 2; // var snapX = new double[] { 1, 12 }; var snapY = new double[] { 21 + halfPen }; dc.PushGuidelineSet(new GuidelineSet(snapX, snapY)); dc.DrawLine(_pen, new Point(1, 21), new Point(4, 21)); dc.DrawLine(_pen, new Point(12, 21), new Point(15, 21)); dc.Pop(); // snapX = new double[] { 0, }; snapY = new double[] { 21 }; dc.PushGuidelineSet(new GuidelineSet(snapX, snapY)); var rect = new Rect(0, 0, 16, 21); dc.DrawRectangle(_brush, null, rect); dc.Pop(); // snapX = new double[] { 12 - halfPen }; snapY = new double[] { 1 }; dc.PushGuidelineSet(new GuidelineSet(snapX, snapY)); dc.DrawLine(_pen, new Point(12, 1), new Point(12, 4)); dc.DrawLine(_pen, new Point(14, 1), new Point(14, 4)); dc.Pop(); // snapX = new double[] { 3 - halfPen }; snapY = new double[] { 6 - halfPen }; dc.PushGuidelineSet(new GuidelineSet(snapX, snapY)); dc.DrawEllipse(Brushes.White, _pen, new Point(8, 11), 5, 5); dc.Pop(); //   snapX = new double[] { 10 - halfPen }; snapY = new double[] { 10 - halfPen }; dc.PushGuidelineSet(new GuidelineSet(snapX, snapY)); rect = new Rect(10, 10, 4, 2); dc.DrawRectangle(Brushes.White, _pen, rect); dc.Pop(); } 

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



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

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

वैकल्पिक काउंटर

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

1. स्रोत डेटा के निर्देशांक पिक्सेल की सीमाओं के भीतर होने चाहिए।96 डीपीआई के लिए, आप Math.Round का उपयोग कर सकते हैं , सामान्य स्थिति के लिए आपको एक विशिष्ट पिक्सेल आकार में गोल करना होगा;
2. उपयोग किए जाने वाले पंखों की चौड़ाई पिक्सेल आकार की एक बहु होनी चाहिए;
3. ऐसे मामलों में जहां पेन की चौड़ाई में पिक्सेल की एक विषम संख्या होती है, प्रदर्शित आदिम के निर्देशांक को पिक्सेल की आधी चौड़ाई से स्थानांतरित किया जाना चाहिए;
4. नियंत्रण प्रदर्शित करते समय, रैस्टर ग्रिड के सापेक्ष इसके निर्देशांक की शिफ्ट के लिए इसे सही करना आवश्यक है और इसके किसी भी मूवमेंट पर ऑनरेंडर को पुनः आरंभ करना है ।

ऐसे स्थिर वर्ग का उपयोग करके पहले दो बिंदुओं को लागू किया जा सकता है (इसके टुकड़े पहले दो खंडों में दिए गए थे):

 //           public static class Render { static Render() { var flags = BindingFlags.NonPublic | BindingFlags.Static; var dpiProperty = typeof(SystemParameters).GetProperty("Dpi", flags); Dpi = (int)dpiProperty.GetValue(null, null); PixelSize = 96.0 / Dpi; HalfPixelSize = PixelSize / 2; } //      public static double PixelSize { get; private set; } //  public static int Dpi { get; private set; } //    static public double SnapToPixels(double value) { value += HalfPixelSize; //  DPI    WPF- . //  1000  -   //     double //2.4 / 0.4 = 5.9999999999999991 //2400.0 / 400.0 = 6.0 var div = (value * 1000) / (PixelSize * 1000); return (int)div * PixelSize; } private static readonly double HalfPixelSize; } 

यदि किसी भी मूल्य (उदाहरण के लिए, पेन की चौड़ाई या स्क्रीन कोऑर्डिनेट) को पिक्सेल आकार में मजबूती से बांधने की आवश्यकता है, तो इसे Render.PixelSize * n के रूप में सेट करें । यदि आपको इसे कई पिक्सेल आकार में गोल करना है, तो आपको Render.SnapToPixels विधि का उपयोग करना होगा ।

स्वतंत्र रूप से तैयार किए गए नियंत्रणों के लिए एक आधार वर्ग के रूप में तीसरी और चौथी स्थितियों (नियंत्रणों के सबस्पिक्ल शिफ्ट्स और पंखों के विषम आकार के लिए सुधार) को लागू करना सुविधाजनक है:

 public class SelfDrawingControlBase : FrameworkElement { public SelfDrawingControlBase() { Snap = 0.5 * Render.PixelSize; SubpixelOffset = new Point(0, 0); LayoutUpdated += OnLayoutUpdated; } protected void OnLayoutUpdated(object sender, EventArgs e) { FixSubpixelOffset(); InvalidateVisual(); } //         protected void SnapLine(Pen pen, ref Point begin, ref Point end) { var snapX = -SubpixelOffset.X; var snapY = -SubpixelOffset.Y; if (IsOdd(pen.Thickness)) { if (begin.X == end.X) snapX += Snap; if (begin.Y == end.Y) snapY += Snap; } begin.X += snapX; begin.Y += snapY; end.X += snapX; end.Y += snapY; } //         protected void SnapRectangle(Pen pen, ref Rect rect) { var snapX = -SubpixelOffset.X; var snapY = -SubpixelOffset.Y; if (pen != null && IsOdd(pen.Thickness)) { snapX += Snap; snapY += Snap; } rect.Location = new Point(rect.Left + snapX, rect.Top + snapY); } //         protected void SnapEllipse(Pen pen, ref Point center) { var snapX = -SubpixelOffset.X; var snapY = -SubpixelOffset.Y; if (pen != null && IsOdd(pen.Thickness)) { snapX += Snap; snapY += Snap; } center.X += snapX; center.Y += snapY; } //       protected double Snap { get; private set; } //      protected Point SubpixelOffset { get; private set; } //      //        private void FixSubpixelOffset() { var offset = TranslatePoint(new Point(0, 0), Application.Current.MainWindow); SubpixelOffset = new Point( ModByPixel(offset.X), ModByPixel(offset.Y)); } //     private static bool IsOdd(double value) { //  DPI    WPF- . //  1000  -   //     double //1.0 % 0.1 = 0.09999999999999995 //1000.0 % 100.0 = 0.0 return (value * 1000) % (Render.PixelSize * 2 * 1000) != 0; } //      private static double ModByPixel(double value) { return ((value * 1000) % (Render.PixelSize * 1000)) / 1000; } } 

इस कक्षा की मुख्य कार्यक्षमता ग्राफिक आदिम के निर्देशांक को सही करने से पहले उन्हें प्रदर्शित करना है। SnapXXX विधियाँ मूल डेटा को संशोधित करती हैं ताकि रेंडरिंग परिणाम पिक्सेल की सीमाओं के भीतर गिर जाए।

आयताकार और दीर्घवृत्त विषम चौड़ाई के पंखों के साथ पूरी तरह से आधे पिक्सेल द्वारा स्थानांतरित करने के लिए पर्याप्त हैं। क्षैतिज रेखाओं के लिए, आपको Y समन्वय को समायोजित करने की आवश्यकता है और ऊर्ध्वाधर लाइनों के लिए - इसके विपरीत, X समन्वय को स्पर्श न करें। समन्वय सुधार के दौरान, पिक्सेल ग्रिड के सापेक्ष नियंत्रण की पारी को भी ध्यान में रखा जाता है।

वॉशिंग मशीन के साथ उदाहरण के लिए पिक्सल में स्नैप करें:

 public class Washer : SelfDrawingControlBase { public Washer() { _brush = new SolidColorBrush(Color.FromRgb(247, 148, 29)); _brush.Freeze(); _pen = new Pen(Brushes.Black, 1); _pen.Freeze(); } protected override void OnRender(DrawingContext dc) { // Point start = new Point(1, 21); Point end = new Point(4, 21); SnapLine(_pen, ref start, ref end); dc.DrawLine(_pen, start, end); start = new Point(12, 21); end = new Point(15, 21); SnapLine(_pen, ref start, ref end); dc.DrawLine(_pen, start, end); // var rect = new Rect(0, 0,16, 21); SnapRectangle(null, ref rect); dc.DrawRectangle(_brush, null, rect); // start = new Point(12, 1); end = new Point(12, 4); SnapLine(_pen, ref start, ref end); dc.DrawLine(_pen, start, end); start = new Point(14, 1); end = new Point(14, 4); SnapLine(_pen, ref start, ref end); dc.DrawLine(_pen, start, end); // var center = new Point(8, 11); SnapEllipse(_pen, ref center); dc.DrawEllipse( Brushes.White, _pen, center, 5, 5); //   rect = new Rect(10, 10, 4, 2); SnapRectangle(_pen, ref rect); dc.DrawRectangle(Brushes.White, _pen, rect); } private Pen _pen; private Brush _brush; } 

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



उदाहरण का दिया गया समाधान केवल 96 डीपीआई के मानक रिज़ॉल्यूशन में काम करता है - प्राइमरी के कलम आकार और निर्देशांक स्पष्टता के लिए विशिष्ट संख्याओं के साथ कोड में डाले जाते हैं। यदि आपको किसी भी रिज़ॉल्यूशन में पिक्सेल को सही ढंग से स्नैप करने के लिए छवि की आवश्यकता है , तो डेटा को SnapXXX विधियों में स्थानांतरित करने से पहले , आपको Render.SnapToPixels विधि का उपयोग करके उन्हें पिक्सेल सीमाओं पर गोल करना होगा ।
यहाँ, उदाहरण के लिए, नियंत्रण एक आयत को खींचता है जो रिज़ॉल्यूशन को बदलते समय पर्याप्त रूप से मापता है और पिक्सेल की सीमा में आता है:

 public class CrossDpiBrick : SelfDrawingControlBase { public CrossDpiBrick() { _brush = new SolidColorBrush(Color.FromRgb(247, 148, 29)); _brush.Freeze(); _pen = new Pen(Brushes.Black, Render.SnapToPixels(7)); _pen.Freeze(); } protected override void OnRender(DrawingContext dc) { var rect = new Rect(Render.SnapToPixels(10), Render.SnapToPixels(10), Render.SnapToPixels(120), Render.SnapToPixels(40)); SnapRectangle(_pen, ref rect); dc.DrawRoundedRectangle(_brush, _pen, rect, Render.SnapToPixels(10), Render.SnapToPixels(10)); } private Pen _pen; private Brush _brush; } 

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

निष्कर्ष

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

इसके लिए, सबसे पहले, यह आवश्यक है कि रेखांकन की उभरती समस्याओं को नोटिस किया जाए। यह इतना आसान नहीं है। यहां तक ​​कि Microsoft उत्पादों को हमेशा सही तस्वीर घमंड नहीं है। उदाहरण के लिए, Microsoft Word 2010 में एकीकृत वेक्टर ग्राफिक्स संपादक के तत्व हैं:

परिचित कलाकृतियों? यदि अब आपके लिए ऐसी पता की गई समस्याओं का उन्मूलन एक तकनीकी मामला है, तो इस गाइड का उद्देश्य प्राप्त हो गया है। आपका ध्यान के लिए धन्यवाद!

संदर्भ

MSDN - पिक्सेल स्नैपिंग आवेदन एक WPF में
MSDN - संपत्ति UIElement.UseLayoutRounding
पीट ब्राउन है - अपने फ़ॉन्ट्स में पाठ का चयन करें और विकल्प प्रतिपादन बुद्धिमानी
MSDN ब्लॉग - एक WPF 4.0 पाठ ढेर सुधार
MSDN - कैसे करें: एक ड्राइंग के लिए एक GuidelineSet लागू करें
MSDN - UIElement.SnapsToDevicePixels संपत्ति

स्रोत डेमो कोड: डाउनलोड (104 Kb)

चित्र के लिए धन्यवाद:

रोमेन

मेलकोपुज़

सेवेंडोट