다음을 통해 공유

GraphicsView

  • 아티클

Browse sample. 샘플 찾아보기

.NET 다중 플랫폼 앱 UI(.NET MAUI) GraphicsView 는 네임스페이스의 형식 Microsoft.Maui.Graphics 을 사용하여 2D 그래픽을 그릴 수 있는 그래픽 캔버스입니다. 자세한 Microsoft.Maui.Graphics내용은 그래픽을 참조 하세요.

GraphicsView 는 Drawable 그릴 콘텐츠를 지정하는 형식 IDrawable의 속성을 정의합니다. 이 속성은 BindableProperty데이터 바인딩의 대상이 될 수 있으며 스타일이 지정될 수 있다는 의미입니다.

GraphicsView 는 다음 이벤트를 정의합니다.

  • StartHoverInteraction- TouchEventArgs포인터가 .의 GraphicsView적중 테스트 영역에 들어갈 때 발생합니다.
  • MoveHoverInteraction- TouchEventArgs포인터가 다시 기본 때 포인터가 이동할 때 발생합니다GraphicsView.
  • EndHoverInteraction포인터가 적중 횟수 테스트 영역을 떠날 때 발생합니다 GraphicsView.
  • StartInteraction을 누르면 발생되는 GraphicsView/a0TouchEventArgs>입니다.
  • DragInteraction을 사용하여 TouchEventArgsGraphicsView 끌어다 집니다.
  • EndInteraction이벤트를 발생시킨 언론이 릴리스될 때 발생하는 StartInteraction/a0TouchEventArgs>입니다.
  • CancelInteraction는 접촉한 언론이 접촉을 GraphicsView 잃을 때 제기됩니다.

GraphicsView 만들기

A는 GraphicsView 컨트롤에 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 그리기 캔버스의 크기와 위치에 대한 데이터를 포함하는 인수입니다. 그리기에 ICanvas대한 자세한 내용은 그래픽 개체 그리기를 참조 하세요.

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>

그래픽 개체의 위치 및 크기 지정

메서드에서 인수 Draw 의 ICanvas 속성을 RectF 검사하여 페이지의 위치와 크기를 확인할 수 있습니다.

구조체는 RectF 다음 속성을 정의합니다.

  • Bottom- 캔버스 아래쪽 가장자리의 y 좌표를 나타내는 형식 float입니다.
  • Center- 캔버스 가운데의 좌표를 지정하는 형식 PointF입니다.
  • Height캔버스의 높이를 정의하는 형식 float의 입니다.
  • IsEmpty- 캔버스의 크기와 위치가 0인지 여부를 나타내는 형식 bool입니다.
  • Left캔버스 왼쪽 가장자리의 x 좌표를 나타내는 형식 float의 입니다.
  • Location- 캔버스의 왼쪽 위 모서리 좌표를 정의하는 형식 PointF입니다.
  • Right캔버스 오른쪽 가장자리의 x 좌표를 나타내는 형식 float의 입니다.
  • Size캔버스의 너비와 높이를 정의하는 형식 SizeF의 입니다.
  • Top- 캔버스 위쪽 가장자리의 y 좌표를 나타내는 형식 float입니다.
  • Width캔버스의 너비를 정의하는 형식 float의 입니다.
  • X- 캔버스의 왼쪽 위 모서리에 대한 x 좌표를 정의하는 형식 float입니다.
  • Y- 캔버스의 왼쪽 위 모서리에 대한 y 좌표를 정의하는 형식 float입니다.

이러한 속성을 사용하여 그래픽 개체 ICanvas의 위치를 지정하고 크기를 지정할 수 있습니다. 예를 들어 그리기 메서드에 대한 인수로 값과 Center.Y 값을 사용하여 Center.X 그래픽 개체를 가운데 Canvas 에 배치할 수 있습니다. 그리기에 ICanvas대한 자세한 내용은 그래픽 개체 그리기를 참조 하세요.

캔버스 무효화

GraphicsView 에는 Invalidate 캔버스 자체를 다시 그릴 필요가 있음을 알리는 메서드가 있습니다. 이 메서드는 인스턴스에서 호출되어야 합니다.GraphicsView

graphicsView.Invalidate();

.NET MAUI는 필요에 따라 UI를 GraphicsView 자동으로 무효화합니다. 예를 들어 요소가 처음 표시되거나, 보기로 들어오거나, 요소를 위쪽에서 이동하여 표시되면 다시 그려집니다. 호출 Invalidate 해야 하는 유일한 시간은 콘텐츠를 계속 볼 수 있는 동안 변경한 경우와 같이 강제로 GraphicsView 다시 그리려는 경우입니다.