UWP中如何使用一张图片作为蒙版对另一张图片进行遮罩

嘿，我刚好折腾过类似的需求！其实你提到的CompositionMaskBrush完全能实现你要的效果，大概率是之前的用法没找对路子～下面我给你拆解具体的实现步骤，应该能解决你的问题：

核心思路 #

你的需求本质是用蒙版图片的不透明区域来显示用户自定义图片，透明区域隐藏——而CompositionMaskBrush的核心作用就是干这个的，只要蒙版图片的格式和用法正确，就能完美实现手机壳形状的裁剪效果。

1. 先确认蒙版图片的格式 #

你的手机壳PNG需要是黑色填充手机壳形状、背景完全透明的格式（如果是反过来的，后面可以调整，但这种格式最直接）：

• 蒙版的**不透明区域（黑色部分）**会显示用户的自定义图片
• 蒙版的透明区域会把用户图片对应的部分隐藏掉

2. 具体代码实现 #

2.1 XAML布局 #

先准备一个用来承载效果的容器，比如用Grid：

<Grid x:Name="MaskedImageContainer" Width="320" Height="640" />

2.2 后台C#代码 #

我把代码拆成了可复用的方法，你直接调用就行：

using Windows.UI.Composition;
using Windows.UI.Xaml.Hosting;
using Windows.UI.Xaml.Media.Imaging;

// 调用这个方法，传入蒙版和用户图片的Uri即可
private async void ApplyPhoneCaseMask(Uri maskImageUri, Uri userCustomImageUri)
{
    // 获取Composition的核心对象Compositor
    var compositor = ElementCompositionPreview.GetElementVisual(MaskedImageContainer).Compositor;

    // 1. 创建蒙版的SurfaceBrush
    var maskBrush = compositor.CreateSurfaceBrush();
    var maskSurface = await LoadImageToCompositionSurface(compositor, maskImageUri);
    maskBrush.Surface = maskSurface;

    // 2. 创建用户图片的SurfaceBrush
    var userImageBrush = compositor.CreateSurfaceBrush();
    var userImageSurface = await LoadImageToCompositionSurface(compositor, userCustomImageUri);
    userImageBrush.Surface = userImageSurface;
    // 设置图片拉伸方式：让用户图片自动裁剪适配蒙版尺寸，避免变形
    userImageBrush.Stretch = CompositionStretch.UniformToFill;

    // 3. 创建MaskBrush并关联源和蒙版
    var maskEffectBrush = compositor.CreateMaskBrush();
    maskEffectBrush.Source = userImageBrush; // 要显示的原图
    maskEffectBrush.Mask = maskBrush; // 遮罩用的蒙版

    // 4. 创建SpriteVisual并挂载到容器上
    var spriteVisual = compositor.CreateSpriteVisual();
    spriteVisual.Size = new System.Numerics.Vector2((float)MaskedImageContainer.Width, (float)MaskedImageContainer.Height);
    spriteVisual.Brush = maskEffectBrush;

    ElementCompositionPreview.SetElementChildVisual(MaskedImageContainer, spriteVisual);
}

// 辅助方法：将图片加载为Composition可用的Surface
private async Task<ICompositionSurface> LoadImageToCompositionSurface(Compositor compositor, Uri imageUri)
{
    var bitmap = new BitmapImage(imageUri);
    // 等待图片加载完成
    await bitmap.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () => {});

    // 创建适配图片尺寸的DrawingSurface
    var surface = compositor.CreateDrawingSurface(
        new Windows.Foundation.Size(bitmap.PixelWidth, bitmap.PixelHeight),
        Windows.Graphics.DirectX.DirectXPixelFormat.B8G8R8A8UIntNormalized,
        Windows.Graphics.DirectX.DirectXAlphaMode.Premultiplied);

    // 将图片绘制到Surface上
    using (var drawingSession = surface.OpenDrawingSession())
    {
        drawingSession.Clear(Windows.UI.Colors.Transparent);
        drawingSession.DrawImage(bitmap);
    }

    return surface;
}

2.3 关键注意事项 #

• 如果你的蒙版是白色形状+黑色背景，那需要给蒙版加一个颜色反转的效果，比如用ColorMatrixEffect来反转Alpha通道，这样才能正确遮罩。
• 图片加载一定要等加载完成再处理，不然可能出现蒙版或用户图片显示不全的问题。
• 如果需要支持用户实时调整图片位置（比如拖动缩放），可以给userImageBrush设置Offset和Scale属性来实现。

3. 备选方案：用Win2D实现 #

如果你还是觉得CompositionMaskBrush不符合需求，也可以用Win2D的AlphaMaskEffect来实现，灵活性更高：
首先要先安装Win2D的NuGet包Microsoft.Graphics.Win2D，然后代码如下：

using Microsoft.Graphics.Canvas;
using Microsoft.Graphics.Canvas.Effects;
using Windows.UI.Xaml.Controls;

private async void ApplyWin2DMask(CanvasControl canvasControl, Uri maskUri, Uri userImageUri)
{
    var device = canvasControl.Device;
    // 加载蒙版和用户图片
    var maskBitmap = await CanvasBitmap.LoadAsync(device, maskUri);
    var userBitmap = await CanvasBitmap.LoadAsync(device, userImageUri);

    using (var session = canvasControl.CreateDrawingSession())
    {
        // 创建Alpha蒙版效果
        var maskEffect = new AlphaMaskEffect()
        {
            Source = userBitmap,
            AlphaMask = maskBitmap
        };

        // 绘制到Canvas上
        session.DrawImage(maskEffect, new Windows.Foundation.Rect(0, 0, canvasControl.ActualWidth, canvasControl.ActualHeight));
    }
}

XAML里用CanvasControl作为容器即可。

内容的提问来源于stack exchange，提问作者Adam McMahon