win10 uwp win2d 入门看这一篇就够了

林德熙

发布于 2018-09-19 12:03:41

1.5K0

发布于 2018-09-19 12:03:41

本文主要翻译，可能带有一定的主观性和局限性，说的东西可能不对或者不符合每个人的预期。如果觉得我有讲的不对的，就多多包含，或者直接关掉这篇文章，但是请勿生气或者发怒吐槽，可以在我博客评论 http://blog.csdn.net/lindexi_gd

介绍

Win2d是一个很简单使用的底层图形Windows Runtime API，可以使用硬件加速，主要是GPU的强大计算。他可以使用C#或C++写应用商店应用，包括UWP或windows 8.1手机或电脑。他利用强大的Direct2D，无缝集合windows的Xaml，可以使用强大的渲染得到漂亮界面。

使用他可以将界面交给GPU，让CPU集中计算我们的算法

我们可以通过Nuget来得到win2d，Nuget的windows10版win2d:http://www.nuget.org/packages/Win2D.uwp，Nuget的windows 8.1版win2d:http://www.nuget.org/packages/Win2D.win81

如何使用可以参见微软示例http://github.com/Microsoft/Win2D-samples

在下面我们会说如何快速使用。大概看了这个博客就可以入门了，因为使用是很简单。

一些链接：如果找到bug可以通过 http://github.com/Microsoft/Win2D/issues 告诉微软

团队博客：http://blogs.msdn.com/b/win2d

特性

位映像图形
加载、保存、渲染图形
纹理渲染
蒙版
快速处理大量图片
分块压缩图像
加载、保存、渲染虚拟位图，虚拟位图就是超过GPU的纹理会自动分为多个
矢量图
画图形，线、矩形、圆，或使用基础图形组成复杂的
使用笔刷、颜色、图形填充图形
任意宽度线段
图形显影效应

使用

打开 vs，创建项目，这里把项目叫 UmmyShirouValeri ，名字是用我的命名输入法写出来的。

打开Nuget，搜索 win2d 安装

打开 MainPage.xaml ，添加命名xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"。在本文后面，我可能会使用xmlns:xaml="using:Microsoft.Graphics.Canvas.UI.Xaml" ，两个是相同的，因为本文我写了大概有半年，所以里面的代码有很多是不相同。

    <Page
    x:Class="UmmyShirouValeri.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UmmyShirouValeri"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    mc:Ignorable="d">

添加命名之后，如果需要显示win2d，那么需要使用控件显示。

            <canvas:CanvasControl x:Name="canvas" ClearColor="Black"></canvas:CanvasControl>

先运行一下，可以看到如下图的界面。

一般可以按 F5 运行。如果觉得太早了，自己的代码还出现没有写好的，那么请按 ctrl+break 取消生成。

按下F5这时看起来什么没有，但是有了颜色，如果可以看到这个，那么程序是安装成功，如果错误，那么可能安装的包错误。

如果发现自己的包无法使用，那么请同时升级 Win2d 和 Microsoft.NETCore.UniversalWindowsPlatform 最新

添加文字

需要在 canvas 的 Draw 添加函数，可以在这里画出图案，文字，于是使用这句添加在 xaml ` 。在 MainPage.xaml.cs 写函数Canvas_OnDraw`

核心就是 Draw="Canvas_OnDraw" ，在 MainPage.xaml.cs 函数请看代码

        private void Canvas_OnDraw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
        {
            var draw = args.DrawingSession;
            draw.DrawText("lindexi",new Vector2(100,100),Color.FromArgb(0xFF,100,100,100));
        }

上面的代码在坐标（100，100）写出文字 “lindexi” ，设置了我也不知道的颜色。

在写文字就需要用到 args.DrawingSession 提供很多方法，可以在这些方法写文字的有两个，本文使用的是里面最简单的一个。

如果使用了 draw.DrawText ，这个方法提供的重载很多，方法提供很多参数，一般可以使用这个方法设置显示位置，显示颜色。

和上面同样功能，可以不使用Vector2，使用这个代码也是一样draw.DrawText("lindexi",100,100,Color.FromArgb(0xFF,100,100,100));

如果需要设置字体宽度，可以使用 CanvasTextFormat 来做。

            draw.DrawText("lindexi", 100, 100, 500, 50, Color.FromArgb(0xFF, 100, 100, 100), new CanvasTextFormat()
            {
                FontSize = 100
            });

需要告诉大家的是，上面的代码是为了让大家快速跑起来，很多细节都没有告诉大家。如 DrawingSession 的使用需要 using 。在设置字体宽度 new CanvasTextFormat 使用之后需要释放。

