그래픽

아티클
02/13/2024

.NET 다중 플랫폼 앱 UI(.NET MAUI)는 네임스페이스의 형식을 사용하여 2D 그래픽을 그릴 수 있는 플랫폼 간 그래픽 캔버스를 Microsoft.Maui.Graphics 제공합니다. 이 캔버스는 셰이프 및 이미지 그리기 및 그리기, 작성 작업 및 그래픽 개체 변환을 지원합니다.

제공된 Microsoft.Maui.Graphics기능과 .NET MAUI 셰이프 및 브러시에서 제공하는 기능 간에는 많은 유사점이 있습니다. 그러나 각 시나리오는 다음과 같은 다양한 시나리오를 대상으로 합니다.

Microsoft.Maui.Graphics 기능은 그리기 캔버스에서 사용해야 하며, 성능이 좋은 그래픽을 그릴 수 있으며, 그래픽 기반 컨트롤을 작성하는 편리한 방법을 제공합니다. 예를 들어 GitHub 기여 프로필을 복제본(replica) 제어는 .NET MAUI 셰이프를 사용하는 Microsoft.Maui.Graphics 것보다 더 쉽게 구현할 수 있습니다.
.NET MAUI 셰이프는 페이지에서 직접 사용할 수 있으며 모든 컨트롤에서 브러시를 사용할 수 있습니다. 이 기능은 매력적인 UI를 생성하는 데 도움이 되도록 제공됩니다.

.NET MAUI 셰이프에 대한 자세한 내용은 셰이프를 참조 하세요.

그래픽 그리기

.NET MAUI GraphicsView 에서는 기능을 사용할 Microsoft.Maui.Graphics 수 있습니다. GraphicsView 는 컨트롤에서 Drawable 그릴 콘텐츠를 지정하는 형식 IDrawable의 속성을 정의합니다. 그릴 콘텐츠를 지정하려면 파생 IDrawable되는 개체를 만들고 해당 메서드를 Draw 구현해야 합니다.

namespace MyMauiApp
{
    public class GraphicsDrawable : IDrawable
    {
        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            // Drawing code goes here
        }      
    }
}

메서드에는 Draw 인수와 인수가 ICanvas 있습니다 RectF . ICanvas 인수는 그래픽 개체를 그리는 그리기 캔버스입니다. 인수는 RectFstruct 그리기 캔버스의 크기와 위치에 대한 데이터를 포함하는 인수입니다.

XAML에서 개체를 IDrawable 리소스로 선언한 다음 해당 키를 속성 값 Drawable 으로 지정하여 사용할 GraphicsView 수 있습니다.

<ContentPage xmlns=http://schemas.microsoft.com/dotnet/2021/maui
             xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
             xmlns:drawable="clr-namespace:MyMauiApp"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Resources>
        <drawable:GraphicsDrawable x:Key="drawable" />
    </ContentPage.Resources>
    <VerticalStackLayout>
        <GraphicsView Drawable="{StaticResource drawable}"
                      HeightRequest="300"
                      WidthRequest="400" />
    </VerticalStackLayout>
</ContentPage>

자세한 내용은 GraphicsViewGraphicsView를 참조하세요.

그리기 캔버스

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

ICanvas 는 캔버스에 그려진 개체의 모양에 영향을 주는 다음 속성을 정의합니다.

Alpha형식 float의 개체의 불투명도를 나타냅니다.
Antialias형식 bool의 앤티앨리어싱을 사용할지 여부를 지정합니다.
BlendMode형식 BlendMode의 는 개체가 기존 개체 위에 렌더링될 때 발생하는 작업을 결정하는 혼합 모드를 정의합니다.
DisplayScale형식 float의 는 캔버스에서 UI 크기를 조정하는 배율 인수를 나타냅니다.
FillColor형식 Color은 개체의 내부를 그리는 데 사용되는 색을 나타냅니다.
Font형식 IFont의 은 텍스트를 그릴 때 글꼴을 정의합니다.
FontColor형식 Color은 텍스트를 그릴 때 글꼴 색을 지정합니다.
FontSize형식 float의 은 텍스트를 그릴 때 글꼴의 크기를 정의합니다.
MiterLimit형식 float의 은 개체에 있는 줄 조인의 miter 길이 제한을 지정합니다.
StrokeColor형식 Color은 개체의 윤곽선을 그리는 데 사용되는 색을 나타냅니다.
StrokeDashOffset형식 float의 는 대시가 시작되는 대시 패턴 내의 거리를 지정합니다.
StrokeDashPattern형식 float[]의 경우 개체의 윤곽을 지정하는 데 사용되는 파선과 간격의 패턴을 지정합니다.
StrokeLineCap형식 LineCap의 경우 선의 시작과 끝에 있는 셰이프를 설명합니다.
StrokeLineJoin형식 LineJoin의 경우 셰이프의 꼭짓점에서 사용되는 조인 유형을 지정합니다.
StrokeSize형식 float의 는 개체 개요의 너비를 나타냅니다.

기본적으로 1, ICanvas 검정StrokeLineJoin, StrokeColor 대, StrokeLineCap 1로 LineJoin.MiterLineJoin.Cap설정합니다StrokeSize.

그리기 캔버스 상태

각 플랫폼의 그리기 캔버스는 상태를 기본 수 있습니다. 이렇게 하면 현재 그래픽 상태를 유지하며 필요한 경우 복원할 수 있습니다.

그러나 캔버스의 모든 요소가 그래픽 상태의 요소가 아닌 경우 그래픽 상태에는 경로와 같은 그리기 개체와 그라데이션과 같은 페인트 개체가 포함되지 않습니다. 각 플랫폼에서 그래픽 상태의 일반적인 요소에는 스트로크 및 채우기 데이터, 글꼴 데이터가 포함됩니다.

각 ICanvas 그래픽 상태는 다음 메서드를 사용하여 조작할 수 있습니다.

SaveState- 현재 그래픽 상태를 저장합니다.
RestoreState그래픽 상태를 가장 최근에 저장된 상태로 설정하는 입니다.
ResetState그래픽 상태를 기본값으로 다시 설정하는 입니다.

참고 항목

이러한 메서드에 의해 유지되는 상태는 플랫폼에 따라 달라집니다.

그래픽

그래픽 그리기

그리기 캔버스

그리기 캔버스 상태

피드백

추가 리소스