WPF基於物理畫素繪製圖形

2022-06-27 18:02:01

WPF中有一個DrawingContext類，該類提供了很多畫法方法，例如DrawLine，DrawText，DrawRectangle等。開發者使用它們可以方便地進行圖形繪製。不過，在使用DrawingContext過程中，我發現使用DawLine方法畫出的線條在某些部分有些模糊。這個問題的解決，需要一些計算機圖學方面的知識，使用的方法並不是很複雜。不過，這個方法所涉及到的一些過程有些令人費解（好吧，我沒有專門學過計算機圖學），本文是我在實踐中的一些嘗試和經驗的總結。

還是從一個例子開始吧：
從FrameworkElement繼承一個MyRectangleElement，然後重寫OnRender方法如下：

protected override void OnRender(DrawingContext drawingContext)
{
    Pen pen = new Pen(Brushes.Black, 1);
    Rect rect = new Rect(20,20, 50, 60); 
    drawingContext.DrawRectangle(null, pen, rect);
}

然後在Window上呈現MyRectangleElement，效果（右下角有放大鏡）如下：

通過放大圖形，能夠很清晰地看到線條是不均勻的，在宏觀視覺效果上感覺模糊，看上去很不舒服。於是，兩個問題就產生了：

為什麼會出現這樣的問題？
如何解決？

怎麼辦？MSDN，百度，Google一起上！皇天不負苦心人，現在，謎底來到了我們的面前：

1、為什麼會出現這樣的效果呢？

WPF呈現引擎的反鋸齒系統將那些沒有在物理畫素系統上的線擴充套件到了多個畫素上。這裡涉及到以下三個概念：

物理畫素系統：與物理圖形裝置相關。可以簡單地理解為一個畫素點的二維矩陣；
邏輯畫素系統：我們在畫法方法中所使用的定位系統；
反鋸齒效果：一種計算機圖學上的演演算法，使得圖形邊緣更光滑；

宣告：以上三個概念的解釋是根據我個人的理解，不一定準確、嚴謹。如果您發現什麼不對的地方，還望不吝指正。
為了更好地幫助您理解這個過程，這裡給出一個示意圖來解釋一下：

上圖中的淡藍色網格可以視為“物理畫素系統”，深色的圖案是您畫出的線條。可以很明顯地看出，這條線的四條邊都不在“物理畫素系統”上，因此，“反鋸齒系統”會將此線條的四條邊擴充套件到相應的“物理畫素系統”上。於是，本文最開始的情景便出現了。

2、如何解決這個問題？

針對不同的問題上下文，WPF給出了與之相應的解決方案。據我所知，有如下幾個：

1> 對於UIElement及其子類，使用SnapsToDevicePixels屬性

對於從UIElement繼承的型別，比如Control，通過將SnapsToDevicePixels設定為true可以得到清晰的影象，該屬性的預設值為false。FrameworkElement從UIElement繼承的時候，給這個屬性賦予了一個Inherited後設資料。如此一來，只要您在FrameworkElement Tree的根結點上將此屬性設定為true，那麼整個FrameworkElement Tree的繪製都將變得清晰起來。

2> 對於自定義畫法，使用GuidelineSet

SnapsToDevicePixels屬性對於WPF Control來說是有用的，但是對本文的問題無能為力，於是，嗯，GuidelineSet橫空出世！對於這個類，MSDN只是給出了一個用法的範例，從這個例子中我只能看到GuidelineSet可以這麼用，但為什麼是這樣用就沒有答案了。而且，有點離譜、神奇的是：MSDN上關於這點上一個示意圖內容上有錯。如下圖所示：

圖下部的左黑框是用了GuidelineSet後出現的結果，右邊才是沒有使用的結果。這兩個圖的位置應該互換一下。

我們必須回答這個問題：如果在(x1,y1) (x2,y2)處畫一條線該如何在DrawingContext上使用GuidelineSet，以保證畫法是清晰的呢?

這個問題讓我著實納悶了許久（原因本文第一段已經交代），不過，經過不斷地嘗試和思考，最終我找到了答案：
Guideline其實是圖形裝置在呈現時用來把邏輯畫素點對齊到物理畫素點的參考量。使用它告訴圖形裝置你希望哪些邏輯畫素點被對齊到物理畫素點上。

宣告：以上概念的解釋是根據我個人的理解，不一定準確、嚴謹。如果您發現什麼不對的地方，還望不吝指正。

下面，我將使用一個簡單的範例來演示如何使用GuidelineSet，以及它所帶來的效果。在這個範例中，我們使用DrawingContext的DrawLine方法繪製一個10×10的網格，相關程式碼如下：
首先，定義畫法所用到的常數

    internal static class DrawingConstants
    {
        public static readonly int Rows = 10;
        public static readonly int Columms = 10;
        public static readonly double PenThickness = 1.0;
        public static readonly double HalfOfPenThickness = PenThickness/2;
    }

