다음을 통해 공유


그래픽 개체 그리기

Browse sample. 샘플 찾아보기

.NET 다중 플랫폼 앱 UI(.NET MAUI) 그래픽 Microsoft.Maui.Graphics 은 네임스페이스에서 개체로 ICanvas 정의된 캔버스에 그래픽 개체를 그릴 수 있습니다.

.NET MAUI GraphicsView 컨트롤은 속성을 설정할 수 있는 개체와 그래픽 개체를 그리기 위해 호출된 메서드에 대한 액세스를 ICanvas 제공합니다. 자세한 내용은 GraphicsViewGraphicsView를 참조하세요.

참고 항목

대부분의 그래픽 개체에는 Draw 다음과 같은 DrawRectangle 메서드와 Fill 메서드가 있습니다FillRectangle. 메서드는 Draw 채워지지 않은 도형의 윤곽선을 그립니다. Fill 메서드는 도형의 윤곽선을 그리고 도형을 채웁니다.

그래픽 개체는 각 플랫폼에서 인식하는 디바이스 독립적 단위를 사용하여 그려집니다 ICanvas . 이렇게 하면 그래픽 개체의 크기가 기본 플랫폼의 픽셀 밀도로 적절하게 조정됩니다.

선 그리기

선의 시작점과 끝점을 나타내는 네 float 개의 인수가 필요한 메서드를 사용하여 DrawLine 선을 그릴 ICanvas 수 있습니다.

다음 예제에서는 선을 그리는 방법을 보여줍니다.

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 6;
canvas.DrawLine(10, 10, 90, 100);

이 예제에서는 빨간색 대각선이 (10,10)에서 (90,100)로 그려집니다.

Screenshot of a red line.

참고 항목

PointF 인수를 DrawLine 사용하는 오버로드도 있습니다.

다음 예제에서는 파선 그리기 방법을 보여줍니다.

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.StrokeDashPattern = new float[] { 2, 2 };
canvas.DrawLine(10, 10, 90, 100);

이 예제에서는 빨간색 파선 대각선이 (10,10)에서 (90,100)로 그려집니다.

Screenshot of a dashed red line.

파선에 대한 자세한 내용은 파선 그리기 개체를 참조 하세요.

타원 그리기

타원 및 원은 형식floatICanvas , yheight width인수가 필요한 x메서드를 사용하여 DrawEllipse 그릴 수 있습니다.

다음 예제에서는 줄임표를 그리는 방법을 보여줍니다.

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.DrawEllipse(10, 10, 100, 50);

이 예제에서는 차원이 100x50인 빨간색 줄임표(10,10)를 그립니다.

Screenshot of a red ellipse.

원을 그리려면 메서드와 height 인수를 width DrawEllipse 같게 만듭니다.

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.DrawEllipse(10, 10, 100, 100);

이 예제에서는 크기가 100x100인 빨간색 원을 (10,10)에 그립니다.

Screenshot of a red circle.

참고 항목

메서드를 사용하여 원을 DrawCircle 그릴 수도 있습니다.

파선 타원을 그리는 방법에 대한 자세한 내용은 파선 개체 그리기를 참조 하세요.

채워진 줄임표는 형식float의 < ywidtha0FillEllipse/> 및 인수가 필요한 x메서드를 height 사용하여 그릴 수 있습니다.

canvas.FillColor = Colors.Red;
canvas.FillEllipse(10, 10, 150, 50);

이 예제에서는 차원이 150x50인 빨간색 채워진 줄임표(10,10)를 그립니다.

Screenshot of a red filled ellipse.

FillColor 메서드를 호출 FillEllipse 하기 전에 개체의 ICanvas 속성을 a로 Color 설정해야 합니다.

채워진 원은 메서드를 사용하여 FillCircle 그릴 수도 있습니다.

참고 항목

DrawEllipse 인수를 FillEllipse 사용하는 Rect 오버로드와 오버로드가 있습니다RectF. 또한 오버로드도 DrawCircle FillCircle 있습니다.

사각형 그리기

직사각형 및 사각형은 형식floatICanvas , yheight width인수가 필요한 x메서드를 사용하여 DrawRectangle 그릴 수 있습니다.

다음 예제에서는 사각형을 그리는 방법을 보여줍니다.

canvas.StrokeColor = Colors.DarkBlue;
canvas.StrokeSize = 4;
canvas.DrawRectangle(10, 10, 100, 50);

