2018-10-2-win10-uwp-win2d-特效

title	author	date	CreateTime	categories
win10 uwp win2d 特效	lindexi	2018-10-02 21:20:46 +0800	2018-6-4 18:9:44 +0800	UWP win2d

本文告诉大家 win2d 里面的特效

在开始之前先创建一个项目，这里创建 SeexerefaspeaRoulejur 最低版本 17134 选择比较新的版本可以解决之前一些版本存在的坑

通过 Nuget 安装 Win2d 库

先在主页面添加引用 xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml" 然后创建空白的 Canvas 请看代码

     <Grid>
        <canvas:CanvasControl x:Name="Canvas" ClearColor="#F256FA"></canvas:CanvasControl>
    </Grid>

在资源文件添加两张图片 1.png 2.png 作为素材，在 win2d 有事件 CreateResources 可以用来创建图片

先在后台引用 win2d 需要使用的代码

using Microsoft.Graphics.Canvas;
using Microsoft.Graphics.Canvas.UI;
using Microsoft.Graphics.Canvas.UI.Xaml;

在前台添加 CreateResources 的函数

        <canvas:CanvasControl x:Name="Canvas" ClearColor="#F256FA" CreateResources="Canvas_OnCreateResources" Draw="Canvas_OnDraw"></canvas:CanvasControl>

在后台添加 Canvas_OnCreateResources 创建图片

        private CanvasBitmap Image2 { get; set; }

        private CanvasBitmap Image1 { get; set; }

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
        {

        }

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

        private async System.Threading.Tasks.Task CreateImage(CanvasControl sender)
        {
            try
            {
                Image1 = await CanvasBitmap.LoadAsync(sender, new Uri("ms-appx:///assets/1.png"));
                Image2 = await CanvasBitmap.LoadAsync(sender, new Uri("ms-appx:///assets/2.jpg"));
            }
            catch (FileNotFoundException e)
            {
                Debug.WriteLine(e.Message);
            }
        }

注意在获取图片时，需要设置图片为内容，请看 win10 uwp 访问解决方案文件

如果没有设置图片为内容，就会出现 FileNotFoundException 而且信息是

			"系统找不到指定的文件。 (Exception from HRESULT: 0x80070002)"

下面开始告诉大家各个特效是如何使用

AlphaMaskEffect

在使用特效之前需要引用代码

using Microsoft.Graphics.Canvas.Effects;

然后在 Canvas_OnDraw 添加一些代码

        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 {AlphaMask = alphaMask, Source = Image2};

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

在之前已经写过如何使用 AlphaMaskEffect 的博客了，所以本文就简单告诉大家如何使用

运行可以看到下面界面

更多关于 AlphaMaskEffect 请看 win10 uwp win2d 入门 看这一篇就够了

代码 win2d AlphaMaskEffect-CSDN下载

ArithmeticCompositeEffect

通过算法组合两张图片，这个特效是对两张图片的每个像素对应的计算，计算公式是

result = (Source1 * Source1Amount) + (Source2 * Source2Amount) + (Source1 * Source2 * MultiplyAmount) + Offset

通过下面的公式可以做到

相加两张图片

需要通过下面的设置

Source1Amount = 1
Source2Amount = 1
MultiplyAmount = 0
Offset = 0

在 Canvas_OnDraw 的代码

            var arithmeticCompositeEffect = new ArithmeticCompositeEffect()
            {
                Source1 = Image1,
                Source2 = Image2,
                Source1Amount = 1,
                Source2Amount = 1,
                MultiplyAmount = 0,
                Offset = 0
            };

            args.DrawingSession.DrawImage(arithmeticCompositeEffect);

效果

通过修改 Source1Amount 和 Source2Amount 可以看到不同的相加效果

相乘

设置下面的系数可以让两张图片相乘

Source1Amount = 0
Source2Amount = 0
MultiplyAmount = 1
Offset = 0

在 Canvas_OnDraw 的代码

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
        {
            var arithmeticCompositeEffect = new ArithmeticCompositeEffect()
            {
                Source1 = Image1,
                Source2 = Image2,
                Source1Amount = 0,
                Source2Amount = 0,
                MultiplyAmount = 1,
                Offset = 0
            };

            args.DrawingSession.DrawImage(arithmeticCompositeEffect);
        }

可以看到只要第一张不存在的地方，在第二张也无法显示

相减

通过设置 Source1Amount 为 1 设置 Source2Amount 可以 -1 可以让图片1减去图片2

            var arithmeticCompositeEffect = new ArithmeticCompositeEffect()
            {
                Source1 = Image1,
                Source2 = Image2,
                Source1Amount = 1,
                Source2Amount = -1,
                MultiplyAmount = 0,
                Offset = 0
            };

            args.DrawingSession.DrawImage(arithmeticCompositeEffect);

但是更多的时候是引入参数 t 也就是

Source1Amount = 1 - t
Source2Amount = t

我在界面添加一个 Slider 让他控制 t 的大小

<iframe src="https://www.youtube.com/embed/k8kTRXkaQkY?ecver=2" width="480" height="360" frameborder="0" allow="autoplay; encrypted-media" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe>

视频请看 https://youtu.be/k8kTRXkaQkY

之外，还可以设置图片反色，设置反色的时候只能设置一张图片反色

反色的公式是

Source1Amount = -1
Source2Amount = 0
MultiplyAmount = 0
Offset = 1

修改一下代码

            var arithmeticCompositeEffect = new ArithmeticCompositeEffect()
            {
                Source1 = Image1,
                Source2 = Image2,
                Source1Amount = -1,
                MultiplyAmount = 0,
                Offset = 1,
            };

            args.DrawingSession.DrawImage(arithmeticCompositeEffect);

也就是通过修改系数可以做出很多特效，请自己尝试修改这几个属性

ArithmeticCompositeEffect Class

代码 win2d ArithmeticCompositeEffect-CSDN下载

第三章(介绍篇) 图像特效Effect

第三章(特殊篇) 图像特效Effect