如何使用Win2D将图像裁剪为圆形（UWP环境）

嘿，我太懂这种找不到合适文档的憋屈了！本来以为把方形图裁成圆形是个小操作，结果在UWP/Win2D里找半天没靠谱示例，用CanvasImageBrush填FillCircle还总出问题——就像你说的那样，图像会被拉伸适配圆形的外接正方形，完全不是我们想要的圆形裁剪效果。

问题根源 #

默认的CanvasImageBrush会把图像拉伸填充整个目标形状的外接矩形（也就是你画的圆的正方形边界），所以才会出现图像变形、没有被裁剪成圆形的情况。

解决思路 #

要实现真正的圆形裁剪，我们需要用CanvasGeometry作为掩码，配合CanvasImageBrush的正确配置，让图像保持原始比例并只显示圆形区域内的部分。具体步骤很清晰：

• 计算图像的宽高比，确定在圆形内的最佳显示区域（保证图像居中、不拉伸）
• 为每个圆形创建对应的圆形几何
• 配置画笔的映射模式和变换，让图像正确适配圆形大小
• 用FillGeometry替代FillCircle，结合几何掩码实现裁剪

修改后的完整代码 #

var bitmap = await CanvasBitmap.LoadAsync(sender, "Assets/ice.png");
// 圆形的直径（对应你原来代码里的半径25）
float circleDiameter = 50f;
float imageRatio = (float)bitmap.Size.Width / bitmap.Size.Height;
float drawWidth, drawHeight;
float offsetX = 0, offsetY = 0;

// 计算图像在圆形内的显示尺寸，保持比例并适配圆形
if (imageRatio > 1)
{
    // 图像是宽屏，以圆形高度为基准缩放
    drawHeight = circleDiameter;
    drawWidth = drawHeight * imageRatio;
    offsetX = (circleDiameter - drawWidth) / 2; // 水平居中偏移
}
else
{
    // 图像是竖屏/正方形，以圆形宽度为基准缩放
    drawWidth = circleDiameter;
    drawHeight = drawWidth / imageRatio;
    offsetY = (circleDiameter - drawHeight) / 2; // 垂直居中偏移
}

// 配置画笔：用RelativeToBoundingBox模式，方便基于圆形边界框做变换
var brush = new CanvasImageBrush(sender, bitmap)
{
    MappingMode = CanvasBrushMappingMode.RelativeToBoundingBox,
    ExtendMode = CanvasEdgeBehavior.Clamp // 超出圆形的部分直接截断，不重复
};

// 给画笔添加变换：先平移让图像居中，再缩放适配圆形
brush.Transform = Matrix3x2.CreateTranslation(offsetX / circleDiameter, offsetY / circleDiameter) *
                  Matrix3x2.CreateScale(circleDiameter / Math.Max(drawWidth, drawHeight));

// 绘制10x10的圆形图像网格
for (var i = 0; i < 10; i++)
{
    for (var j = 0; j < 10; j++)
    {
        var center = new Vector2(i * 50, j * 50);
        // 创建圆形几何作为裁剪掩码
        var circleGeometry = CanvasGeometry.CreateCircle(sender, center, 25);
        // 用几何填充，自动裁剪出圆形图像
        _drawingSession.FillGeometry(circleGeometry, brush);
    }
}

关键细节解释 #

• 尺寸计算：根据图像宽高比调整显示尺寸，确保图像不会被拉伸，同时计算偏移量让图像在圆形内居中。
• 画笔映射模式：RelativeToBoundingBox让我们可以用0-1的相对坐标来控制画笔的变换，不用关心绝对尺寸，更灵活。
• 变换矩阵：先平移修正图像的居中位置，再缩放让图像刚好覆盖圆形区域，超出的部分会被几何掩码自动裁剪。
• FillGeometry：用圆形几何作为填充形状，画笔的内容只会显示几何范围内的部分，完美实现圆形裁剪。

如果你不需要保持图像比例（比如就是要把图像拉伸填满圆形），那可以简化代码，直接用FillGeometry配合默认配置的画笔，但这种情况一般不是我们想要的视觉效果。

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