Disegnare oggetti grafici

Esplorare l'esempio

La grafica dell'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) include la possibilità di disegnare oggetti grafici con colori a tinta unita, sfumature, immagini ripetute e modelli.

La Paint classe è una classe astratta che disegna un oggetto con il relativo output. Le classi che derivano da Paint descrivono diversi modi di disegnare un oggetto. L'elenco seguente descrive i diversi tipi di vernice disponibili nella grafica MAUI .NET:

• SolidPaint, che disegna un oggetto con un colore a tinta unita. Per altre informazioni, vedere Disegnare un colore a tinta unita.
• ImagePaint, che disegna un oggetto con un'immagine. Per altre informazioni, vedere Disegnare un'immagine.
• PatternPaint, che disegna un oggetto con un motivo. Per altre informazioni, vedere Disegnare un motivo.
• GradientPaint, che disegna un oggetto con una sfumatura. Per altre informazioni, vedere Disegnare una sfumatura.

Le istanze di questi tipi possono essere disegnate su un ICanvasoggetto , in genere usando il metodo per impostare la SetFillPaint vernice come riempimento di un oggetto grafico.

La Paint classe definisce BackgroundColoranche le proprietà , e ForegroundColor di tipo Color, che possono essere usate per definire facoltativamente i colori di sfondo e di primo piano per un Paint oggetto .

Disegnare un colore a tinta unita

La SolidPaint classe derivata dalla Paint classe viene usata per disegnare un oggetto grafico con un colore a tinta unita.

La SolidPaint classe definisce una Color proprietà di tipo Color, che rappresenta il colore della vernice. La classe dispone inoltre di una IsTransparent proprietà che restituisce un bool oggetto che indica se il colore ha un valore alfa minore di 1.

Creare un oggetto SolidPaint

Il colore di un SolidPaint oggetto viene in genere specificato tramite il relativo costruttore, utilizzando un Color argomento:

SolidPaint solidPaint = new SolidPaint(Colors.Silver);