이 예제에서는 크기가 100x50인 진한 파란색 사각형이 (10,10)에 그려집니다.

Screenshot of a dark blue rectangle.

사각형을 그리려면 메서드와 height 인수를 width DrawRectangle 같게 만듭니다.

canvas.StrokeColor = Colors.DarkBlue;
canvas.StrokeSize = 4;
canvas.DrawRectangle(10, 10, 100, 100);

이 예제에서는 크기가 100x100인 진한 파란색 사각형이 (10,10)에 그려집니다.

Screenshot of a dark blue square.

파선 사각형을 그리는 방법에 대한 자세한 내용은 파선 개체 그리기를 참조 하세요.

채워진 사각형은 메서드를 사용하여 FillRectangle 그릴 수 있습니다. 이 메서드에는 형식float의 < a0x/ywidth> 및 height 인수도 필요합니다.

canvas.FillColor = Colors.DarkBlue;
canvas.FillRectangle(10, 10, 100, 50);

이 예제에서는 크기가 100x50인 진한 파란색 채워진 사각형이 (10,10)에 그려집니다.

Screenshot of a dark blue filled rectangle.

FillColor 메서드를 호출 FillRectangle 하기 전에 개체의 ICanvas 속성을 a로 Color 설정해야 합니다.

참고 항목

DrawRectangle 인수를 FillRectangle 사용하는 Rect 오버로드와 오버로드가 있습니다RectF.

둥근 사각형 그리기

둥근 사각형과 사각형은 형식의 ICanvas , y, heightwidthcornerRadius 및 인수가 필요한 x메서드를 사용하여 DrawRoundedRectangle 그릴 수 있습니다.float 인수는 cornerRadius 사각형의 모서리를 반올림하는 데 사용되는 반경을 지정합니다.

다음 예제에서는 둥근 사각형을 그리는 방법을 보여줍니다.

canvas.StrokeColor = Colors.Green;
canvas.StrokeSize = 4;
canvas.DrawRoundedRectangle(10, 10, 100, 50, 12);

이 예제에서는 둥근 모서리와 치수가 100x50인 녹색 사각형이 (10,10)에 그려집니다.

Screenshot of a green rounded rectangle.

파선 둥근 사각형을 그리는 방법에 대한 자세한 내용은 파선 개체 그리기를 참조 하세요.

채워진 둥근 사각형은 다음 형식의 FillRoundedRectangle , y, , widthheight및 인수가 필요한 x메서드를 cornerRadius 사용하여 float그릴 수 있습니다.

canvas.FillColor = Colors.Green;
canvas.FillRoundedRectangle(10, 10, 100, 50, 12);

이 예제에서는 둥근 모서리와 치수가 100x50인 녹색 채워진 사각형이 (10,10)에 그려집니다.

Screenshot of a green filled rounded rectangle.

FillColor 메서드를 호출 FillRoundedRectangle 하기 전에 개체의 ICanvas 속성을 a로 Color 설정해야 합니다.

참고 항목

DrawRoundedRectangle 인수와 FillRoundedRectangle 인수를 사용하는 Rect RectF 오버로드와 각 모서리의 반지름을 별도로 지정할 수 있는 오버로드가 있습니다.

호 그리기

Arcs는 형식의 ICanvas 인수 및 형식 floatclockwise closedDrawArc 인수를 필요로 yxheightstartAnglewidthendAngle 하는 메서드를 사용하여 그릴 수 있습니다.bool 인수는 startAngle x축에서 호 시작점까지의 각도를 지정합니다. 인수는 endAngle x축에서 호 끝점까지의 각도를 지정합니다. 인수는 clockwise 호가 그려지는 방향을 지정하고 closed 인수는 호의 끝점이 시작점에 연결될지 여부를 지정합니다.

다음 예제에서는 호를 그리는 방법을 보여줍니다.

canvas.StrokeColor = Colors.Teal;
canvas.StrokeSize = 4;
canvas.DrawArc(10, 10, 100, 100, 0, 180, true, false);

이 예제에서는 차원 100x100의 청록색 호가 (10,10)에 그려집니다. 호는 0도에서 180도까지 시계 방향으로 그려지고 닫혀 있지 않습니다.

Screenshot of a teal arc.

파선 호를 그리는 방법에 대한 자세한 내용은 파선 개체 그리기를 참조 하세요.

