UWP透明png颜色叠加

Question

我的 UWP c# 项目中有一个图像，它是一个具有白色前景的透明 png。我现在想将此 png 图像的白色更改为另一种颜色（如蓝色）。

示例（请注意，彩色图像没有透明背景。这是由于我使用的图像处理软件不好，并且为了演示白色的变化。最终结果背景应该是透明的） .

我记得，这在 unity 中是可能的，现在我想在 uwp-app 中做到这一点。我考虑过使用Lumia ImagingSDK or maybe the Composition API，但不知道，热用那些。

Answer 1

一种方法是使用合成效果系统。

先决条件

目标至少是 build 10586（组合 API 在此之前是实验性的）。
虽然没有严格要求，但对可视化层有基本的了解不会有什么坏处。我写了一篇博客 post 介绍这个话题 here。
正在添加 Win2D nuget 包。

此外，您可以查看我写的要点 here，这是一种快速起床的方法，并且运行在 XAML 应用程序中使用 Composition API .它也使用效果进行演示。不仅如此，它还涵盖了使用 Composition API（使用我编写的包）加载图像。

入门

你会想要做一些与要点非常相似的事情，但不是定义 InvertEffect，你会想要同时定义 CompositeEffect 和 ColorSourceEffect。这将做的是拍摄图像并将其用作 "mask"，然后用颜色替换图像中的白色。您可以这样定义效果：

IGraphicsEffect graphicsEffect = new CompositeEffect
{
    Mode = Microsoft.Graphics.Canvas.CanvasComposite.DestinationIn,
    Sources =
    {
        new ColorSourceEffect
        {
            Name = "colorSource",
            Color = Color.FromArgb(255, 255, 255, 255)
        },
        new CompositionEffectSourceParameter("mask")
    }
};

下一步是创建效果工厂：

var effectFactory = compositor.CreateEffectFactory(graphicsEffect, new string[] { "colorSource.Color" });

第二个参数虽然不是必需的，但在这种情况下可能是您想要的。设置此参数允许您在编译效果后更改属性，这允许您手动设置它以及您创建的每个新效果画笔或在效果画笔上设置属性动画。我们只是手动设置它。使用您的新效果工厂创建新的效果画笔。请注意，此工厂可以使用您在上面使用的定义创建许多新效果画笔：

var effectBrush = effectFactory.CreateBrush();

但是，首先您需要将图像用作蒙版。您可以使用我编写的名为 CompositionImageLoader 的库将图像加载到表面中。你也可以在nuget上下载它。使用图像创建表面后，创建 CompositionSurfaceBrush 并将其应用于效果。

var imageLoader = ImageLoaderFactory.CreateImageLoader(compositor);

var surface = imageLoader.LoadImageFromUri(new Uri("ms-appx:///Assets/Images/HAvng.png"));
var brush = compositor.CreateSurfaceBrush(surface);

effectBrush.SetSourceParameter("mask", brush);

请注意，您可能应该将 ImageLoader 保存在某个地方，因为一遍又一遍地创建一个会很昂贵。剩下要做的就是将效果画笔应用于视觉对象并设置颜色：

visual.Brush = effectBrush;

effectBrush.Properties.InsertColor("colorSource.Color", Colors.Red);

然后你就大功告成了！请注意，如果您想在此之后更改颜色，您所要做的就是使用新颜色调用与上面相同的 InsertColor 方法。

成品

在我的测试代码中，方法如下所示：

var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
var visual = compositor.CreateSpriteVisual();

visual.Size = new Vector2(83, 86);
visual.Offset = new Vector3(50, 50, 0);

_imageLoader = ImageLoaderFactory.CreateImageLoader(compositor);

var surface = _imageLoader.LoadImageFromUri(new Uri("ms-appx:///Assets/Images/HAvng.png"));
var brush = compositor.CreateSurfaceBrush(surface);

IGraphicsEffect graphicsEffect = new CompositeEffect
{
    Mode = Microsoft.Graphics.Canvas.CanvasComposite.DestinationIn,
    Sources =
    {
        new ColorSourceEffect
        {
            Name = "colorSource",
            Color = Color.FromArgb(255, 255, 255, 255)
        },
        new CompositionEffectSourceParameter("mask")
    }
};

_effectFactory = compositor.CreateEffectFactory(graphicsEffect, new string[] { "colorSource.Color" });
var effectBrush = _effectFactory.CreateBrush();

effectBrush.SetSourceParameter("mask", brush);

visual.Brush = effectBrush;

effectBrush.Properties.InsertColor("colorSource.Color", Colors.Red);

ElementCompositionPreview.SetElementChildVisual(this, visual);

请注意，在此示例中，视觉对象附加到 this，这是我的 MainPage。您可以将其附加到任何 XAML 元素。如果您想查看可以在 XAML 标记中定义的自定义控件的示例，该标记会在您调整控件大小时创建并调整视觉对象的大小，您可以找到 here.

要查看更多与 Composition 相关的内容，请访问我们的 GitHub page！我们很乐意帮助您解决有关 API.

的任何问题

UWP透明png颜色叠加

UWP Transparent png color overlay

c#

imaging

win-universal-app