Condividi tramite

DrawingView

  • Articolo

Fornisce DrawingView una superficie che consente il disegno di linee attraverso l'uso dell'interazione tramite tocco o mouse. Il risultato di un disegno degli utenti può essere salvato come immagine. Un caso d'uso comune consiste nel fornire una casella di firma in un'applicazione.

Utilizzo di base

DrawingView consente di impostare il colore della linea, la larghezza della linea e l'associazione alla raccolta di linee.

XAML

Inclusione dello spazio dei nomi XAML

Per usare il toolkit in XAML, è necessario aggiungere le informazioni seguenti xmlns nella pagina o nella visualizzazione:

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

Di conseguenza:

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

Verrà modificato in modo da includere l'oggetto xmlns come indicato di seguito:

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

Lo screenshot seguente mostra l'oggetto DrawingView risultante in Android:

Screenshot di un oggetto DrawingView in Android

Utilizzo multilinea

Per impostazione predefinita DrawingView , supporta solo 1 riga. Per abilitare MultiLine l'impostazione su IsMultiLineModeEnabled true. Assicurarsi che ShouldClearOnFinish sia 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,
};

Lo screenshot seguente mostra l'oggetto DrawingView risultante in Android:

Screenshot di un oggetto DrawingView con più righe in Android

Handle event when Drawing Line Completed

DrawingView consente di sottoscrivere gli eventi come OnDrawingLineCompleted. È disponibile anche il comando DrawingLineCompletedCommand corrispondente.

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

Usare all'interno di un controllo ScrollView

Quando si usa l'oggetto DrawingView all'interno di un'interazione ScrollView tramite tocco con a ScrollView volte può essere intercettato in iOS. Ciò può essere impedito impostando la ShouldDelayContentTouches proprietà su false in iOS in base all'esempio seguente:

Ho risolto questo problema aggiungendo ios:ScrollView.ShouldDelayContentTouches="false" a ScrollView che contiene DrawingView:

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

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

        <DrawingView />

    </ScrollView>

</ContentPage>

Per altre informazioni, vedere i touch del contenuto scrollView.

Uso avanzato

Per ottenere i vantaggi completi, fornisce DrawingView i metodi per ottenere il flusso di immagini delle linee di disegno.

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

Proprietà

Proprietà Type Descrizione
Righe ObservableCollection<IDrawingLine> Raccolta di IDrawingLine che sono attualmente presenti nell'oggetto DrawingView
IsMultiLineModeEnabled bool Attiva/disattiva la modalità a più righe. Se true, è possibile disegnare più linee su DrawingView mentre il tocco/clic viene rilasciato tra le linee. Nota: quando ClearOnFinish è abilitato anche, le righe vengono cancellate dopo il rilascio del tocco o del clic. Inoltre, DrawingLineCompletedCommand verrà attivato dopo ogni linea disegnata.
ShouldClearOnFinish bool Indica se l'oggetto DrawingView viene cancellato dopo il rilascio del tocco/clic e viene disegnata una linea. Nota: quando IsMultiLineModeEnabled è abilitato anche, questo potrebbe causare un comportamento imprevisto.
DrawingLineStartedCommand ICommand Questo comando viene richiamato ogni volta che il disegno di una riga in DrawingView è stato avviato.
DrawingLineCancelledCommand ICommand Questo comando viene richiamato ogni volta che il disegno di una riga in DrawingView è stato annullato.
DrawingLineCompletedCommand ICommand Questo comando viene richiamato ogni volta che il disegno di una riga in DrawingView è stato completato. . Si noti che questo viene attivato dopo che il tocco o il clic è stato sollevato. Quando MultiLineMode è abilitato, questo comando viene attivato più volte.
PointDrawnCommand ICommand Questo comando viene richiamato ogni volta che il disegno di un punto su DrawingView è stato completato.
OnDrawingLineStarted EventHandler<DrawingLineStartedEventArgs> DrawingView l'evento si verifica all'avvio della linea di disegno.
OnDrawingLineCancelled EventHandler<EventArgs> DrawingView si verifica quando la linea di disegno viene annullata.
OnDrawingLineCompleted EventHandler<DrawingLineCompletedEventArgs> DrawingView si verifica quando la linea di disegno è stata completata.
OnPointDrawn EventHandler<PointDrawnEventArgs> DrawingView si verifica quando viene disegnato il punto.
LineColor Color Colore utilizzato per impostazione predefinita per disegnare una linea sull'oggetto DrawingView.
LineWidth float Larghezza utilizzata per impostazione predefinita per disegnare una linea sull'oggetto DrawingView.

DrawingLine

DrawingLine Contiene l'elenco di punti e consente di configurare singolarmente ogni stile di linea.

Proprietà

Proprietà Type Descrizione Default value
LineColor Color Colore utilizzato per disegnare la linea sull'oggetto DrawingView. Colors.Black
LineWidth float Larghezza utilizzata per disegnare la linea sull'oggetto DrawingView. 5
Punti ObservableCollection<PointF> Raccolta di PointF che rende la linea. new()
Granularità int Granularità di questa riga. Il valore minimo è 5. Maggiore è il valore, la linea più liscia, più lenta è il programma. 5
ShouldSmoothPathWhenDrawn bool Abilita o disabilita se questa linea è smussata (anti-aliasing) quando viene disegnata. false

IDrawingLine personalizzato

Esistono due passaggi per sostituire l'impostazione predefinita con l'implementazione personalizzata DrawingLine :

  1. Creare una classe personalizzata che implementa IDrawingLine: 
    public class MyDrawingLine : IDrawingLine
{
    public ObservableCollection<PointF> Points { get; } = new();
    ...
}
  2. Creare una classe personalizzata che implementa IDrawingLineAdapter. 
    public class MyDrawingLineAdapter : IDrawingLineAdapter
{
    public IDrawingLine(MauiDrawingLine mauiDrawingLine)
    {
        return new MyDrawingLine
        {
            Points = mauiDrawingLine.Points,
            ...
        }
    }
}
  3. Impostare personalizzato IDrawingLineAdapter in IDrawingViewHandler: 
    var myDrawingLineAdapter = new MyDrawingLineAdapter();
drawingViewHandler.SetDrawingLineAdapter(myDrawingLineAdapter);

DrawingLineStartedEventArgs

Argomento dell'evento che contiene l'ultimo punto di disegno.

Proprietà

Proprietà Type Descrizione
Point PointF Ultimo punto di disegno.

DrawingLineCompletedEventArgs

Argomento dell'evento che contiene l'ultima linea di disegno.

Proprietà

Proprietà Type Descrizione
LastDrawingLine IDrawingLine Ultima linea di disegno.

PointDrawnEventArgs

Argomento dell'evento che contiene l'ultimo punto di disegno.

Proprietà

Proprietà Type Descrizione
Point PointF Ultimo punto di disegno.

Metodi

metodo Descrizione
GetImageStream Recupera un oggetto Stream contenente un'immagine dell'oggetto Lines attualmente disegnato sull'oggetto DrawingView.
GetImageStream (statico) Recupera un oggetto Stream contenente un'immagine della raccolta di IDrawingLine specificata come parametro.

Esempi

È possibile trovare un esempio di questa funzionalità in azione nell'applicazione di esempio .NET MAUI Community Toolkit.

API

È possibile trovare il codice sorgente per DrawingView over nel repository GitHub di .NET MAUI Community Toolkit.