채워진 호는 형식의 FillArc 인수 heightendAngle widthstartAngley및 형식 floatclockwise 인수가 필요한 x메서드를 사용하여 그릴 수 있습니다.bool

canvas.FillColor = Colors.Teal;
canvas.FillArc(10, 10, 100, 100, 0, 180, true);

이 예제에서는 차원 100x100의 채워진 청록색 호가 (10,10)에 그려집니다. 호는 0도에서 180도까지 시계 방향으로 그려지고 자동으로 닫힙니다.

Screenshot of a filled teal arc.

FillColor 메서드를 호출 FillArc 하기 전에 개체의 ICanvas 속성을 a로 Color 설정해야 합니다.

참고 항목

DrawArc 인수를 FillArc 사용하는 Rect 오버로드와 오버로드가 있습니다RectF.

패스 그리기

경로는 하나 이상의 윤곽선 컬렉션입니다. 각 윤곽선은 연결된 직선과 곡선의 컬렉션입니다. 윤곽선은 서로 연결되지 않지만 시각적으로 겹칠 수 있습니다. 경우에 따라 단일 윤곽선이 겹칠 수 있습니다.

경로는 곡선과 복잡한 도형을 그리는 데 사용되며 인수가 필요한 PathF 메서드를 ICanvas 사용하여 DrawPath 그릴 수 있습니다.

일반적으로 윤곽선은 메서드 호출 PathF.MoveTo 로 시작되며, 이 메서드는 값으로 PointF 또는 별도의 x y 좌표로 표현할 수 있습니다. 이 호출은 MoveTo 컨투어의 시작 부분에 지점과 초기 현재 지점을 설정합니다. 그런 다음, 다음 메서드를 호출하여 현재 지점에서 메서드에 지정된 지점까지 선 또는 곡선을 사용하여 윤곽선을 계속 진행한 다음 새 현재 지점이 될 수 있습니다.

  • LineTo 을 클릭하여 경로에 직선을 추가합니다.
  • AddArc 원 또는 줄임표의 둘레에 있는 선인 호를 추가하려면
  • CurveTo 입방형 베지어 스플라인을 추가합니다.
  • QuadTo 이차 베지어 스플라인을 추가합니다.

이러한 메서드에는 선 또는 곡선을 설명하는 데 필요한 모든 데이터가 포함되지 않습니다. 대신 각 메서드는 바로 앞에 있는 메서드 호출에 의해 설정된 현재 지점과 함께 작동합니다. 예를 들어 메서드는 LineTo 현재 지점에 따라 윤곽선에 직선을 추가합니다.

윤곽선은 새 윤곽선 또는 컨투어를 닫는 호출을 시작하는 다른 호출 MoveToClose끝납니다. 메서드는 Close 현재 지점에서 윤곽선의 첫 번째 지점까지 직선을 자동으로 추가하고 경로를 닫은 것으로 표시합니다.

클래스는 PathF 다른 메서드 및 속성도 정의합니다. 다음 메서드는 경로에 전체 윤곽을 추가합니다.

다음 예제에서는 경로를 그리는 방법을 보여줍니다.

PathF path = new PathF();
path.MoveTo(40, 10);
path.LineTo(70, 80);
path.LineTo(10, 50);
path.Close();
canvas.StrokeColor = Colors.Green;
canvas.StrokeSize = 6;
canvas.DrawPath(path);

이 예제에서는 닫힌 녹색 삼각형이 그려집니다.

Screenshot of a closed green triangle.

채워진 경로는 인수가 FillPath필요한 다음을 사용하여 그릴 수 있습니다.PathF

PathF path = new PathF();
path.MoveTo(40, 10);
path.LineTo(70, 80);
path.LineTo(10, 50);
canvas.FillColor = Colors.SlateBlue;
canvas.FillPath(path);

이 예제에서는 채워진 슬레이트 파란색 삼각형이 그려집니다.

Screenshot of a filled slate blue triangle.

FillColor 메서드를 호출 FillPath 하기 전에 개체의 ICanvas 속성을 a로 Color 설정해야 합니다.

Important

메서드에는 FillPath 지정된 채우기 알고리즘을 WindingMode 설정하는 오버로드가 있습니다. 자세한 내용은 권딩 모드를 참조 하세요.

이미지 그리기

