在 WPF 中渲染清晰的线条答案

【问题标题】：Rendering sharp lines in WPF在 WPF 中渲染清晰的线条
【发布时间】：2010-12-21 23:02:30
【问题描述】：

如果我呈现以下内容：

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

任何想法如何摆脱白线？

【问题讨论】：

标签： c# wpf xaml path drawing

【解决方案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>

【讨论】：

【解决方案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）中看到类似的呈现错误。

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

【讨论】：