đường nét Rendering trong WPF

Question

Nếu tôi làm như sau:

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

tôi nhận được kết quả này (Kaxaml):

Thông báo dòng trắng mỏng giữa hai hình dạng. Tôi tìm kiếm xung quanh và phát hiện ra điều này đã làm với sự liên kết pixel. Tôi hy vọng rằng các thiết lập SnapsToDevicePixels="True" sẽ là đủ để loại bỏ các dòng, nhưng điều này không hoạt động!

Bất kỳ ý tưởng nào về cách loại bỏ đường màu trắng?

Answer 1

Hãy thử quay mép răng cưa trên với RenderOptions, như thế này (xem tính Lưới)

<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

Hãy nhớ rằng SnapsToDevicePixels chỉ kiểm soát các điểm cá nhân không nằm trên giá trị pixel phân đoạn. Đối với các đường ngang và dọc, điều này dễ quan sát nhất. Trong trường hợp của bạn, bạn đang thấy một vấn đề hoàn toàn khác. Các cạnh của hình dạng của bạn được chống răng cưa và do đó được pha trộn với nền. Vì các hình dạng của bạn là chính xác liền kề với nhau cả hai sẽ được pha trộn với nền trắng của cửa sổ. Bạn có thể thử đặt một hình dạng đằng sau người khác thay vì:

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

mà nên làm một cách chính xác. Bạn thấy các lỗi hiển thị tương tự trong nhiều định dạng tệp vectơ hiển thị chủ yếu cho màn hình, chẳng hạn như SVG.

Các tùy chọn khác sẽ được tắt anti-aliasing nhưng điều đó sẽ làm cho các cạnh của bạn thêm mịn mà có thể không được những gì bạn muốn (anti-aliasing tắt ở nửa trên):

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