형식의 ICanvas 인수 및 x, ywidthheight 및 인수가 필요한 IImage 메서드를 사용하여 DrawImage 이미지를 그릴 수 있습니다.float

다음 예제에서는 이미지를 로드하고 캔버스에 그리는 방법을 보여줍니다.

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
    image = PlatformImage.FromStream(stream);
}

if (image != null)
{
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}

이 예제에서는 이미지가 어셈블리에서 검색되고 스트림으로 로드됩니다. 그런 다음 실제 크기(10,10)로 그려집니다.

Screenshot of an image.

Important

어셈블리에 포함된 이미지를 로드하려면 이미지의 빌드 작업이 MauiImage가 아닌 Embedded Resource설정되어야 합니다.

문자열 그리기

오버로드 중 하나를 사용하여 문자열을 ICanvas DrawString 그릴 수 있습니다. 각 문자열의 모양은 , FontColorFontSize 속성을 설정Font하여 정의할 수 있습니다. 문자열 맞춤은 문자열 경계 상자 내에서 맞춤을 수행하는 가로 및 세로 맞춤 옵션으로 지정할 수 있습니다.

참고 항목

문자열의 경계 상자는 해당 x, ywidthheight 인수에 의해 정의됩니다.

다음 예제에서는 문자열을 그리는 방법을 보여 줍니다.

canvas.FontColor = Colors.Blue;
canvas.FontSize = 18;

canvas.Font = Font.Default;
canvas.DrawString("Text is left aligned.", 20, 20, 380, 100, HorizontalAlignment.Left, VerticalAlignment.Top);
canvas.DrawString("Text is centered.", 20, 60, 380, 100, HorizontalAlignment.Center, VerticalAlignment.Top);
canvas.DrawString("Text is right aligned.", 20, 100, 380, 100, HorizontalAlignment.Right, VerticalAlignment.Top);

canvas.Font = Font.DefaultBold;
canvas.DrawString("This text is displayed using the bold system font.", 20, 140, 350, 100, HorizontalAlignment.Left, VerticalAlignment.Top);

canvas.Font = new Font("Arial");
canvas.FontColor = Colors.Black;
canvas.SetShadow(new SizeF(6, 6), 4, Colors.Gray);
canvas.DrawString("This text has a shadow.", 20, 200, 300, 100, HorizontalAlignment.Left, VerticalAlignment.Top);

이 예제에서는 모양 및 맞춤 옵션이 다른 문자열이 표시됩니다.

Screenshot of strings using different alignment options.

참고 항목

DrawString 또한 오버로드를 사용하면 잘림 및 줄 간격을 지정할 수 있습니다.

그림자 그리기에 대한 자세한 내용은 그림자 그리기를 참조하세요.

특성이 지정된 텍스트 그리기

특성이 지정된 텍스트는 형식의 ICanvas DrawText 인수 및 x, widthyheight 및 인수float가 필요한 IAttributedText 메서드를 사용하여 그릴 수 있습니다. 특성이 지정된 텍스트는 일반적으로 스타일 지정 데이터를 나타내는 해당 텍스트의 일부에 대해 연결된 특성이 있는 문자열입니다.

다음 예제에서는 특성이 지정된 텍스트를 그리는 방법을 보여줍니다.

using Microsoft.Maui.Graphics.Text;
...

canvas.Font = new Font("Arial");
canvas.FontSize = 18;
canvas.FontColor = Colors.Blue;

string markdownText = @"This is *italic text*, **bold text**, __underline text__, and ***bold italic text***.";
IAttributedText attributedText = MarkdownAttributedTextReader.Read(markdownText); // Requires the Microsoft.Maui.Graphics.Text.Markdig package
canvas.DrawText(attributedText, 10, 10, 400, 400);

이 예제에서 markdown은 특성이 지정된 텍스트로 변환되고 올바른 스타일과 함께 표시됩니다.

Screenshot of correctly rendered markdown.

Important

특성이 지정된 텍스트를 그리려면 NuGet 패키지를 프로젝트에 추가 Microsoft.Maui.Graphics.Text.Markdig 해야 합니다.

채우기 및 스트로크로 그리기

채우기 및 스트로크가 모두 있는 그래픽 개체는 채우기 메서드 후 그리기 메서드를 호출하여 캔버스에 그릴 수 있습니다. 예를 들어 윤곽선이 있는 사각형을 그리려면 색으로 FillColorStrokeColor 속성을 설정한 다음 메서드를 호출한 다음 메서드를 호출 FillRectangle 합니다 DrawRectangle .

