在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"足以摆脱界限，但这不起作用！

任何想法如何摆脱白线？

Answer 1

尝试使用RenderOptions打开边缘别名，如下所示（参见网格属性）

<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>

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。

另一种选择是关闭消除锯齿，但这会使你的边缘锯齿，这可能不是你想要的（在上半部分关闭了抗锯齿）：