Sdílet prostřednictvím

DrawingView

  • Článek

Poskytuje DrawingView povrch, který umožňuje kreslení čar pomocí dotykové interakce nebo interakce myší. Výsledek výkresu uživatelů lze uložit jako obrázek. Běžným případem použití je zadání pole podpisu v aplikaci.

Základní použití

DrawingView umožňuje nastavit barvu čáry, šířku čáry a vazbu na kolekci čar.

XAML

Zahrnutí oboru názvů XAML

Pokud chcete použít sadu nástrojů v XAML, musíte do stránky nebo zobrazení přidat následující xmlns položky:

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

Proto platí následující:

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

Bylo by změněno tak, aby zahrnovalo xmlns následující:

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

Použití objektu 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
};

Následující snímek obrazovky ukazuje výsledný objekt DrawingView v Androidu:

Snímek obrazovky s objektem DrawingView v Androidu

Víceřádkové využití

Ve výchozím nastavení DrawingView podporuje pouze 1 řádek. Chcete-li povolit MultiLine hodnotu IsMultiLineModeEnabled true. Ujistěte se, že ShouldClearOnFinish je 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,
};

Následující snímek obrazovky ukazuje výsledný objekt DrawingView v Androidu:

Snímek obrazovky s objektem DrawingView s více řádky v Androidu

Zpracování události při dokončení čáry kreslení

DrawingView umožňuje přihlásit se k odběru událostí, jako OnDrawingLineCompletedje . K dispozici je také odpovídající příkaz DrawingLineCompletedCommand .

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

Použití v zobrazení ScrollView

Při použití DrawingView vnitřní ScrollView interakce s dotykovým ovládáním se může někdy zachytit v iOSu ScrollView . To může být znemožněno nastavením ShouldDelayContentTouches vlastnosti na false iOS podle následujícího příkladu:

Tento problém jsem vyřešil přidáním ios:ScrollView.ShouldDelayContentTouches="false" do ScrollView, který obsahuje DrawingView:

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

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

        <DrawingView />

    </ScrollView>

</ContentPage>

Další informace najdete v části Touchs obsahu ScrollView.

Pokročilé využití

K získání úplných výhod DrawingView poskytuje metody pro získání datového proudu obrázku kreslicích čar.

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

Vlastnosti

Vlastnost Type Popis
Řádky ObservableCollection<IDrawingLine> IDrawingLine Kolekce, které jsou aktuálně naDrawingView
IsMultiLineModeEnabled bool Přepíná režim s více řádky. Pokud je hodnota true, lze nakreslit více čar v DrawingView době, kdy je klepnutí nebo kliknutí uvolněno mezi čarami. Poznámka: Pokud ClearOnFinish je tato možnost povolená, řádky se po uvolnění klepnutí nebo kliknutí vymažou. Kromě toho DrawingLineCompletedCommand se aktivuje za každou čárou, která je nakreslena.
ShouldClearOnFinish bool Určuje, jestli DrawingView se po uvolnění klepnutí nebo kliknutí vymaže a nakreslená čára. Poznámka: Pokud IsMultiLineModeEnabled je tato možnost povolená, může to způsobit neočekávané chování.
DrawingLineStartedCommand ICommand Tento příkaz se vyvolá při každém spuštění výkresu DrawingView čáry.
DrawingLineCancelledCommand ICommand Tento příkaz se vyvolá při každém zrušení výkresu DrawingView čáry.
DrawingLineCompletedCommand ICommand Tento příkaz se vyvolá při každém dokončení výkresu DrawingView čáry. . Všimněte si, že se aktivuje po klepnutí nebo kliknutí. Pokud MultiLineMode je tento příkaz povolený vícekrát.
PointDrawnCommand ICommand Tento příkaz se vyvolá při každém dokončení výkresu bodu na konci DrawingView .
OnDrawingLineStarted EventHandler<DrawingLineStartedEventArgs> DrawingView nastane při spuštění čáry výkresu.
OnDrawingLineCancelled EventHandler<EventArgs> DrawingView událost nastane při zrušení čáry výkresu.
OnDrawingLineCompleted EventHandler<DrawingLineCompletedEventArgs> DrawingView k události dochází při dokončení čáry výkresu.
OnPointDrawn EventHandler<PointDrawnEventArgs> DrawingView nastane při vykreslení bodu.
Linecolor Color Barva, která se ve výchozím nastavení používá k nakreslení čáry na DrawingView.
LineWidth float Šířka, která se ve výchozím nastavení používá k nakreslení čáry na DrawingView.

DrawingLine

Obsahuje DrawingLine seznam bodů a umožňuje konfigurovat každý styl čáry jednotlivě.

Vlastnosti

Vlastnost Type Popis Default value
Linecolor Color Barva, která se používá k kreslení čáry na DrawingView. Colors.Black
LineWidth float Šířka, která se používá k vykreslení čáry na DrawingView. 5
Points ObservableCollection<PointF> Kolekce PointF , ze které je čára. new()
Členitost int Členitost tohoto řádku. Minimální hodnota je 5. Čím vyšší je hodnota, tím plynulejší čára, tím pomalejší program. 5
ShouldSmoothPathWhenDrawn bool Povolí nebo zakáže, pokud je tato čára při vykreslení vyhlazená (anti-aliased). false

Vlastní IDrawingLine

Výchozí nastavení vlastní implementace nahradíte DrawingLine 2 kroky:

  1. Vytvořte vlastní třídu, která implementuje IDrawingLine: 
    public class MyDrawingLine : IDrawingLine
{
    public ObservableCollection<PointF> Points { get; } = new();
    ...
}
  2. Vytvořte vlastní třídu, která implementuje IDrawingLineAdapter. 
    public class MyDrawingLineAdapter : IDrawingLineAdapter
{
    public IDrawingLine(MauiDrawingLine mauiDrawingLine)
    {
        return new MyDrawingLine
        {
            Points = mauiDrawingLine.Points,
            ...
        }
    }
}
  3. Nastavit vlastní IDrawingLineAdapter v IDrawingViewHandler: 
    var myDrawingLineAdapter = new MyDrawingLineAdapter();
drawingViewHandler.SetDrawingLineAdapter(myDrawingLineAdapter);

DrawingLineStartedEventArgs

Argument události, který obsahuje poslední bod výkresu.

Vlastnosti

Vlastnost Type Popis
Bod PointF Poslední bod výkresu.

DrawingLineCompletedEventArgs

Argument události, který obsahuje poslední nakreslenou čáru

Vlastnosti

Vlastnost Type Popis
LastDrawingLine IDrawingLine Poslední čára výkresu.

PointDrawnEventArgs

Argument události, který obsahuje poslední bod výkresu.

Vlastnosti

Vlastnost Type Popis
Bod PointF Poslední bod výkresu.

Metody

metoda Popis
GetImageStream Načte Stream obrázek, Lines který je aktuálně nakreslen na obrázku DrawingView.
GetImageStream (statický) Stream Načte obrázek obsahující kolekciIDrawingLine, která je k dispozici jako parametr.

Příklady

Příklad této funkce najdete v ukázkové aplikaci .NET MAUI Community Toolkit.

rozhraní API

Zdrojový kód DrawingView najdete v úložišti .NET MAUI Community Toolkit na GitHubu.