关于microsoft:使用-Win2D-实现融合效果

44次阅读

共计 5468 个字符，预计需要花费 14 分钟才能阅读完成。

微软 MVP 实验室研究员

陈锦华
微软最有价值专家（MVP）（Windows Development 方向），专一于 .NET 开发，有十多年的客户端开发教训。当初热衷于撰写博客，分享 WPF、UWP 和 Azure DevOps 相干的教训。

交融成果

在 CSS 中有一种实现交融成果的技巧，应用含糊滤镜（blur）叠加对比度滤镜（contrast）使两个靠近的元素看上去“粘”在一起，如下图所示：

我始终对这种成果很感兴趣，总想本人亲自玩一玩，当然，是在本人相熟的 Xaml 平台。这篇文章我将介绍如何应用 Win2D 在 UWP / WinUI 3 中实现交融成果。

应用 Win2D 实现交融成果

Win2D 是一个很简略应用的底层图形 Windows Runtime API。它利用了 Direct2D 的弱小性能，并与 UWP 和 WinUI 3 的 Xaml 无缝集成，能够应用弱小的渲染失去丑陋界面。UWP 和 WinUI 3 版本的 Nuget 装置脚本别离为：

Install-Package Win2D.uwp -Version 1.26.0

Install-Package Microsoft.Graphics.Win2D -Version 1.0.3.1

装置后将 CanvasControl 增加到 XAML 树中并订阅 CanvasControl.CreateResources 事件，这个事件在 CanvasControl 首次初始化时触发一次，能够在这个事件中创立画图须要的资源。当初我须要画两个圆，并对这两个圆利用 Effect，所以我用以下代码初始化了一些资源：

private ICanvasBrush _leftBrush;
private ICanvasBrush _rightBrush;
private ICanvasImage _image;
private GaussianBlurEffect _blurEffect;

private void OnCreateResource(CanvasControl sender, CanvasCreateResourcesEventArgs args)
{_leftBrush = new CanvasSolidColorBrush(sender, Colors.Black);
    _rightBrush = new CanvasSolidColorBrush(sender, Colors.Blue);
    _blurEffect = new GaussianBlurEffect
    {BlurAmount = 20f};

    _image = new ColorMatrixEffect
    {
        ColorMatrix = new Matrix5x4
        {
            M11 = 1,
            M12 = 0,
            M13 = 0,
            M14 = 0,
            M21 = 0,
            M22 = 1,
            M23 = 0,
            M24 = 0,
            M31 = 0,
            M32 = 0,
            M33 = 1,
            M34 = 0,
            M41 = 0,
            M42 = 0,
            M43 = 0,
            M44 = 18,
            M51 = 0,
            M52 = 0,
            M53 = 0,
            M54 = -7
        },
        Source = _blurEffect
    };
}

在下面的代码中我创立了一蓝一黑两个 CanvasSolidColorBrush，以及一个 GaussianBlurEffect 和一个 ColorMatrixEffect，前者作为后者的 Source。和 CSS 不同的是，Win2D 不是应用 ContrastEffect，而是应用 ColorMatrixEffect 实现交融成果（至于 ColorMatrixEffect 中的参数设置将在下一节中解说）。下一步，订阅 CanvasControl 的 SizeChanged 事件并实时取得它的两头点：

private void OnCanvasSizeChanged(object sender, SizeChangedEventArgs e)
{_centerPoint = Canvas.ActualSize / 2;}

最初，订阅 CanvasControl.Draw 事件，当 CanvasControl 首次变为可见时，将触发这个件一次，而后在须要重绘其内容时再次触发。上面的代码在 Draw 触发时用之前创立的资源画出两个圆。

private void OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{var source = new CanvasCommandList(sender);
    using (var drawingSession = source.CreateDrawingSession())
    {drawingSession.FillCircle(_centerPoint + new Vector2(-75, 0), 100, _leftBrush);
        drawingSession.FillCircle(_centerPoint + new Vector2(75, 0), 60, _rightBrush);
    }

    _blurEffect.Source = source;
    args.DrawingSession.DrawImage(_image);
}

