c# - 使用 Win2D，如何将图像裁剪成圆形

Question

看起来这应该很简单，但我真的很难找到任何关于如何做到这一点的文档。我只是想裁剪图像以将正方形变成圆形。

有很多关于它的讨论，但我似乎找不到一个很好的例子来说明如何使用 UWP/Win2D 来做到这一点。

这里有一些代码来说明我在评论中试图描述的问题:

// draw a 10x10 grid of circles
var bitmap = await CanvasBitmap.LoadAsync(sender, "Assets/ice.png"); // hex-shaped image is 250x220 pixels 
var brush = new CanvasImageBrush(sender, bitmap);
for (var i = 0; i < 10; i++)
{
    for (var j = 0; j < 10; j++)
    {
        //_drawingSession.FillCircle(new Vector2(i * 50, j * 50), (float)(25), Colors.Blue);
        _drawingSession.FillCircle(new Vector2(i * 50, j * 50), (float)(25), brush);
    }
}

下图显示了如何根据要绘制目标圆的向量从相同的 x/y 坐标切割画笔。

注意:使用 FillEllipse() 会产生相同的效果。

Answer 1

你可以尝试使用CanvasImageBrush和 CanvasDrawingSession.FillEllipse Method实现它。

private async void canvas_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, 
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
    using (CanvasBitmap bitmap = await CanvasBitmap.LoadAsync(sender, "Assets/image.jpg"))
    {
        CanvasImageBrush canvasImageBrush = new CanvasImageBrush(sender, bitmap);
        args.DrawingSession.FillEllipse(new System.Numerics.Vector2(100f), 100, 100, canvasImageBrush);
    }
}

------------更新------------

如果想从图片源中裁剪出一个圆圈，可以配置CanvasImageBrush.Transform属性对图片进行缩放，然后裁剪出圆圈显示在 Canvas 上。

private async void canvas_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, 
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
    using (CanvasBitmap bitmap = await CanvasBitmap.LoadAsync(sender, "Assets/image.jpg"))
    {
        CanvasImageBrush canvasImageBrush = new CanvasImageBrush(sender, bitmap);
        System.Numerics.Vector2 center = new System.Numerics.Vector2((float)(bitmap.Size.Width / 2),
            (float)(bitmap.Size.Height / 2));
        canvasImageBrush.Transform = System.Numerics.Matrix3x2.CreateScale(0.5F, center);
        args.DrawingSession.FillEllipse(center, 160, 160, canvasImageBrush);
    }
}

您应该更改我上面代码中的一些参数以满足您的要求，例如Matrix3x2.CreateScale 方法中的比例。