如何在UWP应用中创建Squircle形状并填充图像？

要实现图像填充的Squircle，核心是利用Win2D的几何裁剪功能，将图像限制在Squircle的几何范围内。具体步骤如下：

1. 保留原XAML结构（新增资源加载事件） #

<win2d:CanvasControl
    Width="100"
    Height="100"
    Draw="RenderCanvas_Draw"
    CreateResources="RenderCanvas_CreateResources"/>

新增CreateResources事件用于提前加载图像，避免每次绘制时重复加载影响性能。

2. 后台代码实现 #

首先声明变量存储要填充的图像：

private CanvasBitmap _iconImage;

在CreateResources事件中异步加载图像（替换为你的实际图像路径）：

private async void RenderCanvas_CreateResources(CanvasControl sender, CanvasCreateResourcesEventArgs args)
{
    // 示例加载应用包内的图像资源
    _iconImage = await CanvasBitmap.LoadAsync(sender, "Assets/your-target-image.png");
}

修改Draw事件，通过裁剪实现图像填充Squircle：

private void RenderCanvas_Draw(CanvasControl sender, CanvasDrawEventArgs args)
{
    var drawingSession = args.DrawingSession;
    
    // 创建Squircle几何形状
    CanvasGeometry squircleGeometry = CanvasPathGeometry.CreateSquircle(sender, 0, 0, sender.ActualWidth, sender.ActualHeight, 50, 50);
    
    // 绘制Squircle边框（可选操作）
    drawingSession.DrawGeometry(squircleGeometry, Colors.Red, 1);
    
    // 启用几何裁剪：后续绘制内容仅显示在Squircle范围内
    using (drawingSession.PushClip(squircleGeometry))
    {
        // 绘制图像，让图像填满CanvasControl（即Squircle区域）
        drawingSession.DrawImage(_iconImage, new Rect(0, 0, sender.ActualWidth, sender.ActualHeight));
    }
}

关键说明 #

• PushClip方法会将后续绘制操作限制在指定几何形状内，相当于给图像套上Squircle的"蒙版"，直接解决图像与Squircle层级分离的问题。
• 使用CreateResources加载图像是Win2D的最佳实践，确保图像在控件就绪后加载，避免绘制时的异步阻塞。
• 若需调整图像的显示位置或缩放比例，可修改DrawImage的源矩形、目标矩形参数实现自定义适配。

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