下面的代码首先创立一个 CanvasCommandList，而后用它再创立 DrawingSession 并用 DrawingSession 的 FillCircle 画出两个圆形。接下来把 CanvasCommandList 作为输出源交给 GaussianBlurEffect 进行高斯含糊，而这个 GaussianBlurEffect 又是 ColorMatrixEffect 的输出源，相当于原始的图像利用过一次 GaussianBlurEffect 后，再利用用一次 ColorMatrixEffect。最初用 CanvasDrawEventArgs.DrawImage 将 ColorMatrixEffect 输入到 UI。最终成果如下：

如果在 OnDraw 的最初调用 CanvasControl.Invalidate 函数能够触发 CanvasControl 重绘，从而实现动画成果。利用这个办法，再加上一些计算，就能够实现交融交融成果的动画：

Win2D 中交融成果的原理

下面的代码实现了交融成果，但当我想换个色彩玩些新花样时却发现了诡异的情况，例如我将两个 Brush 改为 IndianRed（205, 92, 92）和 PaleVioletRed（219, 112, 147），两个圆形竟然变成了空心圆形：

尽管还挺难看的，而且会有很多种玩法，但这不合乎我当初的预期。接着我又发现只有应用的色彩的 RGB 三个通道中有一个的值不是 0 或 255，交融成果进去的色彩就会被扭转，即 Blue(0, 0, 255) 不会扭转，IndianRed(205, 92, 92) 会变成 (255, 255, 255)。也就是说，当初我没方法精确管制交融成果的色彩。为了解决这个问题，咱们须要从交融成果的原理开始动手。

▍GaussianBlurEffect

交融成果应用了 GaussianBlurEffect 和 ColorMatrixEffect 两个 Effect，先说说 GaussianBlurEffect。GaussianBlurEffect 即高斯含糊成果，它用正态分布计算图像中每个像素的变换，每个像素的值都是四周相邻像素值的加权均匀。原始像素的值有最大的高斯分布值，所以有最大的权重，相邻像素随着间隔原始像素越来越远，其权重也越来越小。

上图右边是没利用任何 Effect 的图像，左边是利用了高斯含糊成果的图像。高斯含糊让两个圆形的边缘变得含糊，多了一圈半透明的像素。仔细观察两个彩色圆形的结合处，因为高斯含糊每个像素的值都是四周相邻像素值的加权均匀，所以结合处的像素同时受左右两个圆形的影响，产生了粘连的成果。

▍ColorMatrixEffect

交融成果的第二步，是进步图像的对比度，将下面右图中 Alpha 值超过某个阈值的半透明像素涂抹成齐全不通明。这时候用到的是 ColorMatrixEffect。

ColorMatrixEffect 应用 Matrix5x4 批改图像的色彩。这个 Matrix5x4 的默认值是：

var identity = new Matrix5x4
{
     M11 = 1, M12 = 0, M13 = 0, M14 = 0,
     M21 = 0, M22 = 1, M23 = 0, M24 = 0,
     M31 = 0, M32 = 0, M33 = 1, M34 = 0,
     M41 = 0, M42 = 0, M43 = 0, M44 = 1,
     M51 = 0, M52 = 0, M53 = 0, M54 = 0
};

通过批改这个矩阵，能够管制输入图像的每一个像素的 ARGB 四个通道，具体的公式为：

result.R = (src.R * matrix.M11) + (src.G * matrix.M21) + (src.B * matrix.M31) + (src.A * matrix.M41) + matrix.M51
result.G = (src.R * matrix.M12) + (src.G * matrix.M22) + (src.B * matrix.M32) + (src.A * matrix.M42) + matrix.M52
result.B = (src.R * matrix.M13) + (src.G * matrix.M23) + (src.B * matrix.M33) + (src.A * matrix.M43) + matrix.M53
result.A = (src.R * matrix.M14) + (src.G * matrix.M24) + (src.B * matrix.M34) + (src.A * matrix.M44) + matrix.M54

假如我须要将图像中所有像素的 Alpha 指变为 0，依据下面的公式，只须要将 matrix.M44 设为 0 即可。

