DrawingView

아티클
05/16/2024

터치 DrawingView 또는 마우스 상호 작용을 통해 선 그리기를 허용하는 표면을 제공합니다. 사용자 드로잉의 결과를 이미지로 저장할 수 있습니다. 이에 대한 일반적인 사용 사례는 애플리케이션에 서명 상자를 제공하는 것입니다.

기본 사용법

DrawingView 에서는 선 색, 선 너비를 설정하고 선 컬렉션에 바인딩할 수 있습니다.

XAML

XAML 네임스페이스 포함

XAML에서 도구 키트를 사용하려면 페이지 또는 보기에 다음 xmlns 을 추가해야 합니다.

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

따라서 다음을 수행합니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

다음과 같이 포함 xmlns 하도록 수정됩니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

DrawingView 사용

<toolkit:DrawingView
            Lines="{Binding MyLines}"
            LineColor="Red"
            LineWidth="5" />

C#

using CommunityToolkit.Maui.Views;

var drawingView = new DrawingView
{
    Lines = new ObservableCollection<IDrawingLine>(),
    LineColor = Colors.Red,
    LineWidth = 5
};

다음 스크린샷은 Android의 결과 DrawingView를 보여줍니다.

Android의 DrawingView 스크린샷

여러 줄 사용

기본적으로 DrawingView 1줄만 지원합니다. MultiLine true로 설정 IsMultiLineModeEnabled 하려면 false인지 확인 ShouldClearOnFinish 합니다.

XAML

<views:DrawingView
            Lines="{Binding MyLines}"
            IsMultiLineModeEnabled="true"
            ShouldClearOnFinish="false" />

C#

using CommunityToolkit.Maui.Views;

var gestureImage = new Image();
var drawingView = new DrawingView
{
    Lines = new ObservableCollection<IDrawingLine>(),
    IsMultiLineModeEnabled = true,
    ShouldClearOnFinish = false,
};

다음 스크린샷은 Android의 결과 DrawingView를 보여줍니다.

Android에서 여러 줄이 있는 DrawingView의 스크린샷

드로잉 라인 완료 시 이벤트 처리

DrawingView 에서는 다음과 같은 OnDrawingLineCompleted이벤트를 구독할 수 있습니다. 해당 명령 DrawingLineCompletedCommand 도 사용할 수 있습니다.

XAML

<views:DrawingView
            Lines="{Binding MyLines}"
            DrawingLineCompletedCommand="{Binding DrawingLineCompletedCommand}"
            OnDrawingLineCompleted="OnDrawingLineCompletedEvent" />

C#

using CommunityToolkit.Maui.Views;

var gestureImage = new Image();
var drawingView = new DrawingView
{
    Lines = new ObservableCollection<IDrawingLine>(),
    DrawingLineCompletedCommand = new Command<IDrawingLine>(async (line) =>
    {
        var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

        var stream = await line.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
        gestureImage.Source = ImageSource.FromStream(() => stream);
    })
};
drawingView.OnDrawingLineCompleted += async (s, e) =>
{
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

    var stream = await e.LastDrawingLine.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
    gestureImage.Source = ImageSource.FromStream(() => stream);
};

ScrollView 내에서 사용

내부 ScrollView 를 DrawingView 사용하는 경우 iOS에서 터치 조작을 ScrollView 가로챌 수 있습니다. 다음 예제에 따라 iOS에서 속성을 설정 ShouldDelayContentTouches 하여 이를 방지할 false 수 있습니다.

DrawingView를 포함하는 ScrollView에 ios:ScrollView.ShouldDelayContentTouches="false"를 추가하여 이 문제를 해결했습니다.

<ContentPage
    xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls">

    <ScrollView ios:ScrollView.ShouldDelayContentTouches="false">

        <DrawingView />

    </ScrollView>

</ContentPage>

자세한 내용은 ScrollView 콘텐츠 터치를 참조하세요.

고급 사용

모든 이점을 DrawingView 얻기 위해 그리기 선의 이미지 스트림을 가져오는 메서드를 제공합니다.

XAML

