C#使用Win2D在UWP程序中實現2D繪圖

Posted on by

在新的Windows UWP程序中，引入瞭一個新的API庫： Win2D。它是一個d2d的封裝，可以直接使用C#來快速實現高效2D繪圖瞭。這個API雖然在Win8.1時代就開始著手開發瞭，但最近才完善瞭下來。本文這裡就簡單的介紹一下它的基本用法：

安裝

Win2D並不是Win10 SDK裡面的一部分，需要從Nuget上安裝，在程序包管理器裡直接安裝Win2D.uwp即可。

PM> Install-Package Win2D.uwp

這個是Win10下的庫，Win8下需要使用Win2D.win81庫。安裝完後在Project.json中可以看到相應的庫依賴：

示例：

Win2D引入瞭一個新的畫佈：Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl，所有的繪制必須在它上面進行。因此首先在XAML中添加CanvasControl作為底圖:

    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"

    <Grid>
         <canvas:CanvasControl Draw="canvasControl_Draw" ClearColor="CornflowerBlue" />
    </Grid>

然後響應其Draw事件，在裡面添加繪制動作：

    void canvasControl_Draw(CanvasControl sender, CanvasDrawEventArgs args)
    {
        args.DrawingSession.DrawEllipse(155, 115, 80, 30, Colors.Black, 3);
        args.DrawingSession.DrawText("Hello, world!", 100, 100, Colors.Yellow);
    }

運行效果如下：

這種方式與WinForm和WPF中的自繪制比較像，隻是一些API有些差異。

繪制API

前面使用瞭DrawingSesion下發繪制命令，和WPF中的DrawingContext差不多，就是一個繪制上下文。它主要的命令分為如下兩種：DrawXXX和FillXXX。DrawXXX隻是繪制圖像，而FillXXX隻填充圖像，這裡和WPF那種繪制和填充在一個API裡的方式稍稍有點不同。

由於API並不多，這裡列舉瞭一下，基本上看著就知道怎麼用瞭。

繪制圖像

  • DrawCircle

  • DrawCachedGeometry

  • DrawEllipse

  • DrawGeometry

  • DrawImage

  • DrawInk

  • DrawLine

  • DrawRectangle

  • DrawRoundedRectangle

  • DrawText。

  • DrawTextLayout

填充圖像

  • FillCircle

  • FillEllipse

  • FillGeometry

  • FillRectangle

  • FillRoundedRectangle

它的API還比較簡單，基本上看著就知道怎麼用，不過其中的DrawImage能傳入一個IcanvasImage類型，而這個類型並不僅僅是圖片，包括下面介紹的CanvasCommandList和Effect都是這種類型，使用的時候需要熟悉一下。

2D轉換

2D繪圖的過程中往往還伴隨著一些平移，旋轉等2D轉換的操作，DrawingSession中提供瞭一個Transform屬性可以傳入一個3*2矩陣實現2D轉換。

    var ds = args.DrawingSession;

    ds.Transform = Matrix3x2.CreateTranslation(new Vector2(200, 100));
    ds.DrawText("A", 0, 0, Colors.White);

    ds.Transform *= Matrix3x2.CreateRotation(12, new Vector2(200,80));
    ds.DrawText("B", 0, 0, Colors.White);

CanvasCommandList

CanvasCommandList可以緩存一組繪制命令，然後統一繪制。它可以用於分塊繪制，也可以用於減少重復繪制。

    var renderTarget = new CanvasCommandList(sender);
    using (var clds = renderTarget.CreateDrawingSession())
    {
        clds.DrawEllipse(155, 115, 80, 30, Colors.Black, 3);
        clds.DrawText("Hello, world!", 100, 100, Colors.Yellow);
    }

    args.DrawingSession.DrawImage(renderTarget);

濾鏡效果

Win2D的一個比較給力的特性就是支持濾鏡特效，用它可以非常方便的實現常用的模糊、陰影等效果，這裡以高斯模糊為例修改下上面的效果。

    var cmdList = new CanvasCommandList(sender);
    using (var clds = cmdList.CreateDrawingSession())
    {
        clds.DrawEllipse(155, 115, 80, 30, Colors.Black, 3);
        clds.DrawText("Hello, world!", 100, 100, Colors.Yellow);
    }

    var effect = new GaussianBlurEffect();
    effect.Source = cmdList;

    args.DrawingSession.DrawImage(effect);

系統還內置瞭許多常用的濾鏡效果，它們都以Effect結尾，放在Microsoft.Graphics.Canvas.Effects名字空間下。

繪制事件

除瞭前面用到的繪制的時候觸發繪制操作的Draw事件外，還有一個比較常用的事件CreateResource，它在最開始加載控件的時候觸發，往往用於初始化各種資源。

另外再來看看Draw事件的觸發條件，它基本上和WPF的OnRender差不多，也就是說，一般在初次加載時會觸發，改變窗口大小的時候會觸發，拖動窗口時不會觸發。如果要在後臺控制其重繪也比較簡單，但用其Invalidate方法即可。

到此這篇關於C#使用Win2D在UWP程序中實現2D繪圖的文章就介紹到這瞭。希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：