当初咱们回过头来看看前文中实现交融成果的 ColorMatrixEffect。矩阵的前三列都放弃默认值不变，即 RGB 三个通道不作扭转，M44 设置为 18，M54 设置为 -7，依据公式即每个像素作了以下变换：

result.A = (src.A * 18) -7

把这个公式输出计算器的绘图中，失去以下图形。

能够看到这个公式的输入简直是一条垂直于 X 轴的直线，以这条直线为辨别，X 值在这条线右边的后果为 0，在这条线左边的后果为 1。这是一个很显著的二值化操作。当这个 ColorMatrixEffect 利用在之前高斯含糊产生的图像上，由高斯含糊产生的 Alpha 通道大于 0 的像素要么都变得清晰，要么就隐没不见（只剩下 Alpha 值为 0.39 到 0.45 之间的像素仍为半透明，用于打消形态边缘的锯齿），从而使两个圆型之前的连接处变得清晰而平滑，这就实现了交融成果。

▍ClampOutput

然而这个 ColorMatrixEffect 并不是真正的二值化，而是将 Alpha 通道转换成一个远大于 1 或远小于 0 的值。当 Alpha 远大于 1，这个像素在 UI 上会变成通明或红色。究其原因，应该是因为 Win2D 图像成果应用间接和预乘 alpha 的混合，所以 Win2D 在某个环节做了相似上面这种解决：

result.R = source.R * source.A;
result.G = source.G * source.A;
result.B = source.B * source.A;
result.A = source.A;

后果在 Alpha 值远大于 1 的状况下，RGB 三个值不是 0 就是 1。即 Blue(0, 0, 255) 利用了这个 ColorMatrixEffect 后还是 Blue(0, 0, 255)，而 IndianRed(205, 92, 92) 会变成 (255, 255, 255)。为了应答这种状况，Win2D 在局部 Effect 中提供了 ClampOutput 属性，当它设置为 True 时，Effect 的输入都放弃在 [0, 1] 范畴内。利用在下面的 ColorMatrixEffect 上可确保输入的 Alpha 通道不会超出 [0, 1] 这个范畴，防止了批改透明度以外的任何副作用。

对于预乘的更多信息，能够看这篇文章：

  • Win2D: Premultiplied alpha

最初

将 ColorMatrixEffect.ClampOutput 设置为 True 后，Win2D 就能够应用任何色彩实现交融成果，这样玩法就更多了，例如上面这种：

尽管我之前也用 Win2D 做过一些货色，但这的确涉及了我的常识盲区，尤其是 CanvasAnimatedControl 和 CanvasControl 的应用，所以我求教了我的敌人 火火 不少要害代码和概念，谢谢他的领导。

源码

  • https://github.com/DinoChan/u…
  • https://github.com/DinoChan/w…

参考资料

  • 你所不晓得的 CSS 滤镜技巧与细节
  • cnbluefire_GooeyButton
  • https://github.com/Microsoft/…
  • 色彩矩阵成果 – Win32 apps Microsoft Docs
  • ColorMatrixEffect Class
  • GaussianBlurEffect Class

微软最有价值专家（MVP）

微软最有价值专家是微软公司授予第三方技术专业人士的一个寰球奖项。29 年来，世界各地的技术社区领导者，因其在线上和线下的技术社区中分享专业知识和教训而取得此奖项。

MVP 是通过严格筛选的专家团队，他们代表着技术最精湛且最具智慧的人，是对社区投入极大的激情并乐于助人的专家。MVP 致力于通过演讲、论坛问答、创立网站、撰写博客、分享视频、开源我的项目、组织会议等形式来帮忙别人，并最大水平地帮忙微软技术社区用户应用 Microsoft 技术。更多详情请登录官方网站：https://mvp.microsoft.com/zh-cn

                       
点击这里退出微软 MVP~~

正文完
microsoft
发表至： microsoft
2022-09-21
 0
关于microsoft:微软MVP研究实验室-基于Blazor打造实时字幕
关于microsoft:202202微软漏洞通告
关于microsoft:在线提升技术能力5月课程预告
关于microsoft:霸榜多个CV任务开源仅两天已收获21k-star