2

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

有很多关于它的讨论，但我似乎找不到一个很好的例子来说明如何使用 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() 也会产生同样的效果。

在此处输入图像描述

4

2 回答 2

2

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

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属性来缩放图像，然后剪下圆形并显示在画布上。

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

于 2018-05-17T09:52:40.083 回答
1

好的，在与 GitHub Win2D 项目的一位研究员交谈后，我终于对它的工作原理有了一个明确的答案——它的工作方式与我预期的完全不同。

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

就我而言，我想从图像中剪下一个圆圈，然后在画布上的其他地方绘制它。这需要 2 个独立的数学位。

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

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

现在，要使用画笔图像剪切/绘制圆圈，我必须描述图像中心在画布上的位置。我的图像是 250x220。 

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

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

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

于 2018-05-23T16:51:22.073 回答