RectF solidRectangle = new RectF(100, 100, 200, 100);
canvas.SetFillPaint(solidPaint, solidRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(solidRectangle, 12);

L'oggetto SolidPaint viene specificato come primo argomento del SetFillPaint metodo . Pertanto, un rettangolo arrotondato riempito viene disegnato con un oggetto silver SolidPaint :

In alternativa, il colore può essere specificato con la Color proprietà :

SolidPaint solidPaint = new SolidPaint
{
    Color = Colors.Silver
};

RectF solidRectangle = new RectF(100, 100, 200, 100);
canvas.SetFillPaint(solidPaint, solidRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(solidRectangle, 12);

Disegnare un'immagine

La ImagePaint classe derivata dalla Paint classe viene usata per disegnare un oggetto grafico con un'immagine.

La ImagePaint classe definisce una Image proprietà di tipo IImage, che rappresenta l'immagine da disegnare. La classe ha anche una IsTransparent proprietà che restituisce false.

Creare un oggetto ImagePaint

Per disegnare un oggetto con un'immagine, caricare l'immagine e assegnarla alla Image proprietà dell'oggetto ImagePaint .

Nota

Il caricamento di un'immagine incorporata in un assembly richiede che l'immagine abbia l'azione di compilazione impostata su Risorsa incorporata.

L'esempio seguente illustra come caricare un'immagine e riempire un rettangolo con esso:

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
    image = PlatformImage.FromStream(stream);
}

if (image != null)
{
    ImagePaint imagePaint = new ImagePaint
    {
        Image = image.Downsize(100)
    };
    canvas.SetFillPaint(imagePaint, RectF.Zero);
    canvas.FillRectangle(0, 0, 240, 300);
}

In questo esempio l'immagine viene recuperata dall'assembly e caricata come flusso. L'immagine viene ridimensionata usando il Downsize metodo , con l'argomento che specifica che la dimensione più grande deve essere impostata su 100 pixel. Per altre informazioni sul ridimensionamento di un'immagine, vedere Ridimensionare un'immagine.

La Image proprietà dell'oggetto ImagePaint viene impostata sulla versione downsized dell'immagine e l'oggetto ImagePaint viene impostato come vernice per riempire un oggetto con . Viene quindi disegnato un rettangolo riempito con la vernice:

Nota

È ImagePaint anche possibile creare un oggetto da un IImage oggetto tramite il AsPaint metodo di estensione.

In alternativa, il SetFillImage metodo di estensione può essere usato per semplificare il codice:

if (image != null)
{
    canvas.SetFillImage(image.Downsize(100));
    canvas.FillRectangle(0, 0, 240, 300);
}

Disegnare un motivo

La PatternPaint classe, derivata dalla Paint classe , viene usata per disegnare un oggetto grafico con un motivo.

La PatternPaint classe definisce una Pattern proprietà di tipo IPattern, che rappresenta il motivo da disegnare. La classe dispone inoltre di una IsTransparent proprietà che restituisce un bool oggetto che indica se lo sfondo o il colore di primo piano della vernice ha un valore alfa minore di 1.

Creare un oggetto PatternPaint

Per disegnare un'area con un motivo, creare il motivo e assegnarlo alla Pattern proprietà di un PatternPaint oggetto .

L'esempio seguente illustra come creare un motivo e riempire un oggetto con esso:

IPattern pattern;

// Create a 10x10 template for the pattern
using (PictureCanvas picture = new PictureCanvas(0, 0, 10, 10))
{
    picture.StrokeColor = Colors.Silver;
    picture.DrawLine(0, 0, 10, 10);
    picture.DrawLine(0, 10, 10, 0);
    pattern = new PicturePattern(picture.Picture, 10, 10);
}

// Fill the rectangle with the 10x10 pattern
PatternPaint patternPaint = new PatternPaint
{
    Pattern = pattern
};
canvas.SetFillPaint(patternPaint, RectF.Zero);
canvas.FillRectangle(10, 10, 250, 250);

In questo esempio, il modello è un'area 10x10 che contiene una linea diagonale da (0,0) a (10,10) e una linea diagonale da (0,10) a (10,0). La Pattern proprietà dell'oggetto PatternPaint viene impostata sul motivo e l'oggetto PatternPaint viene impostato come vernice per riempire un oggetto con . Viene quindi disegnato un rettangolo riempito con la vernice:

Nota

È PatternPaint anche possibile creare un oggetto da un PicturePattern oggetto tramite il AsPaint metodo di estensione.

Disegnare una sfumatura

La GradientPaint classe, derivata dalla Paint classe , è una classe base astratta che descrive una sfumatura, costituita da passaggi sfumatura. Un GradientPaint oggetto grafico disegna un oggetto grafico con più colori che si fondono tra loro lungo un asse. Le classi che derivano da GradientPaint descrivono diversi modi per interpretare i cursori delle sfumature e la grafica MAUI .NET fornisce le seguenti sfumature:

• LinearGradientPaint, che disegna un oggetto con una sfumatura lineare. Per altre informazioni, vedere Disegnare una sfumatura lineare.
• RadialGradientPaint, che disegna un oggetto con una sfumatura radiale. Per altre informazioni, vedere Disegnare una sfumatura radiale.

La GradientPaint classe definisce la GradientStops proprietà di tipo PaintGradientStop, che rappresenta le interruzioni sfumature del pennello, ognuna delle quali specifica un colore e un offset lungo l'asse delle sfumature.

Cursori sfumatura

Le interruzioni sfumature sono i blocchi predefiniti di una sfumatura e specificano i colori nella sfumatura e la relativa posizione lungo l'asse delle sfumature. Le interruzioni sfumature vengono specificate utilizzando PaintGradientStop oggetti .

La PaintGradientStop classe definisce le proprietà seguenti:

• Color, di tipo Color, che rappresenta il colore dell'interruzione sfumatura.
• Offset, di tipo float, che rappresenta la posizione dell'interruzione sfumatura all'interno del vettore di sfumatura. I valori validi sono compresi nell'intervallo 0.0-1.0. Più questo valore è più vicino a 0, più il colore è più vicino all'inizio della sfumatura. Analogamente, il valore più vicino è 1, più vicino al colore è alla fine della sfumatura.

Importante

Il sistema di coordinate utilizzato dalle sfumature è relativo a un rettangolo di selezione per l'oggetto grafico. 0 indica lo 0% del riquadro e 1 indica il 100% del riquadro. Pertanto, (0,5,0,5) descrive un punto al centro del rettangolo di selezione e (1,1) descrive un punto in basso a destra del rettangolo di selezione.

I cursori sfumatura possono essere aggiunti a un GradientPaint oggetto con il AddOffset metodo .

Nell'esempio seguente viene creata una diagonale LinearGradientPaint con quattro colori:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    StartPoint = new Point(0, 0),
    EndPoint = new Point(1, 1)
};