<toolkit:DrawingView
            x:Name="DrawingViewControl"
            Lines="{Binding MyLines}"
            IsMultiLineModeEnabled="true"
            ShouldClearOnFinish="true"
            DrawingLineCompletedCommand="{Binding DrawingLineCompletedCommand}"
            OnDrawingLineCompleted="OnDrawingLineCompletedEvent"
            LineColor="Red"
            LineWidth="5"
            HorizontalOptions="Fill"
            VerticalOptions="Fill">
            <toolkit:DrawingView.Background>
                    <LinearGradientBrush StartPoint="0,0"
                                         EndPoint="0,1">
                        <GradientStop Color="Blue"
                                      Offset="0"/>
                        <GradientStop Color="Yellow"
                                      Offset="1"/>
                    </LinearGradientBrush>
            </toolkit:DrawingView.Background>
</toolkit:DrawingView>

C#

using CommunityToolkit.Maui.Views;

var gestureImage = new Image();
var drawingView = new DrawingView
{
    Lines = new ObservableCollection<IDrawingLine>(),
    IsMultiLineModeEnabled = true,
    ShouldClearOnFinish = false,
    DrawingLineCompletedCommand = new Command<IDrawingLine>(async (line) =>
    {
        var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

        var stream = await line.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
        gestureImage.Source = ImageSource.FromStream(() => stream);
    }),
    LineColor = Colors.Red,
    LineWidth = 5,
    Background = Brush.Red
};
drawingView.OnDrawingLineCompleted += async (s, e) =>
{
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

    var stream = await e.LastDrawingLine.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
    gestureImage.Source = ImageSource.FromStream(() => stream);
};

// get stream from lines collection
var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
var lines = new List<IDrawingLine>();
var stream1 = await DrawingView.GetImageStream(
                lines,
                new Size(gestureImage.Width, gestureImage.Height),
                Colors.Black.
                cts.Token);

// get steam from the current DrawingView
var stream2 = await drawingView.GetImageStream(gestureImage.Width, gestureImage.Height, cts.Token);

속성

속성	Type	설명
선	`ObservableCollection<IDrawingLine>`	`IDrawingLine` 해당 컬렉션은 현재`DrawingView`
IsMultiLineModeEnabled	`bool`	여러 줄 모드를 전환합니다. true이면 탭/클릭이 선 사이에 놓이는 동안 여러 줄을 그릴 `DrawingView` 수 있습니다. 참고: `ClearOnFinish` 사용하도록 설정하면 탭/클릭이 해제된 후 줄이 지워집니다. `DrawingLineCompletedCommand` 또한 그려지는 각 선 후에 발생합니다.
ShouldClearOnFinish	`bool`	탭/클릭을 해제한 후 지워지고 선이 그려지는지 여부를 `DrawingView` 나타냅니다. 참고: `IsMultiLineModeEnabled` 사용하도록 설정하면 예기치 않은 동작이 발생할 수 있습니다.
DrawingLineStartedCommand	`ICommand`	이 명령은 선 `DrawingView` 그리기를 시작할 때마다 호출됩니다.
DrawingLineCancelledCommand	`ICommand`	이 명령은 선 그리기를 취소할 `DrawingView` 때마다 호출됩니다.
DrawingLineCompletedCommand	`ICommand`	이 명령은 선 그리기를 완료할 `DrawingView` 때마다 호출됩니다. . 탭 또는 클릭이 해제된 후에 발생합니다. 이 명령을 사용하도록 설정하면 `MultiLineMode` 이 명령이 여러 번 실행됩니다.
PointDrawnCommand	`ICommand`	이 명령은 점 그리기를 완료할 `DrawingView` 때마다 호출됩니다.
OnDrawingLineStarted	`EventHandler<DrawingLineStartedEventArgs>`	`DrawingView` 이벤트는 그리기 선을 시작할 때 발생합니다.
OnDrawingLineCancelled	`EventHandler<EventArgs>`	`DrawingView` 이벤트는 그리기 선을 취소할 때 발생합니다.
OnDrawingLineCompleted	`EventHandler<DrawingLineCompletedEventArgs>`	`DrawingView` 이벤트는 그리기 선을 완료할 때 발생합니다.
OnPointDrawn	`EventHandler<PointDrawnEventArgs>`	`DrawingView` 이벤트는 점이 그려질 때 발생합니다.
LineColor	`Color`	에 선을 `DrawingView`그리는 데 기본적으로 사용되는 색입니다.
LineWidth	`float`	에 선을 `DrawingView`그리는 데 기본적으로 사용되는 너비입니다.

