Udostępnij za pośrednictwem

Widok rysunku

  • Artykuł

Zapewnia DrawingView powierzchnię, która umożliwia rysowanie linii za pomocą interakcji dotykowej lub myszy. Wynik rysunku dla użytkowników można zapisać jako obraz. Typowym przypadkiem użycia jest podanie pola podpisu w aplikacji.

Podstawowy sposób użycia

DrawingView umożliwia ustawienie koloru linii, szerokości linii i powiązania z kolekcją linii.

XAML

Dołączanie przestrzeni nazw XAML

Aby można było używać zestawu narzędzi w języku XAML, należy dodać następujące xmlns elementy do strony lub widoku:

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

W związku z tym następujące elementy:

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

Zostanie zmodyfikowana tak, aby zawierała następujące xmlns elementy:

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

Korzystanie z obiektu 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
};

Poniższy zrzut ekranu przedstawia wynikowy element DrawingView w systemie Android:

Zrzut ekranu przedstawiający obiekt DrawingView w systemie Android

Użycie wielowierszowe

Domyślnie DrawingView obsługuje tylko 1 wiersz. Aby włączyć wartość MultiLineIsMultiLineModeEnabled true. Upewnij się, że ShouldClearOnFinish wartość 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,
};

Poniższy zrzut ekranu przedstawia wynikowy element DrawingView w systemie Android:

Zrzut ekranu przedstawiający obiekt DrawingView z wieloma wierszami w systemie Android

Obsługa zdarzenia po zakończeniu linii rysunku

DrawingView umożliwia subskrybowanie zdarzeń, takich jak OnDrawingLineCompleted. Odpowiednie polecenie DrawingLineCompletedCommand jest również dostępne.

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

Korzystanie z elementu ScrollView

W przypadku korzystania z DrawingView wewnątrz interakcji dotykowej ScrollView z elementem ScrollView może być czasami przechwytywane w systemie iOS. Można temu zapobiec, ustawiając ShouldDelayContentTouches właściwość na false w systemie iOS zgodnie z poniższym przykładem:

Rozwiązano ten problem, dodając element ios:ScrollView.ShouldDelayContentTouches="false" do widoku ScrollView, który zawiera element DrawingView:

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

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

        <DrawingView />

    </ScrollView>

</ContentPage>

Aby uzyskać więcej informacji, zobacz Touches zawartości ScrollView.

Użycie zaawansowane

Aby uzyskać pełne korzyści, DrawingView zapewnia metody pobierania strumienia obrazu linii rysunku.

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

Właściwości

Właściwości Type Opis
Wiersze ObservableCollection<IDrawingLine> Kolekcja elementów IDrawingLine , które znajdują się obecnie w DrawingView
IsMultiLineModeEnabled bool Przełącza tryb wielowierszowy. W przypadku wartości true można narysować wiele wierszy, DrawingView gdy naciśnięcie/kliknięcie jest zwalniane między wierszami. Uwaga: po ClearOnFinish włączeniu tej opcji wiersze zostaną wyczyszczone po zwolnieniu naciśnięcia/kliknięcia. DrawingLineCompletedCommand Ponadto zostanie wyzwolony po każdym rysowanym wierszu.
ShouldClearOnFinish bool Wskazuje, czy DrawingView pole jest czyszczone po zwolnieniu naciśnięcia/kliknięcia, a linia jest rysowana. Uwaga: jeśli IsMultiLineModeEnabled jest również włączona, może to spowodować nieoczekiwane zachowanie.
DrawingLineStartedCommand ICommand To polecenie jest wywoływane za każdym razem, gdy rysunek wiersza w obiekcie DrawingView został uruchomiony.
RysunekLineCancelledCommand ICommand To polecenie jest wywoływane za każdym razem, gdy rysunek wiersza w DrawingView obiekcie został anulowany.
DrawingLineCompletedCommand ICommand To polecenie jest wywoływane za każdym razem, gdy rysunek wiersza na DrawingView obiekcie został ukończony. . Należy pamiętać, że jest to wyzwalane po naciśnięciu lub kliknięciu zostanie zniesione. Po MultiLineMode włączeniu tego polecenia jest uruchamiane wiele razy.
PointDrawnCommand ICommand To polecenie jest wywoływane za każdym razem, gdy rysunek punktu na obiekcie DrawingView został ukończony.
OnDrawingLineStarted EventHandler<DrawingLineStartedEventArgs> DrawingView zdarzenie występuje podczas uruchamiania wiersza rysunku.
OnDrawingLineCancelled EventHandler<EventArgs> DrawingView zdarzenie występuje po anulowaniu wiersza rysunku.
OnDrawingLineCompleted EventHandler<DrawingLineCompletedEventArgs> DrawingView zdarzenie występuje po zakończeniu wiersza rysunku.
OnPointDrawn EventHandler<PointDrawnEventArgs> DrawingView zdarzenie występuje po narysowanym punkcie.
Linecolor Color Kolor używany domyślnie do rysowania linii na DrawingView.
LineWidth float Szerokość, która jest domyślnie używana do rysowania linii na DrawingView.