linearGradientPaint.AddOffset(0.25f, Colors.Red);
linearGradientPaint.AddOffset(0.75f, Colors.Blue);

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);                                                     

Il colore di ogni punto tra i cursori sfumato viene interpolato come combinazione del colore specificato dalle due interruzioni sfumature di delimitazione. Il diagramma seguente mostra le interruzioni sfumature dell'esempio precedente:

In questo diagramma i cerchi contrassegnano la posizione dei punti sfumatura e la linea tratteggiata mostra l'asse delle sfumature. Il primo punto di interruzione sfumatura specifica il colore giallo in corrispondenza di un offset pari a 0,0. Il secondo punto di interruzione sfumatura specifica il colore rosso in corrispondenza di un offset pari a 0,25. I punti tra questi due gradienti cambiano gradualmente da giallo a rosso mentre si passa da sinistra a destra lungo l'asse delle sfumature. La terza interruzione sfumatura specifica il colore blu in corrispondenza di un offset pari a 0,75. I punti tra il secondo e il terzo cursore sfumatura cambiano gradualmente da rosso a blu. Il quarto punto di sfumatura specifica il colore verde lime in corrispondenza dell'offset di 1,0. I punti tra il terzo e il quarto cursore sfumatura cambiano gradualmente da blu a verde lime.

Disegnare una sfumatura lineare

La LinearGradientPaint classe, derivata dalla GradientPaint classe , disegna un oggetto grafico con una sfumatura lineare. Una sfumatura lineare fonde due o più colori lungo una linea nota come asse delle sfumature. PaintGradientStop gli oggetti vengono utilizzati per specificare i colori nella sfumatura e le relative posizioni. Per altre informazioni sugli PaintGradientStop oggetti, vedere Disegnare una sfumatura.

La LinearGradientPaint classe definisce le proprietà seguenti:

• StartPoint, di tipo Point, che rappresenta le coordinate bidimensionali iniziali della sfumatura lineare. Il costruttore della classe inizializza questa proprietà su (0,0).
• EndPoint, di tipo Point, che rappresenta le coordinate bidimensionali finali della sfumatura lineare. Il costruttore della classe inizializza questa proprietà in (1,1).

Creare un oggetto LinearGradientPaint

Le interruzioni sfumature di una sfumatura lineare vengono posizionate lungo l'asse delle sfumature. L'orientamento e le dimensioni dell'asse delle sfumature possono essere modificati utilizzando le StartPoint proprietà e EndPoint . Modificando queste proprietà, è possibile creare sfumature orizzontali, verticali e diagonali, invertire la direzione della sfumatura, condensare la diffusione della sfumatura e altro ancora.

Le StartPoint proprietà e EndPoint sono relative all'oggetto grafico da disegnare. (0,0) rappresenta l'angolo superiore sinistro dell'oggetto da disegnare e (1,1) rappresenta l'angolo inferiore destro dell'oggetto da disegnare. Il diagramma seguente mostra l'asse delle sfumature per un pennello sfumato lineare diagonale:

In questo diagramma la linea tratteggiata mostra l'asse delle sfumature, che evidenzia il percorso di interpolazione della sfumatura dal punto iniziale al punto finale.

Creare una sfumatura lineare orizzontale

