UWP透明png顏色疊加

Question

我的 UWP c# 項目中有一個圖像，它是一個帶有白色前景的透明 png。 我現在想將此 png 圖像中的白色更改為另一種顏色（如藍色）。

示例（請注意，彩色圖像沒有透明背景。這是由於我使用的圖像處理軟件不好，並演示了白色的變化。背景在最終結果中應該是透明的）。

我記得，這在統一中是可能的，現在我想在 uwp-app 中做到這一點。 我想過使用Lumia ImagingSDK或Composition API ，但不知道，用任何一個來做都很熱。

Answer 1

一種方法是使用合成效果系統。

先決條件

1. 至少針對 build 10586（Composition API 在此之前是實驗性的）。
2. 雖然不是嚴格要求，但對視覺層有基本的了解也無妨。 我寫了一篇博客文章是介紹這個主題在這里。
3. 添加 Win2D nuget 包。

此外，您可以查看我在此處編寫的要點，這是一種在 XAML 應用程序中使用 Composition API 啟動和運行的快速方法。 它也演示了使用效果。 不僅如此，它還涵蓋了使用 Composition API 加載圖像（使用我編寫的包）。

入門

您需要做一些與要點非常相似的事情，但不是定義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 標記中定義的自定義控件示例，該標記會在您調整控件大小時創建並調整視覺對象的大小，您可以在此處找到。

要查看更多與 Composition 相關的內容，請訪問我們的GitHub 頁面！ 我們很樂意幫助您解決有關 API 的任何問題。