GraphicsView

Przeglądanie przykładu

Interfejs użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) GraphicsView to kanwa grafiki, na której można rysowania grafiki 2D przy użyciu typów z Microsoft.Maui.Graphics przestrzeni nazw. Aby uzyskać więcej informacji na temat Microsoft.Maui.Graphicsprogramu , zobacz Grafika.

GraphicsViewDrawable definiuje właściwość typu IDrawable, która określa zawartość, która zostanie narysowana. Ta właściwość jest wspierana BindablePropertyprzez element , co oznacza, że może być elementem docelowym powiązania danych i stylizowany.

GraphicsView definiuje następujące zdarzenia:

• StartHoverInteraction, z elementem TouchEventArgs, który jest zgłaszany, gdy wskaźnik przechodzi do obszaru testowego trafienia .GraphicsView
• MoveHoverInteraction, z TouchEventArgs, który jest podniesiony, gdy wskaźnik porusza się, podczas gdy wskaźnik pozostaje w obszarze testu trafienia GraphicsView.
• EndHoverInteraction, który jest zgłaszany, gdy wskaźnik opuszcza obszar testu trafienia .GraphicsView
• StartInteraction, z elementem TouchEventArgs, który jest wywoływany po naciśnięciu klawisza GraphicsView .
• DragInteraction, z elementem TouchEventArgs, który jest podniesiony po GraphicsView przeciągnięciu.
• EndInteraction, z TouchEventArgs, który jest wywoływany, gdy naciśnięcie, które podniosło StartInteraction zdarzenie jest zwalniane.
• CancelInteraction, który jest podniesiony, gdy prasa, która nawiązała kontakt z GraphicsView traci kontakt.

Tworzenie obiektu GraphicsView

Element GraphicsView musi zdefiniować IDrawable obiekt określający zawartość, która zostanie narysowana na kontrolce. Można to osiągnąć, tworząc obiekt, który pochodzi z IDrawableklasy , i implementując jego Draw metodę:

namespace MyMauiApp
{
    public class GraphicsDrawable : IDrawable
    {
        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            // Drawing code goes here
        }      
    }
}

Metoda Draw ma ICanvas argumenty i RectF . Argumentem ICanvas jest kanwa rysunku, na której rysujesz obiekty graficzne. Argumentem RectF jest struct element zawierający dane dotyczące rozmiaru i lokalizacji kanwy rysunku. Aby uzyskać więcej informacji na temat rysunku na obiekcie ICanvas, zobacz Rysowanie obiektów graficznych.

W języku XAML obiekt można zadeklarować jako zasób, IDrawable a następnie zużyć go, GraphicsView określając jego klucz jako wartość Drawable właściwości:

<ContentPage xmlns=http://schemas.microsoft.com/dotnet/2021/maui
             xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
             xmlns:drawable="clr-namespace:MyMauiApp"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Resources>
        <drawable:GraphicsDrawable x:Key="drawable" />
    </ContentPage.Resources>
    <VerticalStackLayout>
        <GraphicsView Drawable="{StaticResource drawable}"
                      HeightRequest="300"
                      WidthRequest="400" />
    </VerticalStackLayout>
</ContentPage>

Położenie i rozmiar obiektów graficznych

Lokalizację i rozmiar ICanvas obiektu na stronie można określić, sprawdzając właściwości argumentu RectF w metodzie Draw .

Struktura RectF definiuje następujące właściwości:

• Bottom, typu float, który reprezentuje współrzędną y dolnej krawędzi kanwy.
• Center, typu PointF, który określa współrzędne środka kanwy.
• Height, typu float, który definiuje wysokość kanwy.
• IsEmpty, typu bool, który wskazuje, czy kanwa ma zerowy rozmiar i lokalizację.
• Left, typu float, który reprezentuje współrzędną x lewej krawędzi kanwy.
• Location, typu PointF, który definiuje współrzędne lewego górnego rogu kanwy.
• Right, typu float, który reprezentuje współrzędną x prawej krawędzi kanwy.
• Size, typu SizeF, który definiuje szerokość i wysokość kanwy.
• Top, typu float, który reprezentuje współrzędną y górnej krawędzi kanwy.
• Width, typu float, który definiuje szerokość kanwy.
• X, typu float, który definiuje współrzędną x lewego górnego rogu kanwy.
• Y, typu float, który definiuje współrzędną y lewego górnego rogu kanwy.

Te właściwości mogą służyć do ustawiania i określania rozmiaru obiektów graficznych na obiekcie ICanvas. Na przykład obiekty graficzne można umieścić w środku Canvas obiektu przy użyciu Center.X wartości i Center.Y jako argumentów metody rysunku. Aby uzyskać informacje na temat rysunku na obiekcie ICanvas, zobacz Rysowanie obiektów graficznych.

Unieważnianie kanwy

GraphicsView ma metodę, która informuje kanwę Invalidate o konieczności ponownego rysowania. Ta metoda musi być wywoływana w wystąpieniu GraphicsView :

graphicsView.Invalidate();

Program .NET MAUI automatycznie unieważnia GraphicsView element zgodnie z potrzebami interfejsu użytkownika. Na przykład gdy element zostanie wyświetlony po raz pierwszy, pojawi się w widoku lub zostanie ujawniony przez przeniesienie elementu z na jego wierzchu, zostanie on ponownie wyrysowany. Jedynym czasem, w którym trzeba wywołać Invalidate metodę, jest wymusić GraphicsView ponowne rysowanie, na przykład wtedy, gdy zawartość została zmieniona, gdy jest ona nadal widoczna.