Grafica

Esplorare l'esempio

L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) offre un'area di disegno grafica multipiattaforma in cui è possibile disegnare grafica 2D usando i tipi dello spazio dei Microsoft.Maui.Graphics nomi. Questa area di disegno e disegno supporta forme e immagini, operazioni di composizione e trasformazioni di oggetti grafici.

Esistono molte analogie tra la funzionalità fornita da Microsoft.Maui.Graphicse la funzionalità fornita dalle forme e dai pennelli MAUI di .NET. Tuttavia, ognuno è rivolto a scenari diversi:

• Microsoft.Maui.Graphics la funzionalità deve essere utilizzata in un'area di disegno, consente di disegnare grafica con prestazioni elevate e offre un approccio pratico per la scrittura di controlli basati sulla grafica. Ad esempio, un controllo che replica il profilo di contributo di GitHub può essere implementato più facilmente usando Microsoft.Maui.Graphics rispetto all'uso delle forme MAUI .NET.
• Le forme MAUI .NET possono essere utilizzate direttamente in una pagina e i pennelli possono essere utilizzati da tutti i controlli. Questa funzionalità viene fornita per facilitare la creazione di un'interfaccia utente interessante.

Per altre informazioni sulle forme MAUI .NET, vedere Forme.

Disegna grafica

In .NET MAUI abilita l'utilizzo GraphicsView delle Microsoft.Maui.Graphics funzionalità. GraphicsView definisce la Drawable proprietà , di tipo IDrawable, che specifica il contenuto che verrà disegnato dal controllo . Per specificare il contenuto che verrà disegnato, è necessario creare un oggetto che deriva da IDrawablee implementare il relativo Draw metodo:

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

Il Draw metodo ha ICanvas argomenti e RectF . L'argomento ICanvas è l'area di disegno in cui si disegnano oggetti grafici. L'argomento RectF è un struct oggetto che contiene dati relativi alle dimensioni e alla posizione dell'area di disegno.

In XAML l'oggetto IDrawable può essere dichiarato come risorsa e quindi utilizzato da un GraphicsView oggetto specificandone la chiave come valore della Drawable proprietà:

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

Per altre informazioni su GraphicsView, vedere GraphicsView.

Area di disegno

Il GraphicsView controllo fornisce l'accesso a un ICanvas oggetto, tramite il relativo IDrawable oggetto, su cui è possibile impostare le proprietà e i metodi richiamati per disegnare oggetti grafici. Per informazioni sul disegno su un ICanvasoggetto , vedere Disegnare oggetti grafici.

ICanvas definisce le proprietà seguenti che influiscono sull'aspetto degli oggetti disegnati nell'area di disegno:

• Alpha, di tipo float, indica l'opacità di un oggetto .
• Antialias, di tipo bool, specifica se l'anti-aliasing è abilitato.
• BlendMode, di tipo BlendMode, definisce la modalità di fusione, che determina cosa accade quando viene eseguito il rendering di un oggetto sopra un oggetto esistente.
• DisplayScale, di tipo float, rappresenta il fattore di ridimensionamento per ridimensionare l'interfaccia utente in un'area di disegno.
• FillColor, di tipo Color, indica il colore utilizzato per disegnare l'interno di un oggetto.
• Font, di tipo IFont, definisce il tipo di carattere durante il disegno del testo.
• FontColor, di tipo Color, specifica il colore del carattere durante il disegno del testo.
• FontSize, di tipo float, definisce le dimensioni del tipo di carattere durante il disegno del testo.
• MiterLimit, di tipo float, specifica il limite della lunghezza del miter dei join di riga in un oggetto .
• StrokeColor, di tipo Color, indica il colore utilizzato per disegnare il contorno di un oggetto.
• StrokeDashOffset, di tipo float, specifica la distanza all'interno del motivo trattino in cui inizia un trattino.
• StrokeDashPattern, di tipo float[], specifica il modello di trattini e spazi vuoti utilizzati per delineare un oggetto .
• StrokeLineCap, di tipo LineCap, descrive la forma all'inizio e alla fine di una linea.
• StrokeLineJoin, di tipo LineJoin, specifica il tipo di join utilizzato nei vertici di una forma.
• StrokeSize, di tipo float, indica la larghezza della struttura di un oggetto.

Per impostazione predefinita, un ICanvas oggetto imposta StrokeSize su 1, StrokeColor su nero, StrokeLineJoin su LineJoin.Mitere StrokeLineCap su LineJoin.Cap.

Disegno dello stato dell'area di disegno

L'area di disegno su ogni piattaforma ha la possibilità di mantenere lo stato. In questo modo è possibile mantenere lo stato della grafica corrente e ripristinarlo quando necessario.

Tuttavia, non tutti gli elementi dell'area di disegno sono elementi dello stato grafico. Lo stato grafico non include oggetti di disegno, ad esempio percorsi e oggetti di disegno, ad esempio sfumature. Gli elementi tipici dello stato grafico in ogni piattaforma includono tratti e dati di riempimento e tipi di carattere.

Lo stato grafico di ogni ICanvas oggetto può essere modificato con i metodi seguenti:

• SaveState, che salva lo stato di grafica corrente.
• RestoreState, che imposta lo stato della grafica sullo stato salvato più di recente.
• ResetState, che reimposta lo stato della grafica sui valori predefiniti.

Nota

Lo stato persistente da questi metodi dipende dalla piattaforma.