在WPF中呈现清晰的线条

Question

如果我呈现以下内容：

<Grid>
  <Canvas SnapsToDevicePixels="True">  
    <Path Fill="#FF000000" SnapsToDevicePixels="True" Data="M 0.00,0.00 L 2.50,0.00 0.00,10.00 " />
    <Path Fill="#FF260014" SnapsToDevicePixels="True" Data="M 2.50,0.00 L 7.50,0.00 2.50,10.00 0.00,10.00 " />
    <Canvas.RenderTransform>
      <ScaleTransform ScaleX="{Binding ElementName=slider,Path=Value}" ScaleY="{Binding ElementName=slider,Path=Value}" />
    </Canvas.RenderTransform>
  </Canvas>
  <Slider x:Name="slider" Minimum="0" Maximum="50" Value="30"/>
</Grid>

我得到了这个结果（Kaxaml）：

注意两个形状之间的细白线。我搜索了一下，发现这与像素对齐有关。我本以为设置SnapsToDevicePixels="True"就足以消除这条线，但这并不起作用！你有什么好的想法来消除这条白线吗？

- Robbert Dam

Answer 1

尝试通过RenderOptions打开边缘反锯齿，就像这样（请参见Grid属性）

<Grid RenderOptions.EdgeMode="Aliased">
  <Canvas SnapsToDevicePixels="True">  
        <Path Fill="#FF000000" SnapsToDevicePixels="True" Data="M 0.00,0.00 L 2.50,0.00 0.00,10.00 " />
        <Path Fill="#FF260014" SnapsToDevicePixels="True" Data="M 2.50,0.00 L 7.50,0.00 2.50,10.00 0.00,10.00 " />
        <Canvas.RenderTransform>
          <ScaleTransform ScaleX="{Binding ElementName=slider,Path=Value}" ScaleY="{Binding ElementName=slider,Path=Value}" />
        </Canvas.RenderTransform>
  </Canvas>

  <Slider x:Name="slider" Minimum="0" Maximum="50" Value="30"/>
</Grid>

- Massimiliano

Answer 2

请记住，SnapsToDevicePixels只控制单个点不位于分数像素值上。对于水平和垂直线条，这最容易观察。在您的情况下，您看到了一个完全不同的问题。您的形状的边缘是抗锯齿的，因此与背景混合。由于您的形状是完全相邻的，因此两者都将与窗口的白色背景混合。您可以尝试将一个形状放在另一个形状后面：

<Canvas>  
      <Path Fill="#FF000000" Data="M 0.00,0.00 L 7.50,0.00 2.50,10.00 0.00,10.00 " />
      <Path Fill="#FF260014" Data="M 2.50,0.00 L 7.50,0.00 2.50,10.00 0.00,10.00 " />
      <Canvas.RenderTransform>
           <ScaleTransform ScaleX="{Binding ElementName=slider,Path=Value}" ScaleY="{Binding ElementName=slider,Path=Value}" />
      </Canvas.RenderTransform>
</Canvas>

这应该可以正确地呈现。您会在许多主要呈现到屏幕的矢量文件格式（例如SVG）中看到类似的呈现错误。

另一种选择是关闭反锯齿，但这将使您的边缘变得粗糙，这可能不是您想要的（上半部分关闭反锯齿）：

- Joey