UWP透明png颜色叠加

Question

我在我的UWP c＃项目中有一个图像，那是一个带有白色前景的透明png。我现在想把这个PN​​G图像的白色变成另一种颜色（如蓝色）。

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

我记得，这是团结可能的，现在我想现在在UWP-应用程序做到这一点。我想过使用Lumia ImagingSDK或者Composition API，但不知道，用这两种方法做热门。

Answer 1

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

先决条件

1. 定位至少建立10586（该组合物是API这之前的实验）。
2. 虽然没有严格要求，但对Visual层有基本的了解并不会造成伤害。我写了一篇博客文章，介绍了这个主题here。
3. 添加Win2D nuget包。

此外，您可以看一下我写的here，这是一个在XAML应用程序中使用Composition API启动和运行的快速方法。它也使用效果进行演示。不仅如此，还包括使用Composition API（使用我写的包）加载图像。

Gettings开始

你会想要做的非常相似的要点的东西，但不是定义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标记中定义该自定义控件，然后在调整控件大小时调整视觉大小，则可以找到该控件的here。

要查看更多与组成相关的东西，请进入我们的GitHub page！如果您有任何关于API的问题，我们很乐意为您提供帮助。