Graphik

Durchsuchen Sie das Beispiel

.NET Multi-platform App UI (.NET MAUI) bietet einen plattformübergreifenden Grafikbereich, auf dem 2D-Grafiken mithilfe von Typen aus dem Microsoft.Maui.Graphics Namespace gezeichnet werden können. Dieser Zeichenbereich unterstützt das Zeichnen und Malen von Formen und Bildern, Kompositionsvorgänge und grafische Transformationen von Objekten.

Es gibt viele Ähnlichkeiten zwischen den Funktionen, die von Microsoft.Maui.Graphics bereitgestellt werden, und den Funktionen, die von .NET MAUI-Shapes und -Pinseln bereitgestellt werden. Jeder richtet sich jedoch an verschiedene Szenarien:

• Microsoft.Maui.Graphics Die Funktionalität muss auf einem Zeichenbereich genutzt werden, ermöglicht das Zeichnen von leistungsfähigen Grafiken und bietet einen praktischen Ansatz zum Schreiben grafikbasierter Steuerelemente. Beispielsweise kann ein Steuerelement, das das GitHub-Beitragsprofil repliziert, einfacher mit Microsoft.Maui.Graphics als mit .NET MAUI-Shapes implementiert werden.
• Die .NET MAUI-Shapes können direkt auf einer Seite verwendet werden, und Pinsel können von allen Steuerelementen genutzt werden. Diese Funktionalität wird bereitgestellt, um Ihnen bei der Erstellung einer attraktiven Benutzeroberfläche zu helfen.

Weitere Informationen zu .NET MAUI-Shapes finden Sie unter Shapes.

Zeichnen von Grafiken

In .NET MAUI ermöglicht der GraphicsView die Nutzung von Microsoft.Maui.Graphics-Funktionen. GraphicsView definiert die Drawable Eigenschaft vom Typ IDrawable, die den Inhalt angibt, der vom Steuerelement gezeichnet wird. Um den Inhalt anzugeben, der gezeichnet wird, müssen Sie ein Objekt erstellen, das von IDrawable abgeleitet ist, und dessen Draw-Methode implementieren.

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

Die Draw Methode weist ICanvas und RectF Argumente auf. Das ICanvas Argument ist die Zeichenfläche, auf der Sie grafische Objekte zeichnen. Das RectF Argument ist ein struct Argument, das Daten zur Größe und Position des Zeichenbereichs enthält.

In XAML kann das IDrawable Objekt als Ressource deklariert und dann von einem GraphicsView genutzt werden, indem er seinen Schlüssel als Wert der Drawable Eigenschaft angibt:

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

Weitere Informationen zum GraphicsViewThema finden Sie unter GraphicsView.

Zeichenbereich

Das GraphicsView Steuerelement ermöglicht über das ICanvas Objekt Zugriff auf ein IDrawable Objekt, auf dem Eigenschaften festgelegt und Methoden zum Zeichnen grafischer Objekte aufgerufen werden können. Informationen zum Zeichnen auf einem ICanvasObjekt finden Sie unter Zeichnen grafischer Objekte.

ICanvas definiert die folgenden Eigenschaften, die sich auf das Erscheinungsbild von Objekten auswirken, die auf der Leinwand dargestellt werden.

• Alpha, vom Typ float, gibt die Deckkraft eines Objekts an.
• Antialias, vom Typ bool, gibt an, ob Antialiasing aktiviert ist.
• BlendMode, vom Typ BlendMode, definiert den Blend-Modus, der bestimmt, was passiert, wenn ein Objekt über einem vorhandenen Objekt gerendert wird.
• DisplayScale, vom Typ float, stellt den Skalierungsfaktor dar, mit dem die Benutzeroberfläche auf einem Zeichenbereich skaliert wird.
• FillColor, vom Typ Color, gibt die Farbe an, die zum Zeichnen des Inneren eines Objekts verwendet wird.
• Font, vom Typ IFont, definiert die Schriftart beim Zeichnen von Text.
• FontColor, vom Typ Color, gibt die Schriftfarbe beim Zeichnen von Text an.
• FontSize, vom Typ float, definiert die Schriftgröße beim Textzeichnen.
• MiterLimit, vom Typ float, gibt den Grenzwert der Miterlänge von Linienbeitritten in einem Objekt an.
• StrokeColor, vom Typ Color, gibt die Farbe an, die zum Zeichnen der Kontur eines Objekts verwendet wird.
• StrokeDashOffset, vom Typ float, gibt den Abstand innerhalb des Strichmusters an, in dem ein Strich beginnt.
• StrokeDashPattern, vom Typ float[], gibt das Muster von Strichen und Lücken an, die zum Konturieren eines Objekts verwendet werden.
• StrokeLineCap, vom Typ LineCap, beschreibt die Form am Anfang und Ende einer Linie.
• StrokeLineJoin, vom Typ LineJoin, gibt den Typ der Verknüpfung an, die an den Scheitelpunkten eines Shapes verwendet wird.
• StrokeSize, vom Typ float, gibt die Breite der Gliederung eines Objekts an.

Standardmäßig setzt ein ICanvasStrokeSize auf 1, StrokeColor auf Schwarz, StrokeLineJoin auf LineJoin.Miter, und StrokeLineCap auf LineJoin.Cap.

Zeichen-Leinwandstatus

Der Zeichenbereich auf jeder Plattform hat die Möglichkeit, den Zustand beizubehalten. Auf diese Weise können Sie den aktuellen Grafikzustand beibehalten und bei Bedarf wiederherstellen.

Jedoch sind nicht alle Elemente des Canvas auch Elemente des Grafikzustands. Der Grafikzustand enthält keine Zeichnungsobjekte, z. B. Pfade und Paint-Objekte, z. B. Farbverläufe. Typische Elemente des Grafikzustands auf jeder Plattform umfassen Strich- und Fülldaten sowie Schriftartdaten.

Der Grafikzustand jeder ICanvas kann mit den folgenden Methoden bearbeitet werden:

• SaveState, wodurch der aktuelle Grafikzustand gespeichert wird.
• RestoreState, der den Grafikzustand auf den zuletzt gespeicherten Zustand festlegt.
• ResetState, wodurch der Grafikzustand auf die Standardwerte zurückgesetzt wird.