微软希望使用的清真方法请看代码

            using (var canvasDrawingSession = args.DrawingSession)
            {
                var canvasTextFormat = new CanvasTextFormat { FontSize = 100 };

                using (canvasTextFormat)
                {
                    canvasDrawingSession.DrawText("林德熙", new Vector2(100,100), Color.FromArgb(0xA1, 100, 100, 100), canvasTextFormat);
                }
            }

清理

因为 win2d 不会自己清理，一般在页面切换，清理资源

打开 MainPage.xaml ，添加 Unloaded 的事件，这样在 Unloaded 事件可以清理

    <Page
    x:Class="UmmyShirouValeri.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UmmyShirouValeri"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    Unloaded="Page_OnUnloaded"
    mc:Ignorable="d">

打开 MainPage.xaml.cs ，在函数 Page_OnUnloaded 添加下面代码，就是把 Win2d 从视觉树移除

        private void Page_OnUnloaded(object sender, RoutedEventArgs e)
        {
            canvas.RemoveFromVisualTree();
            canvas = null;
        }

需要记得，这个很重要

为何需要这样，参见：避免内存泄漏

这个标题不知道写什么

搞事，一定要

那么这是如何做的？

如果需要重新画，如何做？

想要让他重画，使用canvas.Invalidate(); 就会重新调用Canvas_OnDraw

在构造使用下面代码让win2d不停重画。

            DispatcherTimer t = new DispatcherTimer();
            t.Interval = new TimeSpan(1000);
            t.Tick += (s, e) =>
            {
                canvas.Invalidate();
            };
            t.Start();

这样就可以隔 1000 毫秒重画。需要知道使用这个方法是让大家可以用到之前的技能，有小伙伴告诉我，如果写一篇博客里面用到的都是大家默认的技能，那么很少有人可以看下去，所以我尽量使用大家都知道的技能来做。这里是告诉大家，如果想要触发 Draw 就需要调用 canvas.Invalidate(); 调用这个函数可以在不可控的一个时间触发Draw，所以无法稳定指定时间重画。在本文的后面会告诉大家如何做动画。

            private void Canvas_OnDraw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
        {
            var draw = args.DrawingSession;
            draw.DrawText("lindexi", Ran.Next(10,100), Ran.Next(10, 100), 500, 50, Color.FromArgb(0xFF, 100, 100, 100), new CanvasTextFormat()
            {
                FontSize = 100
            });

            draw.DrawLine(Ran.Next(10,100),Ran.Next(10,100),Ran.Next(100,1000),Ran.Next(100,1000),Color.FromArgb(0xFF,25,100,100));
        }

        private Random Ran { set; get; } = new Random();

运行上面代码就可以看到上面的效果

是不是觉得还不好看，试试这个代码

         private void Canvas_OnDraw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
        {
            var draw = args.DrawingSession;
            draw.DrawText("lindexi", Ran.Next(10, 100), Ran.Next(10, 100), 500, 50, r(), new CanvasTextFormat()
            {
                FontSize = 100
            });

            for (int i = 0; i < 10; i++)
            {
                draw.DrawLine(Ran.Next(10, 100), Ran.Next(10, 100), Ran.Next(100, 1000), Ran.Next(100, 1000), r());
            }

            Color r()
            {
                return Color.FromArgb(0xFF, rc(), rc(), rc());
            }

            byte rc()
            {
                return (byte)(Ran.NextDouble() * 255);
            }
        }

需要在vs2017 才可以跑，如果希望下载vs2017 ，可以到我网盘下载

链接：http://pan.baidu.com/s/1skXDc3z 密码：70d6

如果度盘链接没法使用，请联系我。

btsync：BTZR4YIPCLUUEL2BKDACVGLC3473MEWDN

如果需要使用 Win2d 使用动画，请看 win10 uwp win2d CanvasVirtualControl

如何画线

刚才已经代码有画线的，也许已经看见下面的代码

draw.DrawLine（x1，y1，x2，y2，颜色）

除了可以设置线所在的地方，可以设置线条宽度、样式，因为很简单，所以这里就不需要多说了。

添加图片

添加图片可以draw.DrawImage 画出图片，之前需要有图片，需要的是CanvasBitmap，如何获得这个？

可以通过下面的三个方法拿到图片

    CanvasBitmap.CreateFromBytes()
    CanvasBitmap.CreateFromColors()
    CanvasBitmap.LoadAsync()

注意：传入的ICanvasResourceCreator就是 CanvasControl

