Share via

DrawingView

  • 아티클

터치 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단계가 있습니다.

  1. 다음을 구현하는 사용자 지정 클래스를 만듭니다.IDrawingLine
    public class MyDrawingLine : IDrawingLine
{
    public ObservableCollection<PointF> Points { get; } = new();
    ...
}
  2. 를 구현하는 사용자 지정 클래스를 만듭니다.IDrawingLineAdapter 
    public class MyDrawingLineAdapter : IDrawingLineAdapter
{
    public IDrawingLine(MauiDrawingLine mauiDrawingLine)
    {
        return new MyDrawingLine
        {
            Points = mauiDrawingLine.Points,
            ...
        }
    }
}
  3. 에서 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 소스 코드를 찾을 수 있습니다.