渲染銳利的線條在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。

的另一個選項是關閉抗鋸齒，但是，這將使你的邊緣鋸齒狀這可能不是你想要的（抗混疊在上半關閉）：

alt text http://hypftier.de/dump/wpf_rendering_shape.png