Compartir a través de


DrawingView

DrawingView proporciona una superficie que permite dibujar líneas mediante el uso de interacción táctil o del mouse. El resultado del dibujo de un usuario se puede guardar como una imagen. Un caso de uso común para esto es proporcionar un cuadro de firma en una aplicación.

Uso básico

DrawingView permite establecer el color de línea y el ancho de línea, y enlazar con la colección de líneas.

XAML

Incluir el espacio de nombres XAML

Para usar el kit de herramientas en XAML, es necesario agregar el siguiente xmlns a la página o vista:

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

Por lo tanto, el siguiente:

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

Se modificaría para incluir el xmlns de la siguiente manera:

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

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

En la captura de pantalla siguiente se muestra el resultado de DrawingView en Android:

Captura de pantalla de DrawingView en Android

Uso multilínea

De forma predeterminada, DrawingView admite solo 1 línea. Para habilitar MultiLine, establezca IsMultiLineModeEnabled en true (verdadero). Asegúrese de que ShouldClearOnFinish sea false (falso).

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

En la captura de pantalla siguiente se muestra el resultado de DrawingView en Android:

Captura de pantalla de DrawingView con varias líneas en Android

Controlar un evento cuando se ha completado la línea de dibujo

DrawingView permite suscribirse a los eventos como OnDrawingLineCompleted. El comando correspondiente DrawingLineCompletedCommand también está disponible.

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

Uso en una ScrollView

Al usar DrawingView en una ScrollView, la interacción táctil con ScrollView se intercepta a veces en iOS. Esto se puede evitar estableciendo la propiedad ShouldDelayContentTouches en false en iOS según el ejemplo siguiente:

Resolví este problema agregando ios:ScrollView.ShouldDelayContentTouches="false" a la ScrollView que contiene DrawingView:

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

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

        <DrawingView />

    </ScrollView>

</ContentPage>

Para obtener más información, consulte Toques de contenido ScrollView en iOS.

Uso avanzado

Para obtener las ventajas completas, DrawingView proporciona los métodos para obtener el flujo de imagen de las líneas de dibujo.

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

Propiedades

Propiedad Tipo Descripción
Líneas ObservableCollection<IDrawingLine> Colección de IDrawingLine que se encuentran actualmente en DrawingView
IsMultiLineModeEnabled bool Alterna el modo de varias líneas. Cuando es true (verdadero), se pueden dibujar varias líneas en DrawingView, mientras que la pulsación o el clic se libera entre las líneas. Nota: cuando ClearOnFinish también está habilitado, las líneas se borran después de que se libere la pulsación o el clic. Además, DrawingLineCompletedCommand se activará después de cada línea que se dibuja.
ShouldClearOnFinish bool Indica si DrawingView se borra después de liberar la pulsación o el clic y se dibuja una línea. Nota: cuando IsMultiLineModeEnabled también está habilitado, puede producirse un comportamiento inesperado.
DrawingLineStartedCommand ICommand Este comando se invoca cada vez que se inicia el dibujo de una línea en DrawingView.
DrawingLineCancelledCommand ICommand Este comando se invoca cada vez que se ha cancelado el dibujo de una línea en DrawingView.
DrawingLineCompletedCommand ICommand Este comando se invoca cada vez que se ha completado el dibujo de una línea en DrawingView. . Tenga en cuenta que esto se activa después tras liberar la pulsación o el clic. Cuando MultiLineMode está habilitado, este comando se activa varias veces.
PointDrawnCommand ICommand Este comando se invoca cada vez que se ha completado el dibujo de un punto en DrawingView.
OnDrawingLineStarted EventHandler<DrawingLineStartedEventArgs> El evento DrawingView se produce cuando se inicia la línea de dibujo.
OnDrawingLineCancelled EventHandler<EventArgs> El evento DrawingView se produce cuando se cancela la línea de dibujo.
OnDrawingLineCompleted EventHandler<DrawingLineCompletedEventArgs> El evento DrawingView se produce cuando se completa la línea de dibujo.
OnPointDrawn EventHandler<PointDrawnEventArgs> El evento DrawingView se produce cuando se dibuja el punto.
LineColor Color Color que se usa de forma predeterminada para dibujar una línea en DrawingView.
LineWidth float Ancho que se usa de forma predeterminada para dibujar una línea en DrawingView.

DrawingLine

DrawingLine contiene la lista de puntos y permite configurar individualmente cada estilo de línea.

Propiedades

Propiedad Tipo Descripción Default value
LineColor Color Color que se usa para dibujar la línea en DrawingView. Colors.Black
LineWidth float Ancho que se usa para dibujar la línea en DrawingView. 5
Puntos ObservableCollection<PointF> Colección de PointF que realiza la línea. new()
Granularidad int La granularidad de esta línea. El valor mínimo es 5. Cuanto mayor sea el valor, más suave será la línea y más lento el programa. 5
ShouldSmoothPathWhenDrawn bool Habilita o deshabilita si esta línea se suaviza cuando se dibuja. false

IDrawingLine personalizado

Hay dos pasos para reemplazar una instancia de DrawingLine predeterminada por la implementación personalizada:

  1. Cree una clase personalizada que implemente IDrawingLine:
    public class MyDrawingLine : IDrawingLine
    {
        public ObservableCollection<PointF> Points { get; } = new();
        ...
    }
    
  2. Cree una clase personalizada que implemente IDrawingLineAdapter.
    public class MyDrawingLineAdapter : IDrawingLineAdapter
    {
        public IDrawingLine(MauiDrawingLine mauiDrawingLine)
        {
            return new MyDrawingLine
            {
                Points = mauiDrawingLine.Points,
                ...
            }
        }
    }
    
  3. Establezca IDrawingLineAdapter personalizado en IDrawingViewHandler:
    var myDrawingLineAdapter = new MyDrawingLineAdapter();
    drawingViewHandler.SetDrawingLineAdapter(myDrawingLineAdapter);
    

DrawingLineStartedEventArgs

Argumento de evento que contiene el último punto de dibujo.

Propiedades

Propiedad Tipo Descripción
Punto PointF Último punto de dibujo.

DrawingLineCompletedEventArgs

Argumento de evento que contiene la última línea de dibujo.

Propiedades

Propiedad Tipo Descripción
LastDrawingLine IDrawingLine Última línea de dibujo.

PointDrawnEventArgs

Argumento de evento que contiene el último punto de dibujo.

Propiedades

Propiedad Tipo Descripción
Punto PointF Último punto de dibujo.

Métodos

método Descripción
GetImageStream Recupera un elemento Stream que contiene una imagen de Lines que se dibuja actualmente en DrawingView.
GetImageStream (static) Recupera un elemento Stream que contiene una imagen de la colección de IDrawingLine que se proporciona como parámetro.

Ejemplos

Puede encontrar un ejemplo de esta característica en acción en la Aplicación de muestra del kit de herramientas de la comunidad de .NET MAUI.

API

Puede encontrar el código fuente de DrawingView en el repositorio de GitHub del Kit de herramientas de la comunidad de .NET MAUI.