다음 예제에서는 스트로크 윤곽선이 있는 채워진 원을 경로로 그립니다.

float radius = Math.Min(dirtyRect.Width, dirtyRect.Height) / 4;

PathF path = new PathF();
path.AppendCircle(dirtyRect.Center.X, dirtyRect.Center.Y, radius);

canvas.StrokeColor = Colors.Blue;
canvas.StrokeSize = 10;
canvas.FillColor = Colors.Red;

canvas.FillPath(path);
canvas.DrawPath(path);

이 예제에서는 개체의 스트로크 및 채우기 색을 PathF 지정합니다. 채워진 원을 그린 다음 원의 윤곽선 스트로크를 그립니다.

Screenshot of a circle drawn with fill and stroke.

Warning

채우기 메서드 전에 draw 메서드를 호출하면 잘못된 z 순서가 발생합니다. 채우기가 스트로크 위에 그려지고 스트로크가 표시되지 않습니다.

그림자 그리기

다음 인수를 사용하는 메서드를 ICanvas 사용하여 그림자를 SetShadow 적용할 수 있습니다.

  • offset형식 SizeF의 그림자에 대한 오프셋을 지정합니다. 이 오프셋은 그림자를 만드는 광원의 위치를 나타냅니다.
  • blur의 형식 float은 그림자에 적용할 흐림 효과를 나타냅니다.
  • color형식 Color의 그림자 색을 정의합니다.

다음 예제에서는 채워진 개체에 그림자를 추가하는 방법을 보여 줍니다.

canvas.FillColor = Colors.Red;
canvas.SetShadow(new SizeF(10, 10), 4, Colors.Grey);
canvas.FillRectangle(10, 10, 90, 100);

canvas.FillColor = Colors.Green;
canvas.SetShadow(new SizeF(10, -10), 4, Colors.Grey);
canvas.FillEllipse(110, 10, 90, 100);

canvas.FillColor = Colors.Blue;
canvas.SetShadow(new SizeF(-10, 10), 4, Colors.Grey);
canvas.FillRoundedRectangle(210, 10, 90, 100, 25);

다음 예제에서는 광원이 다른 위치에 있는 그림자가 채워진 개체에 동일한 양의 흐림 효과로 추가됩니다.

Screenshot of a objects drawn with shadows.

파선 개체 그리기

ICanvas 개체에는 StrokeDashPattern 형식 float[]의 속성이 있습니다. 이 속성은 개체의 float 스트로크를 그릴 때 사용할 대시와 간격의 패턴을 나타내는 값의 배열입니다. 배열의 각각 float 은 대시 또는 간격의 길이를 지정합니다. 배열의 첫 번째 항목은 대시의 길이를 지정하고 배열의 두 번째 항목은 간격의 길이를 지정합니다. 따라서 float 인덱스 값이 짝수인 값은 대시를 지정하고 float 홀수 인덱스 값이 있는 값은 간격을 지정합니다.

다음 예제에서는 일반 대시를 사용하여 파선 사각형을 그리는 방법을 보여줍니다.

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.StrokeDashPattern = new float[] { 2, 2 };
canvas.DrawRectangle(10, 10, 90, 100);

이 예제에서는 일반 파선 스트로크가 있는 사각형이 그려집니다.

Screenshot of a regular dashed square.

다음 예제에서는 불규칙한 대시를 사용하여 파선 사각형을 그리는 방법을 보여줍니다.

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.StrokeDashPattern = new float[] { 4, 4, 1, 4 };
canvas.DrawRectangle(10, 10, 90, 100);

이 예제에서는 불규칙한 파선이 있는 사각형이 그려집니다.

Screenshot of an irregular dashed square.

제어줄 끝

선에는 시작 캡, 선 본문 및 끝 캡의 세 부분으로 구성됩니다. 시작 및 끝 대문자로 줄의 시작과 끝을 설명합니다.

ICanvas 개체에는 StrokeLineCap 줄의 시작과 끝을 설명하는 형식 LineCap의 속성이 있습니다. LineCap 열거형은 다음 멤버를 정의합니다.

  • Butt- 선의 정확한 엔드포인트까지 확장하기 위해 그려지는 정사각형 끝의 선을 나타냅니다. StrokeLineCap 속성의 기본값입니다.
  • Round- 둥근 끝이 있는 선을 나타냅니다.
  • Square- 정사각형 끝의 선을 나타내며 끝점을 넘어 선 너비의 절반과 같은 거리로 확장되도록 그려집니다.

