Grafiken

Beispiel durchsuchen

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

Es gibt viele Ähnlichkeiten zwischen der Funktionalität von Microsoft.Maui.Graphics und der Funktionalität der .NET MAUI-Formen und -Pinsel. Sie sind jedoch für verschiedene Szenarien vorgesehen:

• Die Funktionalität Microsoft.Maui.Graphics muss in einem Zeichenbereich genutzt werden. Sie ermöglicht das Zeichnen leistungsstarker Grafiken und bietet einen praktischen Ansatz zum Schreiben grafikbasierter Steuerelemente. Ein Steuerelement, das das GitHub-Beitragsprofil nachbildet, lässt sich beispielsweise leichter mit Microsoft.Maui.Graphics als mit .NET MAUI-Formen implementieren.
• .NET MAUI-Formen können direkt auf einer Seite genutzt werden, Pinsel von allen Steuerelementen. Diese Funktionalität wird bereitgestellt, um Ihnen bei der Erstellung einer ansprechenden Benutzeroberfläche zu helfen.

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

Zeichnen von Grafiken

In .NET MAUI ermöglicht es die GraphicsView, dass Sie die Microsoft.Maui.Graphics-Funktionalität nutzen können. 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 wird, und die zugehörige Draw-Methode implementieren:

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

Die Draw-Methode besitzt die Argumente ICanvas und RectF. Das ICanvas-Argument ist der Zeichenbereich, in dem Sie grafische Objekte zeichnen. Das RectF-Argument ist ein struct-Element, das Daten zur Größe und Position des Zeichenbereichs enthält.

In XAML kann das IDrawable-Objekt als Ressource deklariert und dann von einer GraphicsView genutzt werden, indem Sie den zugehörigen Schlüssel als Wert der Drawable-Eigenschaft angeben:

<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 zur GraphicsView finden Sie unter GraphicsView.

Zeichenbereich

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

ICanvas definiert die folgenden Eigenschaften, die sich auf die Darstellung von Objekten auswirken, die im Zeichenbereich gezeichnet 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 die Füllmethode, die 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 in 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 den Schriftgrad beim Zeichnen von Text.
• MiterLimit, vom Typ float, gibt die Begrenzung der Gehrungslänge von Linienverbindungen 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 Umranden 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 Verbindung an, die an den Scheitelpunkten einer Form verwendet wird.
• StrokeSize, vom Typ float, gibt die Breite der Kontur eines Objekts an.

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

Zeichenbereichsstatus

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

Nicht alle Elemente des Zeichenbereichs sind jedoch Elemente des Grafikzustands. Der Grafikzustand enthält weder Zeichnungsobjekte wie Pfade noch Paint-Objekte wie Farbverläufe. Typische Elemente des Grafikzustands auf jeder Plattform umfassen Strich- und Fülldaten sowie Schriftartdaten.

Der Grafikzustand jedes ICanvas kann mit den folgenden Methoden geändert werden:

• SaveState, die den aktuellen Grafikzustand speichert.
• RestoreState, die den Grafikzustand auf den zuletzt gespeicherten Zustand festlegt.
• ResetState, die den Grafikzustand auf die Standardwerte zurücksetzt.

Hinweis

Der Zustand, der von diesen Methoden beibehalten wird, ist plattformabhängig.