다음을 통해 공유


그래픽 개체 그리기

샘플을 찾아봅니다. 샘플 찾아보기

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

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

메모

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

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

선 그리기

ICanvas 객체에 DrawLine 메서드를 사용하여 선을 그릴 수 있으며, 이 메서드는 선의 시작점과 끝점을 나타내는 네 개의 float 인수를 필요로 합니다.

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

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

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

빨간색 선의 스크린샷

메모

두 개의 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)까지 빨간색 점선으로 대각선을 그립니다.

빨간색 점선의 스크린샷.

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

줄임표 그리기

타원 및 원은 ICanvas에서 DrawEllipse 메서드를 사용하여 그릴 수 있으며, 이때 x, y, width, height 인수가 필요하며 인수는 float 유형입니다.

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

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

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

빨간색 줄임표의 스크린샷.

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

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

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

빨간색 원의 스크린샷.

메모

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

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

float 형식의 매개변수를 필요로 하는 x 메서드를 사용하여 채워진 타원을 그릴 수 있습니다. 이 과정에는 FillEllipse, y, width, 및 height 인수가 포함됩니다.

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

이 예제에서는 차원이 150x50인 빨간색으로 채운 타원이 (10,10)에 그려집니다.

빨간색 채워진 줄임표의 스크린샷.

ICanvas 개체의 FillColor 속성을 Color로 설정해야 FillEllipse 메서드를 호출할 수 있습니다.

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

메모

RectRectF 인수를 받는 DrawEllipseFillEllipse 오버로드가 있습니다. 또한 오버로드도 DrawCircleFillCircle 있습니다.

사각형 그리기

직사각형 및 정사각형은 DrawRectangle 메서드를 사용하여 ICanvas에 그릴 수 있으며, float 형식의 x, y, width, height 매개변수가 필요합니다.

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

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

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

진한 파란색 사각형의 스크린샷.

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

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

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

진한 파란색 사각형의 스크린샷.

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

채워진 사각형은 FillRectangle 메서드를 사용하여 그릴 수 있으며, 이 메서드는 float 유형의 x, y, width, height 인수가 필요합니다.

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

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

진한 파란색으로 채워진 사각형의 스크린샷.

ICanvas 개체의 FillColor 속성을 Color로 설정해야 FillRectangle 메서드를 호출할 수 있습니다.

메모

DrawRectangleFillRectangle 오버로드는 각각 RectRectF 인수를 사용합니다.

둥근 사각형 그리기

float 유형의 ICanvas에 둥근 사각형과 사각형을 그리기 위해서는, x, y, width, height, cornerRadius 등의 인수를 필요로 하는 DrawRoundedRectangle 메서드를 사용해야 합니다. 인수는 cornerRadius 사각형의 모서리를 반올림하는 데 사용되는 반경을 지정합니다.

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

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

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

녹색 둥근 사각형의 스크린샷.

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

채워진 둥근 사각형은 FillRoundedRectangle 메서드와 x, y, width, height, cornerRadius 인수와 같은 float 유형을 사용하여 그릴 수 있습니다.

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

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

녹색으로 채워진 둥근 사각형의 스크린샷.

ICanvas 개체의 FillColor 속성을 Color로 설정해야 FillRoundedRectangle 메서드를 호출할 수 있습니다.

메모

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

호 그리기

호를 ICanvas에 그리기 위해서는, 형식 floatx, y, width, height, startAngle, endAngle 인수가 필요하고, 형식 boolclockwise, closed 인수도 요구하는 DrawArc 메서드를 사용할 수 있습니다. 인수는 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도까지 시계 방향으로 그려지고 닫혀 있지 않습니다.

청록색 호 스크린샷.

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

채워진 호는 FillArc 메서드를 사용하여 그릴 수 있으며, 이 메서드에는 x, y, width, height, startAngle, endAngle 유형의 인수와 bool 유형의 clockwise 인수가 필요합니다.

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

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

채워진 청록색 아크의 스크린샷

ICanvas 개체의 FillColor 속성을 Color로 설정해야 FillArc 메서드를 호출할 수 있습니다.

메모

DrawArcFillArc 오버로드는 각각 RectRectF 인수를 사용합니다.

경로 그리기

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

ICanvas에서 경로를 사용하는 방법은 곡선과 복잡한 도형을 그리는 데 사용됩니다. DrawPath 메서드를 사용하여 PathF 인수와 함께 그릴 수 있습니다.

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

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

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

윤곽선은 MoveTo 호출로 끝나 새 윤곽선을 시작하거나, Close 호출로 윤곽선을 닫습니다. 메서드는 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);

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

닫힌 녹색 삼각형의 스크린샷.

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);

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

채워진 슬레이트 파란색 삼각형의 스크린샷.

ICanvas 개체의 FillColor 속성을 Color로 설정해야 FillPath 메서드를 호출할 수 있습니다.

중요합니다

메서드에는 FillPath의 오버로드가 있으며, 이를 통해 사용할 채우기 알고리즘을 설정하도록 WindingMode을 지정할 수 있습니다. 자세한 내용은 와인딩 모드를 참조하세요.

이미지 그리기

형식이 floatx, y, width, 및 height 인수와 IImage 인수가 필요한 DrawImage 메서드를 사용하여 ICanvas에 이미지를 그릴 수 있습니다.

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

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)로 그려집니다.

이미지의 스크린샷.

중요합니다

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

문자열 그리기

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

메모

문자열의 경계 상자는 해당 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);

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

다른 맞춤 옵션을 사용하는 문자열의 스크린샷.

메모

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

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

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

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

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

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은 특성이 지정된 텍스트로 변환되고 올바른 스타일과 함께 표시됩니다.

올바르게 렌더링된 markdown의 스크린샷.

중요합니다

특성이 지정된 텍스트를 그리려면 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 개체의 스트로크와 채우기 색을 지정합니다. 채워진 원을 그린 다음 원의 윤곽선 스트로크를 그립니다.

채우기 및 스트로크로 그린 원의 스크린샷.

경고

채우기 메서드 전에 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);

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

그림자가 있는 개체의 스크린샷.

점선 개체 그리기

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);

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

일반 파선 사각형의 스크린샷.

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

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

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

불규칙한 파선 사각형의 스크린샷.

제어줄 끝

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

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);

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

다른 캡 스타일이 적용된 세 줄의 스크린샷.

제어줄 조인

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

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

메모

속성이 StrokeLineJoin로 설정되면 MiterLimit 속성을 float로 설정하여 개체의 선 연결의 miter 길이를 제한할 수 있습니다.

다음 예제에서는 속성을 설정하는 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 개체는 꼭짓점에서 연결부를 둥글게 처리합니다.

세 가지 LineJoin 열거형 멤버의 효과 스크린샷

클립 개체

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

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

다음 예제에서는 메서드를 사용하여 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);
}

이 예제에서는 중심이 (100,90)이고 반경이 80인 원을 정의하는 PathF 객체를 사용하여 이미지가 잘립니다. 그 결과로 원 안에 있는 이미지의 부분만 보입니다.

ClipPath 메서드로 잘린 이미지의 스크린샷.

중요합니다

메서드에는 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 된 인수로 지정된 사각형으로 정의된 영역이 이미지에서 잘립니다. 그 결과 사각형 외부의 이미지 부분만 표시됩니다.

SubtractFromClip 메서드로 잘린 이미지의 스크린샷.