Рендеринг четких линий в WPF - PullRequest
Новая
       36

Рендеринг четких линий в WPF

8 голосов
/ 01 декабря 2009

Если я сделаю следующее: 

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

enter image description here

Обратите внимание на тонкую белую линию между двумя фигурами. Я искал вокруг и обнаружил, что это связано с выравниванием пикселей. Я ожидаю, что настроек SnapsToDevicePixels="True" будет достаточно, чтобы избавиться от линии, но это не работает!

Есть идеи, как избавиться от белой линии?

Ответы [ 2 ]

12 голосов
/ 01 декабря 2009

Попробуйте включить псевдоним ребер с помощью 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>
4 голосов
/ 01 декабря 2009

Помните, что 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

...