Rendu des lignes nettes dans WPF

Question

Si je rends les éléments suivants:

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

je reçois ce résultat (Kaxaml):

Notez la mince ligne blanche entre les deux formes. J'ai cherché autour de et a découvert que cela a à voir avec l'alignement des pixels. Je m'attendrais à ce que les paramètres SnapsToDevicePixels="True" suffiraient pour se débarrasser de la ligne, mais cela ne fonctionne pas!

Des idées pour se débarrasser de la ligne blanche?

Answer 1

Essayez tourner bord aliasing avec RenderOptions, comme celui-ci (voir Propriétés de la grille)

<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

Rappelez-vous que SnapsToDevicePixels contrôle uniquement que les points individuels ne se trouvent pas sur des valeurs de pixels fractionnaires. Pour les lignes horizontales et verticales, ceci est le plus facilement observé. Dans votre cas, vous voyez un problème entièrement différent. Les bords de vos formes sont anti-aliasés et donc mélangés avec l'arrière-plan. Puisque vos formes sont exactement adjacentes, elles seront toutes deux mélangées avec le fond blanc de la fenêtre. Vous pouvez essayer de mettre une forme derrière l'autre au lieu:

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

qui devrait rendre correctement. Vous voyez des erreurs de rendu similaires dans de nombreux formats de fichiers vectoriels qui s'affichent principalement à l'écran, tels que SVG.

L'autre option serait de désactiver l'anti-aliasing, mais qui fera de vos bords Jaggy qui peuvent ne pas être ce que vous voulez (anti-aliasing désactivé dans la moitié supérieure):

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