Ritningsvy

DrawingView ger en yta som gör det möjligt att rita linjer med hjälp av beröring eller musinteraktion. Resultatet av en användares ritning kan sparas som bild. Ett vanligt användningsfall för detta är att ange en signaturruta i ett program.

Grundläggande användning

DrawingView tillåter att ange linjefärg, linjebredd och bindning till samlingen med linjer.

XAML

Inklusive XAML-namnområdet

För att kunna använda verktygslådan i XAML måste följande xmlns läggas till på sidan eller vyn:

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

Därför följande:

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

Skulle ändras för att inkludera xmlns på följande sätt:

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

Använda 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
};

Följande skärmbild visar den resulterande DrawingView på Android:

Användning av MultiLine

Som standard DrawingView stöder endast 1 rad. För att aktivera MultiLine, ställ in IsMultiLineModeEnabled på true. Se till att ShouldClearOnFinish är falskt.

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

Följande skärmbild visar den resulterande DrawingView på Android:

Spara resultatet till en bild

Den .NET MAUI Community Toolkit erbjuder flera alternativ för att spara den resulterande ritningen till en bild. Dessa alternativ är följande:

Spara från DrawingView

Tillhandahåller DrawingView metoden GetImageStream som genererar en avbildning och returnerar innehållet i en Stream.

I följande exempel exporteras ritningen till en bild med önskad bredd på 400 och en önskad höjd på 300. De önskade dimensionerna justeras för att se till att proportionerna för ritningen behålls.

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

I följande exempel visas hur du genererar en bild som direkt matchar DrawingView-ytan som visas i ett program:

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

Spara från DrawingViewService

Med hjälp av metoderna DrawingView kan det göra det svårt att skapa ett program med MVVM-mönstret för att hantera detta .NET MAUI Community Toolkit tillhandahåller även klassen DrawingViewService som också gör det möjligt att generera en bildström.

ImageLineOptions.JustLines

I följande exempel visas hur du genererar en bildström med önskad bredd på 1920 och höjden 1080 och en blå bakgrund. Utvecklare kan använda ImageLineOptions.JustLines metoden för att tillhandahålla lämpliga alternativ för att endast exportera de ritade linjerna. Information om hur du exporterar hela arbetsytan finns i ImageLineOptions.FullCanvas

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

ImageLineOptions.FullCanvas

För att generera en bild som direkt matchar DrawingView-ytan ImageLineOptions.FullCanvas kan metoden användas på följande sätt.

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

I det här exemplet har egenskaperna CanvasWidth och CanvasHeight databundits till egenskaperna Width och Height för DrawingView, respektive. Den fullständiga lösningen finns i exempelprogrammet .NET MAUI Community Toolkit.

Hantera händelse när ritningslinjen har slutförts

DrawingView gör det möjligt att prenumerera på händelser som OnDrawingLineCompleted. Motsvarande kommando DrawingLineCompletedCommand är också tillgängligt.

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

Använda i en rullningsvy

När du använder DrawingView inuti en ScrollView kan touchinteraktionen med ScrollView ibland fångas upp på iOS. Detta kan undvikas genom att på iOS ställa in egenskapen ShouldDelayContentTouches till false enligt följande exempel:

Jag löste det här problemet genom att lägga till ios:ScrollView.ShouldDelayContentTouches="false" i ScrollView som innehåller DrawingView:

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

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

        <DrawingView />

    </ScrollView>

</ContentPage>

Mer information finns i ScrollView-innehållsdetaljer.

Avancerad användning

För att få full nytta tillhandahåller DrawingView metoder för att hämta bildströmmen för de ritade linjerna.

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

Egenskaper

Ritlinje

DrawingLine innehåller listan med punkter och gör det möjligt att konfigurera varje linjestil individuellt.

Egenskaper

Anpassad IDrawingLine

Det finns två steg för att ersätta standardvärdet DrawingLine med den anpassade implementeringen:

1. Skapa anpassad klass som implementerar IDrawingLine:

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

2. Skapa en anpassad klass som implementerar IDrawingLineAdapter.

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

3. Ange anpassad IDrawingLineAdapter i IDrawingViewHandler:

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

DrawingLineStartedEventArgs

Händelseargument som innehåller senaste ritpunkt.

Egenskaper

DrawingLineCompletedEventArgs

Händelseargument som innehåller den sista ritningslinjen.

Egenskaper

PointDrawnEventArgs

Händelseargument som innehåller den sista ritpunkten.

Egenskaper

Methods

Exempel

Du hittar ett exempel på den här funktionen i praktiken i .NET MAUI Community Toolkit Sample Application.

API

Källkoden för DrawingView finns på lagringsplatsen .NET MAUI Community Toolkit GitHub.