然後，定義NormalDrawingElement（使用一般畫法）：

    class NormalDrawingElement : FrameworkElement
    {
        protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)
        {
            base.OnRender(drawingContext);

            double xOffset = Math.Floor(this.RenderSize.Width / DrawingConstants.Columms);
            double yOffset = Math.Floor(this.RenderSize.Height / DrawingConstants.Rows);
            double xLineWidth = Math.Floor(this.RenderSize.Width);
            double yLineHeight = Math.Floor(this.RenderSize.Height);

            DrawingContext dct = drawingContext;
            Pen blackPen = new Pen(Brushes.Black, DrawingConstants.PenThickness);
            blackPen.Freeze();

            //Draw the horizontal lines  
            Point x = new Point(0, 0);
            Point y = new Point(xLineWidth, 0);
            for (int i = 0; i <= DrawingConstants.Rows; i++)
            {
                dct.DrawLine(blackPen, x, y);
                x.Offset(0, yOffset);
                y.Offset(0, yOffset);
            }

            //Draw the vertical lines  
            x = new Point(0, 0);
            y = new Point(0, yLineHeight);
            for (int i = 0; i <= DrawingConstants.Columms; i++)
            {
                dct.DrawLine(blackPen, x, y);
                x.Offset(xOffset, 0);
                y.Offset(xOffset, 0);
            }
        }
    }

定義GuidelineSetDrawingElement（使用GuidelineSet）：

    class GuidelineSetDrawingElement : FrameworkElement
    {
        protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)
        {
            base.OnRender(drawingContext);

            double xOffset = Math.Floor(this.RenderSize.Width / DrawingConstants.Columms);
            double yOffset = Math.Floor(this.RenderSize.Height / DrawingConstants.Rows);
            double xLineWidth = Math.Floor(this.RenderSize.Width);
            double yLineHeight = Math.Floor(this.RenderSize.Height);

            DrawingContext dct = drawingContext;
            Pen blackPen = new Pen(Brushes.Black, DrawingConstants.PenThickness);
            blackPen.Freeze();

            //Draw the horizontal lines  
            Point x = new Point(0, 0);
            Point y = new Point(xLineWidth, 0);
            for (int i = 0; i <= DrawingConstants.Rows; i++)
            {
                dct.PushGuidelineSet(new GuidelineSet(null, new double[] { y.Y - DrawingConstants.HalfOfPenThickness, y.Y + DrawingConstants.HalfOfPenThickness}));
                dct.DrawLine(blackPen, x, y);
                dct.Pop();
                x.Offset(0, yOffset);
                y.Offset(0, yOffset);
            }

            //Draw the vertical lines  
            x = new Point(0, 0);
            y = new Point(0, yLineHeight);
            for (int i = 0; i <= DrawingConstants.Columms; i++)
            {
                dct.PushGuidelineSet(new GuidelineSet(new double[] { x.X + DrawingConstants.HalfOfPenThickness, x.X - DrawingConstants.HalfOfPenThickness}, null));
                dct.DrawLine(blackPen, x, y);
                dct.Pop();
                x.Offset(xOffset, 0);
                y.Offset(xOffset, 0);
            }
        }
    }

這個畫法和上一個畫法的區別僅僅在於以下兩點：

對於水平方向的線，我期望它的兩個水平邊緣是和”物理畫素系統“對齊的；
對於垂直方向的線，我期望它的兩個垂直邊緣是和”物理畫素系統“對齊的。

最後，我們將這兩個Element呈現出來：

<Window x:Class="GuidelineSetDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:loc="clr-namespace:GuideLineSetDemo"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock Text="Normal Drawing" Margin="3" HorizontalAlignment="Center"/>
            <loc:NormalDrawingElement Margin="10" Grid.Row="1"/>
        </Grid>

        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock Text="Dawing with GuidelineSet" Margin="3" HorizontalAlignment="Center"/>
            <loc:GuidelineSetDrawingElement Margin="10" Grid.Row="1"/>
        </Grid>
    </Grid>
</Window>

執行後的效果如下：

另外，使用GuidelineSet的時候需要注意以下幾個細節：

1、Push和pop一般情況下要成對（其實當您呼叫DrawingContext上的PushXXX方法後，都要考慮是否有與之對應的Pop方法呼叫）；
2、GuidelineSet只對水平或者垂直線有用；
3、使用GuidelineSet後，您所繪製圖形的位置或大小可能和最初的設定有細微的差別。

您可以從這裡下載本文最後一個範例的原始碼。

到此這篇關於WPF基於物理畫素繪製圖形的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援it145.com。

WPF基於物理畫素繪製圖形

1、為什麼會出現這樣的效果呢？

2、如何解決這個問題？

熱門文章