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:
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:
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:
- Cree una clase personalizada que implemente
IDrawingLine
:public class MyDrawingLine : IDrawingLine { public ObservableCollection<PointF> Points { get; } = new(); ... }
- Cree una clase personalizada que implemente
IDrawingLineAdapter
.public class MyDrawingLineAdapter : IDrawingLineAdapter { public IDrawingLine(MauiDrawingLine mauiDrawingLine) { return new MyDrawingLine { Points = mauiDrawingLine.Points, ... } } }
- Establezca
IDrawingLineAdapter
personalizado enIDrawingViewHandler
: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.
.NET MAUI Community Toolkit