DrawingView

Het DrawingView biedt een oppervlak waarmee u lijnen kunt tekenen door middel van aanraak- of muisinteractie. Het resultaat van een gebruikerstekening kan worden opgeslagen als afbeelding. Een veelvoorkomend gebruiksvoorbeeld hiervoor is het opgeven van een handtekeningvak in een toepassing.

Basaal gebruik

DrawingView hiermee kunt u lijnkleur, lijnbreedte en binding instellen op de verzameling lijnen.

XAML

Inclusief de XAML-naamruimte

Als u de toolkit in XAML wilt gebruiken, moet de volgende xmlns worden toegevoegd aan uw pagina of weergave:

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

Daarom volgt het volgende:

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

Zou als volgt worden gewijzigd om de xmlns op te nemen:

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

De DrawingView gebruiken

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

In de volgende schermopname ziet u de resulterende DrawingView op Android:

MultiLine-gebruik

Standaard ondersteunt DrawingView slechts 1 regel. Als u MultiLine wilt inschakelen, stelt u IsMultiLineModeEnabled in op true. Zorg ervoor dat ShouldClearOnFinish onwaar is.

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

In de volgende schermopname ziet u de resulterende DrawingView op Android:

Het resultaat opslaan in een afbeelding

De .NET MAUI Community Toolkit biedt verschillende opties voor het opslaan van de resulterende tekening naar een afbeelding. Deze opties zijn als volgt:

Opslaan vanuit de DrawingView

De DrawingView biedt de methode GetImageStream, waarmee een afbeelding wordt gegenereerd en de inhoud in een Stream wordt teruggegeven.

In het volgende voorbeeld wordt de tekening geëxporteerd naar een afbeelding met een gewenste breedte van 400 en een gewenste hoogte van 300. De gewenste afmetingen worden aangepast om ervoor te zorgen dat de hoogte-breedteverhouding van de tekening behouden blijft.

await drawingView.GetImageStream(desiredWidth: 400, desiredHeight: 300);

In het volgende voorbeeld ziet u hoe u een afbeelding genereert die rechtstreeks overeenkomt met het Tekenweergave-oppervlak dat wordt weergegeven in een toepassing:

await drawingView.GetImageStream(desiredWidth: 400, desiredHeight: 300, imageOutputOption: DrawingViewOutputOption.FullCanvas);

Opslaan vanuit de DrawingViewService

Door de DrawingView methoden te gebruiken, kan het lastig zijn om een toepassing te bouwen met behulp van het MVVM-patroon, om hiermee om te gaan, biedt de .NET MAUI Community Toolkit ook de klasse DrawingViewService waarmee ook de mogelijkheid wordt geboden om een afbeeldingsstroom te genereren.

ImageLineOptions.JustLines

In het volgende voorbeeld ziet u hoe u een afbeeldingsstroom genereert van een gewenste breedte van 1920 en hoogte van 1080 en een blauwe achtergrond. Ontwikkelaars kunnen de ImageLineOptions.JustLines methode gebruiken om geschikte opties te bieden om alleen de getekende lijnen te exporteren. Zie als u het hele canvas wilt exporteren ImageLineOptions.FullCanvas

await using var stream = await DrawingViewService.GetImageStream(
    ImageLineOptions.JustLines(Lines, new Size(1920, 1080), Brush.Blue));

ImageLineOptions.FullCanvas

Als u een afbeelding wilt genereren die rechtstreeks overeenkomt met het DrawingView-oppervlak, kan de ImageLineOptions.FullCanvas methode als volgt worden gebruikt.

await using var stream = await DrawingViewService.GetImageStream(
    ImageLineOptions.FullCanvas(Lines, new Size(1920, 1080), Brush.Blue, new Size(CanvasWidth, CanvasHeight)));

Voor dit voorbeeld zijn de eigenschappen CanvasWidth en CanvasHeight respectievelijk gekoppeld aan de eigenschappen Width en Height van de DrawingView. Raadpleeg de .NET MAUI Community Toolkit Sample Application voor de volledige oplossing.

Gebeurtenis afhandelen wanneer het tekenen van een lijn is voltooid

DrawingView staat toe om u te abonneren op de gebeurtenissen zoals OnDrawingLineCompleted. De bijbehorende opdracht DrawingLineCompletedCommand is ook beschikbaar.

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

Gebruiken in een ScrollView

Bij gebruik van de DrawingView in een ScrollView kan de aanraakinteractie met de ScrollView op iOS soms worden onderschept. Dit kan worden voorkomen door de ShouldDelayContentTouches eigenschap false in te stellen op iOS volgens het volgende voorbeeld:

Ik heb dit probleem opgelost door de ios:ScrollView.ShouldDelayContentTouches="false" toe te voegen aan de ScrollView die de DrawingView bevat:

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

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

        <DrawingView />

    </ScrollView>

</ContentPage>

Raadpleeg ScrollView content touches voor meer informatie.

Geavanceerd gebruik

Om optimaal te profiteren, biedt de DrawingView methoden om de beeldstream van de getekende lijnen te verkrijgen.

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

Eigenschappen

Tekenlijn

De DrawingLine lijst bevat de lijst met punten en maakt het mogelijk om elke lijnstijl afzonderlijk te configureren.

Eigenschappen

Aangepaste IDrawingLine

Er zijn twee stappen om de standaardwaarde DrawingLine te vervangen door de aangepaste implementatie:

1. Aangepaste klasse maken die implementeert IDrawingLine:

   public class MyDrawingLine : IDrawingLine
   {
       public ObservableCollection<PointF> Points { get; } = new();
       ...
   }
   

2. Maak een aangepaste klasse die IDrawingLineAdapter implementeert.

   public class MyDrawingLineAdapter : IDrawingLineAdapter
   {
       public IDrawingLine(MauiDrawingLine mauiDrawingLine)
       {
           return new MyDrawingLine
           {
               Points = mauiDrawingLine.Points,
               ...
           }
       }
   }
   

3. Stel IDrawingLineAdapter aangepast in IDrawingViewHandler:

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

DrawingLineStartedEventArgs

Gebeurtenisargument dat het laatste tekenpunt bevat.

Eigenschappen

DrawingLineCompletedEventArgs

Gebeurtenisargument dat de laatste tekenlijn bevat.

Eigenschappen

PointDrawnEventArgs

Eventargument dat het laatst getekende punt bevat.

Eigenschappen

Methods

Examples

Je kunt een voorbeeld van hoe deze functie werkt vinden in de .NET MAUI Community Toolkit Sample Application.

API

U vindt de broncode voor DrawingView in de .NET MAUI Community Toolkit GitHub opslagplaats.