Linia rysunku

Element DrawingLine zawiera listę punktów i umożliwia indywidualne konfigurowanie każdego stylu wiersza.

Właściwości

Właściwości Type Opis Domyślna wartość
Linecolor Color Kolor używany do rysowania linii na DrawingView. Colors.Black
LineWidth float Szerokość, która jest używana do rysowania linii na DrawingView. 5
Punkty ObservableCollection<PointF> Kolekcja tej kolekcji PointF sprawia, że wiersz. new()
Poziom szczegółowości int Stopień szczegółowości tego wiersza. Minimalna wartość to 5. Im większa wartość, tym bardziej gładka linia, tym wolniej program. 5
ShouldSmoothPathWhenDrawn bool Włącza lub wyłącza, jeśli ten wiersz jest wygładzony (anty aliasowany) podczas rysowania. false

Niestandardowa linia IDrawingLine

Aby zastąpić wartość domyślną DrawingLine implementacją niestandardową, należy wykonać 2 kroki:

  1. Utwórz klasę niestandardową, która implementuje IDrawingLineelement : 
    public class MyDrawingLine : IDrawingLine
{
    public ObservableCollection<PointF> Points { get; } = new();
    ...
}
  2. Utwórz klasę niestandardową, która implementuje IDrawingLineAdapterelement . 
    public class MyDrawingLineAdapter : IDrawingLineAdapter
{
    public IDrawingLine(MauiDrawingLine mauiDrawingLine)
    {
        return new MyDrawingLine
        {
            Points = mauiDrawingLine.Points,
            ...
        }
    }
}
  3. Ustaw wartość niestandardową IDrawingLineAdapter w pliku IDrawingViewHandler: 
    var myDrawingLineAdapter = new MyDrawingLineAdapter();
drawingViewHandler.SetDrawingLineAdapter(myDrawingLineAdapter);

DrawingLineStartedEventArgs

Argument zdarzenia, który zawiera ostatni punkt rysunku.

Właściwości

Właściwości Type Opis
Osoba PointF Ostatni punkt rysunku.

DrawingLineCompletedEventArgs

Argument zdarzenia, który zawiera ostatni wiersz rysunku.

Właściwości

Właściwości Type Opis
LastDrawingLine IDrawingLine Ostatnia linia rysunku.

PointDrawnEventArgs

Argument zdarzenia, który zawiera ostatni punkt rysunku.

Właściwości

Właściwości Type Opis
Osoba PointF Ostatni punkt rysunku.

Metody

Metoda opis
GetImageStream Pobiera obiekt Stream zawierający obraz Lines , który jest obecnie rysowany na obiekcie DrawingView.
GetImageStream (statyczny) Pobiera obraz Stream zawierający kolekcję IDrawingLine , która jest dostarczana jako parametr.

Przykłady

Przykład tej funkcji można znaleźć w aplikacji przykładowej zestawu narzędzi .NET MAUI Community Toolkit.

interfejs API

Kod źródłowy można DrawingView znaleźć w repozytorium GitHub zestawu narzędzi .NET MAUI Community Toolkit.