Используя Win2D, как обрезать изображение в круг - PullRequest
Новая
       16

Используя Win2D, как обрезать изображение в круг

0 голосов
/ 16 мая 2018

Кажется, это должно быть достаточно просто, но я действительно пытаюсь найти любую документацию о том, как я могу это сделать.Я просто хочу обрезать изображение, чтобы превратить квадрат в круг.

Об этом много говорят, но я не могу найти хороший пример того, как это сделать с помощью 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 ().

enter image description here

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Хорошо, после общения с одним из участников проекта 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);

Теперь, чтобы вырезать / нарисовать круг, используя изображение кисти, я должен описать, где находится центр изображения.быть на холсте.Мое изображение 250х220.

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

Это дает эффект вырезания круга из моего исходного растрового изображения и рисования его на холсте в нужном месте.

Надеюсь, это достаточно ясно.Я знаю, что, конечно, изо всех сил пытался найти ответ.

0 голосов
/ 17 мая 2018

Вы можете попытаться использовать 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.

...