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

2022-06-26 14:04:15

在新的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名稱空間下。