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

На следующем снимка экрана показан полученный Объект DrawingView в Android:

Использование нескольких линий

По умолчанию DrawingView поддерживается только 1 строка. Для включения MultiLine значения IsMultiLineModeEnabled true. Убедитесь, что ShouldClearOnFinish значение false.

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,
};

На следующем снимка экрана показан полученный Объект DrawingView в Android:

Обработка события при завершении строки рисования

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

При использовании DrawingView внутри сенсорного ScrollView взаимодействия с ScrollView ним иногда можно перехватывать в iOS. Это можно предотвратить, установив ShouldDelayContentTouches для свойства значение false в iOS, как показано в следующем примере:

Эта проблема решена путем добавления ios:ScrollView.ShouldDelayContentTouches="false" в ScrollView, содержащего DrawingView:

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

Свойства

Рисование линии

Содержит DrawingLine список точек и позволяет настраивать стиль каждой строки по отдельности.

Свойства

Пользовательский интерфейс IDrawingLine

Существует 2 шага для замены по умолчанию пользовательской реализацией DrawingLine :

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. Настройка настраиваемого IDrawingLineAdapter в IDrawingViewHandler:

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

DrawingLineStartedEventArgs

Аргумент события, содержащий последнюю точку рисования.

Свойства

DrawingLineCompletedEventArgs

Аргумент события, содержащий последнюю строку рисования.

Свойства

PointDrawnEventArgs

Аргумент события, содержащий последнюю точку рисования.

Свойства

Методы

Примеры

Пример этой функции можно найти в действии в сообществе .NET MAUI набор средств пример приложения.

API

Исходный код DrawingView можно найти в репозитории сообщества .NET MAUI набор средств GitHub.