使用 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 and 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方法中的比例。

Answer 2

好的，在与 GitHub Win2D 项目的一位同事聊天后，我终于对它的工作原理有了一个明确的答案 - 它的工作方式与我预期的完全不同。

首先，位图画笔图像默认位于 canvas 上的 0,0。

就我而言，我想从图像中剪下一个圆圈并将其绘制在 canvas 上的其他位置。这需要 2 个独立的数学运算。

首先，您需要将位图的左上角 (TLC) 定位到要绘制圆的位置。这是通过设置画笔的变换属性来完成的。在我的示例中，我将图像 TLC 设置为 300/300；

// create the brush
var brush = new CanvasImageBrush(sender, _tiles[1]);
brush.Transform = Matrix3x2.CreateTranslation(300, 300);

现在，对于cut/draw 使用画笔图像的圆圈，我必须描述图像的中心在canvas 上的位置。我的图像是 250x220。

// 300+250/2, 300+220/2 = 425, 410
_args.DrawingSession.FillCircle(new Vector2(425, 410), (float)(110), brush);

这给出了从我的原始位图中切出一个圆并将其绘制在 canvas 所需位置的效果。

希望这已经足够清楚了。我知道我确实很难找到答案。

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

Using Win2D, how to crop an image to a circle

c#

uwp

win2d