DrawingLine

점 DrawingLine 목록을 포함하고 각 선 스타일을 개별적으로 구성할 수 있습니다.

속성

속성	Type	설명	기본값
LineColor	`Color`	에 선을 `DrawingView`그리는 데 사용되는 색입니다.	`Colors.Black`
LineWidth	`float`	에 선을 `DrawingView`그리는 데 사용되는 너비입니다.	`5`
지점	`ObservableCollection<PointF>`	해당 컬렉션을 `PointF` 사용하여 줄을 만듭니다.	`new()`
세분성	`int`	이 줄의 세분성입니다. 최소값은 5입니다. 값이 높을수록 선이 부드러워질수록 프로그램 속도가 느려집니다.	`5`
ShouldSmoothPathWhenDrawn	`bool`	이 줄을 그릴 때 이 선이 매끄럽게(앤티앨리어스)되는 경우 사용하거나 사용하지 않도록 설정합니다.	`false`

사용자 지정 IDrawingLine

기본값 DrawingLine 을 사용자 지정 구현으로 바꾸는 2단계가 있습니다.

다음을 구현하는 사용자 지정 클래스를 만듭니다.IDrawingLine

public class MyDrawingLine : IDrawingLine
{
    public ObservableCollection<PointF> Points { get; } = new();
    ...
}

를 구현하는 사용자 지정 클래스를 만듭니다.IDrawingLineAdapter

public class MyDrawingLineAdapter : IDrawingLineAdapter
{
    public IDrawingLine(MauiDrawingLine mauiDrawingLine)
    {
        return new MyDrawingLine
        {
            Points = mauiDrawingLine.Points,
            ...
        }
    }
}

에서 IDrawingViewHandler사용자 지정 IDrawingLineAdapter 설정:

var myDrawingLineAdapter = new MyDrawingLineAdapter();
drawingViewHandler.SetDrawingLineAdapter(myDrawingLineAdapter);

DrawingLineStartedEventArgs

마지막 그리기 지점을 포함하는 이벤트 인수입니다.

속성

속성	Type	설명
Point	`PointF`	마지막 그리기 지점입니다.

DrawingLineCompletedEventArgs

마지막 그리기 선을 포함하는 이벤트 인수입니다.

속성

속성	Type	설명
LastDrawingLine	`IDrawingLine`	마지막 그리기 선입니다.

PointDrawnEventArgs

마지막 그리기 지점을 포함하는 이벤트 인수입니다.

속성

속성	Type	설명
Point	`PointF`	마지막 그리기 지점입니다.

메서드

메서드	설명
GetImageStream	`Stream` 에 현재 그려지는 `DrawingView`이미지를 포함하는 검색 `Lines` 합니다.
GetImageStream(정적)	매개 변수로 `Stream` 제공되는 컬렉션의 `IDrawingLine` 이미지를 포함하는 검색합니다.

예제

.NET MAUI 커뮤니티 도구 키트 샘플 애플리케이션에서 작동 중인 이 기능의 예를 찾을 수 있습니다.

API

.NET MAUI 커뮤니티 도구 키트 GitHub 리포지토리에서 오버에 대한 DrawingView 소스 코드를 찾을 수 있습니다.

다음을 통해 공유

DrawingView

기본 사용법

XAML

XAML 네임스페이스 포함

DrawingView 사용

C#

여러 줄 사용

XAML

C#

드로잉 라인 완료 시 이벤트 처리

XAML

C#

ScrollView 내에서 사용

고급 사용

XAML

C#

속성

DrawingLine

속성

사용자 지정 IDrawingLine

DrawingLineStartedEventArgs

속성

DrawingLineCompletedEventArgs

속성

PointDrawnEventArgs

속성

메서드

예제

API

추가 리소스