다음 예제는 StrokeLineCap 속성을 설정하는 방법을 보여 줍니다.

canvas.StrokeSize = 10;
canvas.StrokeColor = Colors.Red;
canvas.StrokeLineCap = LineCap.Round;
canvas.DrawLine(10, 10, 110, 110);

이 예제에서는 줄의 시작과 끝에서 빨간색 선이 반올림됩니다.

Screenshot of three lines with different line caps.

제어줄 조인

ICanvas 개체에는 StrokeLineJoin 개체의 꼭짓점에서 사용되는 조인 유형을 지정하는 형식 LineJoin의 속성이 있습니다. LineJoin 열거형은 다음 멤버를 정의합니다.

  • Miter- 선명하거나 잘린 모서리를 생성하는 각 꼭짓점을 나타냅니다. StrokeLineJoin 속성의 기본값입니다.
  • Round모퉁이에서 원호를 생성하는 둥근 꼭짓점을 나타냅니다.
  • Bevel대각선 모서리를 생성하는 경사진 꼭짓점을 나타냅니다.

참고 항목

속성이 StrokeLineJoin 설정 Miter되면 개체에서 MiterLimit 줄 조인의 miter 길이를 제한하기 위해 속성을 a float 로 설정할 수 있습니다.

다음 예제는 StrokeLineJoin 속성을 설정하는 방법을 보여 줍니다.

PathF path = new PathF();
path.MoveTo(10, 10);
path.LineTo(110, 50);
path.LineTo(10, 110);

canvas.StrokeSize = 20;
canvas.StrokeColor = Colors.Blue;
canvas.StrokeLineJoin = LineJoin.Round;
canvas.DrawPath(path);

이 예제에서 파란색 PathF 개체는 꼭짓점에서 조인을 반올림했습니다.

Screenshot of the effect of the three different LineJoin enumeration members.

클립 개체

그리기 전에 다음 메서드를 ICanvas 사용하여 그리기 전에 그리는 그래픽 개체를 잘라낼 수 있습니다.

  • ClipPath 개체의 영역 내에 있는 영역만 표시되도록 개체를 클리핑 PathF 합니다.
  • ClipRectangle 사각형 영역 내에 있는 영역만 표시되도록 개체를 클리핑합니다. 사각형은 인수 또는 Rect RectF 인수를 사용하여 float 지정할 수 있습니다.
  • SubtractFromClip 는 사각형 영역 외부에 있는 영역만 표시되도록 개체를 클리핑합니다. 사각형은 인수 또는 Rect RectF 인수를 사용하여 float 지정할 수 있습니다.

다음 예제에서는 메서드를 사용하여 ClipPath 이미지를 클리핑하는 방법을 보여줍니다.

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
    image = PlatformImage.FromStream(stream);
}

if (image != null)
{
    PathF path = new PathF();
    path.AppendCircle(100, 90, 80);
    canvas.ClipPath(path);  // Must be called before DrawImage
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}

이 예제에서는 반경이 80인 (100,90)의 가운데에 있는 원을 정의하는 개체를 사용하여 PathF 이미지가 잘립니다. 그 결과 원 내 이미지의 일부만 표시됩니다.

Screenshot of an image that's been clipped with the ClipPath method.

Important

메서드에는 ClipPath 클리핑할 때 사용되는 채우기 알고리즘을 설정하는 지정할 수 WindingMode 있는 오버로드가 있습니다. 자세한 내용은 권딩 모드를 참조 하세요.

다음 예제에서는 메서드를 사용하여 SubtractFromClip 이미지를 클리핑하는 방법을 보여줍니다.

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
    image = PlatformImage.FromStream(stream);
}

if (image != null)
{
    canvas.SubtractFromClip(60, 60, 90, 90);
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}

이 예제에서는 메서드에 제공 SubtractFromClip 된 인수로 지정된 사각형으로 정의된 영역이 이미지에서 잘립니다. 그 결과 사각형 외부의 이미지 부분만 표시됩니다.

Screenshot of an image that's been clipped with the SubtractFromClip method.