[UWP]如何减轻别名效应？ [英] [UWP] How Do I Mitigate Aliasing Effects?

问题描述

我正在构建一个Windows 10 UWP应用程序，我似乎遇到了一种似乎被Windows 10 全局缩放因子放大的行为。  我在使用填充模式拉伸的图像旁边看到1像素的间隙。
图像本身沿其边缘没有空白或透明像素。 它似乎是由亚像素定位或混叠引起的，但我不确定最好的方法是什么来补救它。 如果我选择一个导致有效像素
=实际像素的硬件设备，则问题就会消失，填充模式会按预期工作。

示例：两个垂直黑带

p>

这是XAML - 非常简洁：

我尝试过UseLayoutRounding = True。  ...我可以使用负边距或通过扩展"填充图像"和分层来解决这个问题。但是，我很好奇是否知道是否存在"对齐像素" Windows
10 UWP。  

...两年前，我很震惊地得知在Windows 8.1中没有绘制非别名的机制1像素行（在使用Win2D之外）。  在Windows UWP中解决了这些难点吗？  您的反馈或想法非常感谢
。 谢谢！

Shaun

解决方案

Hello Shaun，

从你的图片来看，它似乎很奇怪，所以根据你的XAML代码，我也用以下代码进行了测试：

< Grid Background =" {ThemeResource ApplicationPageBackgroundThemeBrush}"> 
 
< Grid Name =" MyGrid"高度= QUOT; 78" VerticalAlignment = QUOT;中心"的Horizo​​ntalAlignment = QUOT;中心" > 
 
< Grid.ColumnDefinitions> 
 
< ColumnDefinition Width =" auto" /> 
 
< ColumnDefinition Width =" *" /> 
 
< ColumnDefinition Width =" auto" /> 
 
< ColumnDefinition Width =" *" /> 
 
< ColumnDefinition Width =" auto" /> 
 
< /Grid.ColumnDefinitions> 
 
< Image Name =" I0" Grid.Column = QUOT; 0"宽度= QUOT; 22"高度= QUOT; 78"拉伸= QUOT;无" /> 
 
< Image Name =" I1" Grid.Column = QUOT 1 QUOT;高度= QUOT; 78"拉伸= QUOT;无" /> 
 
< Image Name =" I2" Grid.Column = QUOT; 2英寸宽度= QUOT 86 QUOT;高度= QUOT; 78"拉伸= QUOT;无" /> 
 
< Image Name =" I3" Grid.Column = QUOT; 3英寸高度= QUOT; 78"拉伸= QUOT;无" /> 
 
< Image Name =" I4" Grid.Column = QUOT; 4英寸宽度= QUOT; 26"高度= QUOT; 78"拉伸= QUOT;无" /> 
< / Grid> 
< / Grid> 

与您的及其代码相同：

 public BlankPage1（）
 {
 this.InitializeComponent（）; 
 this.Loaded + = BlankPage1_Loaded; 
} 
 
 private void BlankPage1_Loaded（object sender，RoutedEventArgs e）
 {
 BitmapImage bi0 = new BitmapImage（）; 
 bi0.UriSource = new Uri（" ms-appx：///Assets/200x200.png"）; 
 I0.Source = bi0; 
 BitmapImage bi1 = new BitmapImage（）; 
 bi1.UriSource = new Uri（" ms-appx：///Assets/100x100.png"）; 
 I1.Source = bi1; 
 BitmapImage bi2 = new BitmapImage（）; 
 bi2.UriSource = new Uri（" ms-appx：///Assets/200x200.png"）; 
 I2.Source = bi2; 
 BitmapImage bi3 = new BitmapImage（）; 
 bi3.UriSource = new Uri（" ms-appx：///Assets/100x100.png"）; 
 I3.Source = bi3; 
 BitmapImage bi4 = new BitmapImage（）; 
 bi4.UriSource = new Uri（" ms-appx：///Assets/200x200.png"）; 
 I4.Source = bi4; 
} 

结果：

它看起来好在我身边。我想这与图像有关，所以如果可能的话，你可以与我们分享你的图像，以便我们可以帮助我们进行测试。

问候。

I am building a Windows 10 UWP app and I seem to have run into a behavior which appears to be magnified by the Windows 10 global scaling factor.  I am seeing a 1 pixel gap alongside an image that is stretched using the fill mode. The image itself has no whitespace or transparent pixels along its edge.  It seems to be caused by subpixel positioning or aliasing but I am not sure what the best approach is to remedy it.  If I pick a hardware device that results in effective pixels = actual pixels, the problem goes away and the fill mode works as expected.

Example: two vertical black bands

Here is the XAML -- very succinct:

I tried UseLayoutRounding=True.  ...I can get around this problem using negative Margin or by expanding the "fill image" and layering.  However, I am very curious to know if there is a "snap to pixels' equivalent for Windows 10 UWP.  

...Two years ago I was shocked to learn that in Windows 8.1 there is no mechanism to draw a non-aliased 1 pixel line (outside of using Win2D).  Have these pain points been addressed in Windows UWP?   Your feedback or thoughts are greatly appreciated.  Thank you!

Shaun

解决方案

Hello Shaun,

From your image, it seems to be strange, so according your XAML code, I also made a test with below code:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid Name="MyGrid" Height="78" VerticalAlignment="Center" HorizontalAlignment="Center" >

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="auto"/>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="auto"/>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="auto"/>

            </Grid.ColumnDefinitions>

            <Image Name="I0" Grid.Column="0" Width="22" Height="78" Stretch="None"/>

            <Image Name="I1" Grid.Column="1" Height="78" Stretch="None"/>

            <Image Name="I2" Grid.Column="2" Width="86" Height="78" Stretch="None"/>

            <Image Name="I3" Grid.Column="3" Height="78" Stretch="None"/>

            <Image Name="I4" Grid.Column="4" Width="26" Height="78" Stretch="None"/>
        </Grid>
    </Grid>

It is same with yours and its behind code:

public BlankPage1()
        {
            this.InitializeComponent();
            this.Loaded += BlankPage1_Loaded;
        }

        private void BlankPage1_Loaded(object sender, RoutedEventArgs e)
        {
            BitmapImage bi0 = new BitmapImage();
            bi0.UriSource = new Uri("ms-appx:///Assets/200x200.png");
            I0.Source = bi0;
            BitmapImage bi1 = new BitmapImage();
            bi1.UriSource = new Uri("ms-appx:///Assets/100x100.png");
            I1.Source = bi1;
            BitmapImage bi2 = new BitmapImage();
            bi2.UriSource = new Uri("ms-appx:///Assets/200x200.png");
            I2.Source = bi2;
            BitmapImage bi3 = new BitmapImage();
            bi3.UriSource = new Uri("ms-appx:///Assets/100x100.png");
            I3.Source = bi3;
            BitmapImage bi4 = new BitmapImage();
            bi4.UriSource = new Uri("ms-appx:///Assets/200x200.png");
            I4.Source = bi4;
        }

The result:

It looks to be ok on my side. I guess it be related with the images, so if possible, you could share your images with us so that we could help make a test with it.

Regards.

这篇关于[UWP]如何减轻别名效应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！