渲染WPF锐利的线条 [英] Rendering sharp lines in WPF

问题描述

如果我呈现以下内容：

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

I get this result (Kaxaml):

注意的细白线两个形状。我搜索了一圈，发现了这与像素对齐做。我期望设置SnapsToDevicePixels =真就足以摆脱线，但不起作用！

Notice the thin white line between the two shapes. I searched around and found out this has to do with pixel alignment. I would expect that settings SnapsToDevicePixels="True" would be enough to get rid of the line, but this doesn't work!

任何想法如何摆脱白线？

Any ideas how to get rid of the white line?

推荐答案

尝试关闭边缘与RenderOptions走样上，像这样（见网格属性）

Try turning edge aliasing on with RenderOptions, like this (see Grid properties)

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

这篇关于渲染WPF锐利的线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！