下面使用 LoadAsync 传入工程的图片，比较期望的方法是在 Canvas_OnCreateResources 事件里面加载图片。但是这里为了演示方便就直接在 Canvas_OnDrawAsync 创建图片。

            private void Canvas_OnDrawAsync(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
        {
            var draw = args.DrawingSession;
            // 这是文字
            draw.DrawText("lindexi", Ran.Next(10, 100), Ran.Next(10, 100), 500, 50, r(), new CanvasTextFormat()
            {
                FontSize = 100
            });

            for (int i = 0; i < 10; i++)
            {
                draw.DrawLine(Ran.Next(10, 100), Ran.Next(10, 100), Ran.Next(100, 1000), Ran.Next(100, 1000), r());
            }
            if (img != null)
            {
                draw.DrawImage(img, Ran.Next(10, 1000), rc());
            }
            else
            {
                // 这是危险写法，请看 [win10 uwp 异步转同步](https://lindexi.gitee.io/post/win10-uwp-%E5%BC%82%E6%AD%A5%E8%BD%AC%E5%90%8C%E6%AD%A5.html )
                Img().Wait();
            }

            Color r()
            {
                return Color.FromArgb(0xFF, rc(), rc(), rc());
            }

            byte rc()
            {
                return (byte)(Ran.NextDouble() * 255);
            }

            async Task Img()
            {
                // 加载图片
                img = await CanvasBitmap.LoadAsync(canvas, new Uri("ms-appx:///Assets/SplashScreen.png"));
            }
        }

创建图片使用img = await CanvasBitmap.LoadAsync(canvas, new Uri("ms-appx:///Assets/SplashScreen.png"));

创建使用的uri参见：win10 uwp 访问解决方案文件

创建资源

上面的代码大家看到了在 Draw 的时候才创建图片，这个写法是不清真。正规的写法是在 CreateResources 里面创建资源。

图片是一个资源，除了图片外还有其他很多资源。但是这里使用图片作为例子。

在 xaml 添加 CreateResources 事件，下面将会在解决方案获得两张图片。

        <xaml:CanvasControl x:Name="Canvas" ClearColor="Black" 
                            CreateResources="Canvas_OnCreateResources"
                            Draw="Canvas_OnDraw"></xaml:CanvasControl>

在后台代码 Canvas_OnCreateResources 就可以用来创建资源。

        private void Canvas_OnCreateResources(CanvasControl sender, CanvasCreateResourcesEventArgs args)
        {
        }

从 CanvasCreateResourcesEventArgs 可以知道资源需要创建的原因，通过判断资源创建的原因决定是不是需要创建资源。如果判断是 FirstTime 那么就必须创建资源，因为这是第一次使用。

在创建资源完成之前是不会触发 Draw ，但是这里有一个坑，如果我创建资源需要异步读写，那么我如何阻塞这个函数，难道使用 wait？实际上在 args 有一个方法，使用 TrackAsyncAction 可以用来等待一个 Task ，在他完成之后调用 Draw 而不是使用 wait 。这样写的代码比较符合微软的希望。

为了拿到一个 Task 来异步读写，需要创建一个函数，请看代码

        private void Canvas_OnCreateResources(CanvasControl sender, CanvasCreateResourcesEventArgs args)
        {
            args.TrackAsyncAction(CreateResourcesAsync(sender).AsAsyncAction());
        }

        private async Task CreateResourcesAsync(CanvasControl canvasControl)
        {
            _bitmap1 = await CanvasBitmap.LoadAsync(canvasControl, "Assets/1.png");
            _bitmap2 = await CanvasBitmap.LoadAsync(canvasControl, "Assets/2.png");
        }

        private CanvasBitmap _bitmap1;
        private CanvasBitmap _bitmap2;

上面的代码在大家的设备不一定能使用，原因是需要大家在 Assets 文件夹放两张图片，需要命名和我一样而且属性的生成是内容，这样才可以找到。

建议使用这个方法创建资源，在加载图片的时候使用这个方法，而不是上面的等待。

资源的创建会发生的另一个触发是丢失设备，关于丢失设备请看Win2D 官方文章系列翻译 - 处理设备丢失 - void² - 博客园

设置 win2d 背景

win2d 会忽略在 xaml 设置的背景，如果使用 Background = xx 的方法设置背景，会在 win2d 忽略

        <xaml:CanvasControl x:Name="canvas" Background="Brown" Draw="Canvas_OnDraw"></xaml:CanvasControl>

上面的代码不会把win2d 的背景设置，因为 win2d 需要设置 ClearColor ，来画出背景

如果想把 win2d 的背景颜色设置为白色，那么可以使用下面代码

        <xaml:CanvasControl x:Name="canvas" ClearColor="White" Draw="Canvas_OnDraw"></xaml:CanvasControl>

如果在一次刷新需要设置 win2d 的颜色，那么可以使用下面代码

            sender.ClearColor = Colors.White;

关于 Alpha 请看 Win2D 官方文章系列翻译 - 预乘 Alpha - void² - 博客园

特效

现在的特效，越来越便宜，从原先的很贵的特效，到现在的不到一块钱。一个好的应用就需要多加一些特效。看到了这里，我准备告诉大家如何在 Win2d 使用特效。

所有的实现 IGraphicsEffectSource 都可以添加特效，而特效本身就实现 IGraphicsEffectSource ，如果需要复杂的图片可以堆特效来做。

本文只告诉大家如何使用特效，因为几乎所有的特效使用方法都差不多，就是输入位图，修改参数，输出修改后的位图。如果需要使用多个特效合在一起，就把前面特效输出的位图输入到第二个特效。通过连接多个特效就可以做出好看的图片。

具体 Win2d 有哪些特效而且这些特效需要如何使用，就请看鱼哥的知乎专栏，在下面的参见我添加了他的博客。

实际的特效不是只能在图片使用，而是在所有 IGraphicsEffectSource 上使用。

在开始准备之前，需要准备一些图片和文字作为资源用来后面创建资源。在前台添加 CreateResources 事件，请看代码

        <xaml:CanvasControl x:Name="Canvas" ClearColor="Black" 
                            CreateResources="Canvas_OnCreateResources"
                            Draw="Canvas_OnDraw"></xaml:CanvasControl>

在后台的事件读取图片资源

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
        {
            
        }

        private void Canvas_OnCreateResources(CanvasControl sender, CanvasCreateResourcesEventArgs args)
        {
           // 在这里添加资源
        }

我随意找到两张好看的图片，把他放在 Assets 文件夹，所以下面的代码将会去读取这两个文件。需要注意两个文件都需要右击属性，选择生成是内容，不然使用下面的方式找不到。

        private void Canvas_OnCreateResources(CanvasControl sender, CanvasCreateResourcesEventArgs args)
        {
            args.TrackAsyncAction(CreateResourcesAsync(sender).AsAsyncAction());
        }

        private async Task CreateResourcesAsync(CanvasControl canvasControl)
        {
            _bitmap1 = await CanvasBitmap.LoadAsync(canvasControl, "Assets/1.png");
            _bitmap2 = await CanvasBitmap.LoadAsync(canvasControl, "Assets/2.jpg");
        }

        private CanvasBitmap _bitmap1;
        private CanvasBitmap _bitmap2;

因为现在不知道是否读取了图片，所以先把图片画出来试试

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
        {
            using (var canvasDrawingSession = args.DrawingSession)
            {
                canvasDrawingSession.DrawImage(_bitmap1);
            }
        }

如果运行一下可以看到图片，那么就是创建资源成功。

现在以 AlphaMaskEffect 作为例子告诉大家如何在位图添加特效

首先创建 AlphaMaskEffect ，然后传入图片，最后画出特效。

因为 AlphaMaskEffect 需要指定一个区域的 Alpha 值，让对应图片的对应区域显示，所以需要用到 CanvasCommandList 用来画出矩形区域

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
        {
            var alphaMask = new CanvasCommandList(sender);

            using (var canvasDrawingSession = alphaMask.CreateDrawingSession())
            {
                canvasDrawingSession.FillRectangle(new Rect(10, 10, 200, 200), Color.FromArgb(100, 0, 0, 0));
            }

            var alphaMaskEffect = new AlphaMaskEffect
            {
                Source = _bitmap1,
                AlphaMask = alphaMask
            };

            using (var canvasDrawingSession = args.DrawingSession)
            {
                canvasDrawingSession.DrawImage(alphaMaskEffect);
            }
        }

现在运行程序，可以看到在(10,10)，大小是(100,100)的矩形区域显示图片。在 Color.FromArgb 我写的是 Alpha 不是 0xFF 所以就没有完全显示图片

这时我可以叠加一张其他的图片，而且在第一张图片里面挖出文字，如下图，就是我使用下面代码写出来的。我用文字从一张图片挖去一块区域，让他显示，然后叠加到第二章图片。

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
        {
            var alphaMask = new CanvasCommandList(sender);

            var center = sender.Size.ToVector2() / 2;
            center.X -= 100;
            center.Y -= 100;

            using (var canvasDrawingSession = alphaMask.CreateDrawingSession())
            {
                var canvasTextFormat = new CanvasTextFormat {FontSize = 100};

                using (canvasTextFormat)
                {
                    canvasDrawingSession.DrawText("林德熙", center, Color.FromArgb(0xA1, 0, 0, 0), canvasTextFormat);
                }
            }

            var alphaMaskEffect = new AlphaMaskEffect
            {
                Source = _bitmap1,
                AlphaMask = alphaMask
            };

            using (var canvasDrawingSession = args.DrawingSession)
            {
                canvasDrawingSession.DrawImage(_bitmap2);
                canvasDrawingSession.DrawImage(alphaMaskEffect);
            }
        }