UWP透明png彩色覆盖层

Question

我在我的UWP c#项目中有一张图片，那是一个透明的png，前景是白色的。现在，我想将这个png图像中的白色更改为另一个颜色(比如蓝色)。

示例(请注意，彩色图像没有透明的背景。这是由于不好的图像处理软件，我正在使用和演示白色的变化。最终结果应是透明的)。

​

​

我记得，这是可能的统一，现在我想这样做，现在在一个uwp-应用程序。我考虑过使用卢米亚ImagingSDK或合成API，但不知道，这两种方法都很热。

Answer 1

您可以这样做的一种方法是使用组合效果系统。

先决条件

1. 目标至少构建10586 (组合API在此之前是实验性的)。
2. 虽然不是严格要求的，但是对视觉层有一个基本的理解不会有什么影响。我写了一篇博客文章，介绍了这个主题这里。
3. 添加Win2D nuget包。

此外，您还可以查看我编写的这里中的一个要点，这是一种使用XAML应用程序中的复合API快速启动和运行的方法。它演示使用的效果以及。不仅如此，它还包括使用复合API (与我编写的包一起)加载图像。

Gettings启动

您可能希望做一些非常类似于gist的事情，但是您不需要定义一个InvertEffect，而是同时定义一个CompositeEffect和一个ColorSourceEffect。这将做的是采取一个图像，并使用它作为一个“面具”，然后取代白色在图像中的颜色。您可以这样定义效果：

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标记中定义该控件，该标记在调整控件大小时创建并调整您的视觉大小，您可以找到该这里。

要了解更多与作文相关的内容，请访问我们的GitHub页面！我们很乐意帮助您解决有关API的任何问题。