Per creare una sfumatura lineare orizzontale, creare un LinearGradientPaint oggetto e impostarne StartColor le proprietà e EndColor . Impostare quindi su EndPoint (1,0).

Nell'esempio seguente viene illustrato come creare un oggetto orizzontale LinearGradientPaint:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    EndPoint = new Point(1, 0)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

In questo esempio il rettangolo arrotondato viene disegnato con una sfumatura lineare che interpola orizzontalmente dal giallo al verde:

Creare una sfumatura lineare verticale

Per creare una sfumatura lineare verticale, creare un LinearGradientPaint oggetto e impostarne StartColor le proprietà e EndColor . Impostare quindi su EndPoint (0,1).

Nell'esempio seguente viene illustrato come creare un oggetto verticale LinearGradientPaint:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    EndPoint = new Point(0, 1)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

In questo esempio il rettangolo arrotondato viene disegnato con una sfumatura lineare che interpola verticalmente dal giallo al verde:

Creare una sfumatura lineare diagonale

Per creare una sfumatura lineare diagonale, creare un LinearGradientPaint oggetto e impostarne StartColor le proprietà e EndColor .

Nell'esempio seguente viene illustrato come creare una diagonale LinearGradientPaint:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    // EndPoint is already (1,1)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

In questo esempio il rettangolo arrotondato viene disegnato con una sfumatura lineare che interpola diagonalmente dal giallo al verde:

Disegnare una sfumatura radiale

La RadialGradientPaint classe, derivata dalla GradientPaint classe , disegna un oggetto grafico con una sfumatura radiale. Una sfumatura radiale fonde due o più colori in un cerchio. PaintGradientStop gli oggetti vengono utilizzati per specificare i colori nella sfumatura e le relative posizioni. Per altre informazioni sugli PaintGradientStop oggetti, vedere Disegnare una sfumatura.

La RadialGradientPaint classe definisce le proprietà seguenti:

• Center, di tipo Point, che rappresenta il punto centrale del cerchio per la sfumatura radiale. Il costruttore della classe inizializza questa proprietà su (0,5,0,5).
• Radius, di tipo double, che rappresenta il raggio del cerchio per la sfumatura radiale. Il costruttore della classe inizializza questa proprietà su 0.5.

Creare un oggetto RadialGradientPaint

I cursori sfumato di una sfumatura radiale vengono posizionati lungo un asse delle sfumature definito da un cerchio. L'asse delle sfumature si irradia dal centro del cerchio alla circonferenza. La posizione e le dimensioni del cerchio possono essere modificate utilizzando le Center proprietà e Radius . Il cerchio definisce il punto finale della sfumatura. Pertanto, un cursore sfumato a 1,0 definisce il colore in corrispondenza della circonferenza del cerchio. Un cursore sfumato a 0,0 definisce il colore al centro del cerchio.

Per creare una sfumatura radiale, creare un RadialGradientPaint oggetto e impostarne StartColor le proprietà e EndColor . Impostare quindi le Center relative proprietà e Radius .

Nell'esempio seguente viene illustrato come creare un oggetto centrato RadialGradientPaint:

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue
    // Center is already (0.5,0.5)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

In questo esempio, il rettangolo arrotondato viene disegnato con una sfumatura radiale che interpola da rosso a blu scuro. Il centro della sfumatura radiale è posizionato al centro del rettangolo:

Nell'esempio seguente il centro della sfumatura radiale viene spostato nell'angolo superiore sinistro del rettangolo:

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue,
    Center = new Point(0.0, 0.0)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

In questo esempio, il rettangolo arrotondato viene disegnato con una sfumatura radiale che interpola da rosso a blu scuro. Il centro della sfumatura radiale è posizionato in alto a sinistra del rettangolo:

Nell'esempio seguente il centro della sfumatura radiale viene spostato nell'angolo inferiore destro del rettangolo:

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue,
    Center = new Point(1.0, 1.0)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

In questo esempio, il rettangolo arrotondato viene disegnato con una sfumatura radiale che interpola da rosso a blu scuro. Il centro della sfumatura radiale è posizionato in basso a destra del rettangolo: