Disegnare oggetti grafici

Esplorare l'esempio

La grafica dell'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) nello spazio dei Microsoft.Maui.Graphics nomi consente di disegnare oggetti grafici in un'area di disegno definita come ICanvas oggetto .

Il controllo MAUI GraphicsView .NET consente l'accesso a un ICanvas oggetto, in cui è possibile impostare le proprietà e i metodi richiamati per disegnare oggetti grafici. Per altre informazioni su GraphicsView, vedere GraphicsView.

Nota

Molti degli oggetti grafici hanno Draw metodi e Fill , ad esempio DrawRectangle e FillRectangle. Un Draw metodo disegna il contorno della forma, che non viene riempita. Un Fill metodo disegna il contorno della forma e lo riempie.

Gli oggetti grafici vengono disegnati su un'unità ICanvas indipendente dal dispositivo riconosciuta da ogni piattaforma. In questo modo, gli oggetti grafici vengono ridimensionati in modo appropriato alla densità di pixel della piattaforma sottostante.

Disegnare una linea

È possibile disegnare linee su un ICanvas oggetto utilizzando il DrawLine metodo , che richiede quattro float argomenti che rappresentano i punti iniziale e finale della linea.

Nell'esempio seguente viene illustrato come disegnare una linea:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 6;
canvas.DrawLine(10, 10, 90, 100);

In questo esempio viene disegnata una linea diagonale rossa da (10,10) a (90,100):

Nota

Esiste anche un DrawLine overload che accetta due PointF argomenti.

L'esempio seguente illustra come disegnare una linea tratteggiata:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.StrokeDashPattern = new float[] { 2, 2 };
canvas.DrawLine(10, 10, 90, 100);

In questo esempio viene disegnata una linea diagonale tratteggiata rossa da (10,10) a (90.100):

Per altre informazioni sulle linee tratteggiate, vedere Disegnare oggetti tratteggiati.

Disegnare un'ellisse

I puntini di sospensione e i cerchi possono essere disegnati su un ICanvas oggetto usando il DrawEllipse metodo , che richiede xargomenti , ywidth, e height di tipo float.

Nell'esempio seguente viene illustrato come disegnare un'ellisse:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.DrawEllipse(10, 10, 100, 50);

In questo esempio viene disegnata un'ellisse rossa con dimensioni 100x50 in corrispondenza di (10,10):

Per disegnare un cerchio, impostare gli width argomenti e height sul DrawEllipse metodo uguale:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.DrawEllipse(10, 10, 100, 100);

In questo esempio viene disegnato un cerchio rosso con dimensioni 100x100 in (10,10):

Nota

I cerchi possono anche essere disegnati con il DrawCircle metodo .

Per informazioni sul disegno di un'ellisse tratteggiata, vedere Disegnare oggetti tratteggiati.

È possibile disegnare un'ellisse riempita con il FillEllipse metodo , che richiede xanche argomenti , ywidth, e height di tipo float:

canvas.FillColor = Colors.Red;
canvas.FillEllipse(10, 10, 150, 50);

In questo esempio viene disegnato un'ellisse piena di rosso con dimensioni 150x50 in (10,10):

La FillColor proprietà dell'oggetto ICanvas deve essere impostata su un Color oggetto prima di richiamare il FillEllipse metodo .

I cerchi riempiti possono anche essere disegnati con il FillCircle metodo .

Nota

DrawEllipse Sono presenti overload e FillEllipse che accettano Rect argomenti e RectF . Inoltre, esistono anche DrawCircle overload e FillCircle .

Disegnare un rettangolo

I rettangoli e i quadrati possono essere disegnati su un ICanvas oggetto usando il DrawRectangle metodo , che richiede xargomenti , ywidth, e height di tipo float.

Nell'esempio seguente viene illustrato come disegnare un rettangolo:

canvas.StrokeColor = Colors.DarkBlue;
canvas.StrokeSize = 4;
canvas.DrawRectangle(10, 10, 100, 50);

In questo esempio viene disegnato un rettangolo blu scuro con dimensioni 100x50 in (10,10):

Per disegnare un quadrato, impostare gli width argomenti e height sul DrawRectangle metodo uguale:

canvas.StrokeColor = Colors.DarkBlue;
canvas.StrokeSize = 4;
canvas.DrawRectangle(10, 10, 100, 100);

In questo esempio viene disegnato un quadrato blu scuro con dimensioni 100x100 in (10,10):

Per informazioni sul disegno di un rettangolo tratteggiato, vedere Disegnare oggetti tratteggiati.

È possibile disegnare un rettangolo riempito con il FillRectangle metodo , che richiede xanche argomenti , y, widthe height di tipo float:

canvas.FillColor = Colors.DarkBlue;
canvas.FillRectangle(10, 10, 100, 50);

In questo esempio viene disegnato un rettangolo blu scuro con dimensioni pari a 100x50 (10,10):

La FillColor proprietà dell'oggetto ICanvas deve essere impostata su un Color oggetto prima di richiamare il FillRectangle metodo .

Nota

DrawRectangle Sono presenti overload e FillRectangle che accettano Rect argomenti e RectF .

Disegnare un rettangolo arrotondato

I rettangoli arrotondati e i quadrati possono essere disegnati su un ICanvas oggetto usando il DrawRoundedRectangle metodo , che richiede xargomenti , yheightwidth, , e cornerRadius di tipo .float L'argomento cornerRadius specifica il raggio utilizzato per arrotondare gli angoli del rettangolo.

Nell'esempio seguente viene illustrato come disegnare un rettangolo arrotondato:

canvas.StrokeColor = Colors.Green;
canvas.StrokeSize = 4;
canvas.DrawRoundedRectangle(10, 10, 100, 50, 12);

In questo esempio viene disegnato un rettangolo verde con angoli arrotondati e dimensioni pari a 100x50 in (10,10):

Per informazioni sul disegno di un rettangolo arrotondato tratteggiato, vedere Disegnare oggetti tratteggiati.

È possibile disegnare un rettangolo arrotondato pieno con il FillRoundedRectangle metodo , che richiede xanche argomenti , , yheightwidth, e cornerRadius di tipo :float

canvas.FillColor = Colors.Green;
canvas.FillRoundedRectangle(10, 10, 100, 50, 12);

In questo esempio viene disegnato un rettangolo verde pieno con angoli arrotondati e dimensioni pari a 100x50 (10,10):

La FillColor proprietà dell'oggetto ICanvas deve essere impostata su un Color oggetto prima di richiamare il FillRoundedRectangle metodo .

Nota

Sono DrawRoundedRectangle presenti overload e FillRoundedRectangle che accettano RectRectF argomenti e e overload che consentono di specificare separatamente il raggio di ogni angolo.

Disegnare un arco

Gli archi possono essere disegnati su un ICanvas oggetto usando il DrawArc metodo , che richiede xargomenti , , heightwidthstartAngley, , e endAngle di tipo e clockwiseclosed di tipo .floatbool L'argomento startAngle specifica l'angolo dall'asse x al punto iniziale dell'arco. L'argomento endAngle specifica l'angolo dall'asse x al punto finale dell'arco. L'argomento clockwise specifica la direzione in cui viene disegnato l'arco e l'argomento closed specifica se il punto finale dell'arco verrà collegato al punto iniziale.

Nell'esempio seguente viene illustrato come disegnare un arco:

canvas.StrokeColor = Colors.Teal;
canvas.StrokeSize = 4;
canvas.DrawArc(10, 10, 100, 100, 0, 180, true, false);

In questo esempio viene disegnato un arco teale di dimensioni 100x100 in corrispondenza (10,10). L'arco viene disegnato in senso orario da 0 gradi a 180 gradi e non è chiuso:

Per informazioni sul disegno di un arco tratteggiato, vedere Disegnare oggetti tratteggiati.

È possibile disegnare un arco pieno con il FillArc metodo , che richiede xargomenti , y, widthheight, startAngle, e endAngle di tipo e un clockwise argomento di tipo floatbool:

canvas.FillColor = Colors.Teal;
canvas.FillArc(10, 10, 100, 100, 0, 180, true);

In questo esempio viene disegnato un arco di teal riempito di dimensioni 100x100 in corrispondenza di (10,10). L'arco viene disegnato in senso orario da 0 gradi a 180 gradi e viene chiuso automaticamente:

La FillColor proprietà dell'oggetto ICanvas deve essere impostata su un Color oggetto prima di richiamare il FillArc metodo .

Nota

DrawArc Sono presenti overload e FillArc che accettano Rect argomenti e RectF .

Disegnare un tracciato

Un percorso è una raccolta di uno o più contorni. Ogni contorno è una raccolta di linee e curve collegate. I contorni non sono collegati tra loro, ma potrebbero sovrapporsi visivamente. A volte un singolo contorno può sovrapporsi.

I percorsi vengono utilizzati per disegnare curve e forme complesse e possono essere disegnati su un ICanvas oggetto utilizzando il DrawPath metodo , che richiede un PathF argomento .

Un contorno inizia in genere con una chiamata al PathF.MoveTo metodo , che è possibile esprimere come PointF valore o come coordinate e y separatex. La MoveTo chiamata stabilisce un punto all'inizio del contorno e un punto corrente iniziale. È quindi possibile chiamare i metodi seguenti per continuare il contorno con una linea o una curva dal punto corrente a un punto specificato nel metodo, che diventa quindi il nuovo punto corrente:

• LineTo per aggiungere una linea retta al percorso.
• AddArc per aggiungere un arco, che è una linea sulla circonferenza di un cerchio o di un'ellisse.
• CurveTo per aggiungere una spline di Bezier cubica.
• QuadTo per aggiungere una spline di Bezier quadratica.

Nessuno di questi metodi contiene tutti i dati necessari per descrivere la linea o la curva. Ogni metodo funziona invece con il punto corrente stabilito dalla chiamata al metodo immediatamente precedente. Ad esempio, il LineTo metodo aggiunge una linea retta al contorno in base al punto corrente.

Un contorno termina con un'altra chiamata a MoveTo, che inizia un nuovo contorno o una chiamata a Close, che chiude il contorno. Il Close metodo aggiunge automaticamente una linea retta dal punto corrente al primo punto del contorno e contrassegna il percorso come chiuso.

La PathF classe definisce anche altri metodi e proprietà. I metodi seguenti aggiungono intere contorni al percorso:

• AppendEllipse aggiunge un contorno di ellisse chiuso al percorso.
• AppendCircle aggiunge un contorno cerchio chiuso al percorso.
• AppendRectangle aggiunge un contorno rettangolo chiuso al percorso.
• AppendRoundedRectangle aggiunge un rettangolo chiuso con angoli arrotondati al percorso.

Nell'esempio seguente viene illustrato come disegnare un percorso:

PathF path = new PathF();
path.MoveTo(40, 10);
path.LineTo(70, 80);
path.LineTo(10, 50);
path.Close();
canvas.StrokeColor = Colors.Green;
canvas.StrokeSize = 6;
canvas.DrawPath(path);

In questo esempio viene disegnato un triangolo verde chiuso:

È possibile disegnare un percorso compilato con FillPath, che richiede anche un PathF argomento:

PathF path = new PathF();
path.MoveTo(40, 10);
path.LineTo(70, 80);
path.LineTo(10, 50);
canvas.FillColor = Colors.SlateBlue;
canvas.FillPath(path);

In questo esempio viene disegnato un triangolo blu ardesia pieno:

La FillColor proprietà dell'oggetto ICanvas deve essere impostata su un Color oggetto prima di richiamare il FillPath metodo .

Importante

Il FillPath metodo dispone di un overload che consente di specificare un WindingMode oggetto , che imposta l'algoritmo di riempimento utilizzato. Per altre informazioni, vedere Modalità di avvolgimento.

Disegnare un'immagine

Le immagini possono essere disegnate su un ICanvas oggetto usando il DrawImage metodo , che richiede un IImage argomento, e xwidthy, , e height argomenti , di tipo .float

L'esempio seguente illustra come caricare un'immagine e disegnarla nell'area di disegno:

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)
{
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}

In questo esempio un'immagine viene recuperata dall'assembly e caricata come flusso. Viene quindi disegnato a dimensioni effettive a (10,10):

Importante

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

Disegnare una stringa

Le stringhe possono essere disegnate su un ICanvas oggetto utilizzando uno degli DrawString overload. L'aspetto di ogni stringa può essere definito impostando le Fontproprietà , FontColore FontSize . L'allineamento delle stringhe può essere specificato da opzioni di allineamento orizzontale e verticale che eseguono l'allineamento all'interno del rettangolo di selezione della stringa.

Nota

Il rettangolo di selezione per una stringa è definito dai relativi xargomenti , y, widthe height .

Gli esempi seguenti illustrano come disegnare stringhe:

canvas.FontColor = Colors.Blue;
canvas.FontSize = 18;

canvas.Font = Font.Default;
canvas.DrawString("Text is left aligned.", 20, 20, 380, 100, HorizontalAlignment.Left, VerticalAlignment.Top);
canvas.DrawString("Text is centered.", 20, 60, 380, 100, HorizontalAlignment.Center, VerticalAlignment.Top);
canvas.DrawString("Text is right aligned.", 20, 100, 380, 100, HorizontalAlignment.Right, VerticalAlignment.Top);

canvas.Font = Font.DefaultBold;
canvas.DrawString("This text is displayed using the bold system font.", 20, 140, 350, 100, HorizontalAlignment.Left, VerticalAlignment.Top);

canvas.Font = new Font("Arial");
canvas.FontColor = Colors.Black;
canvas.SetShadow(new SizeF(6, 6), 4, Colors.Gray);
canvas.DrawString("This text has a shadow.", 20, 200, 300, 100, HorizontalAlignment.Left, VerticalAlignment.Top);

In questo esempio vengono visualizzate stringhe con aspetto e opzioni di allineamento diverse:

Nota

Gli DrawString overload consentono anche di specificare l'interlinea e il troncamento.

Per informazioni sul disegno di ombre, vedere Disegnare un'ombreggiatura.

Disegno testo con attributi

Il testo con attributi può essere disegnato su un ICanvas oggetto usando il DrawText metodo , che richiede un IAttributedText argomento, e widthxy, , e height argomenti , di tipo float. Il testo con attributi è una stringa con attributi associati per parti del testo, che in genere rappresenta i dati di stile.

Nell'esempio seguente viene illustrato come disegnare testo con attributi:

using Microsoft.Maui.Graphics.Text;
...

canvas.Font = new Font("Arial");
canvas.FontSize = 18;
canvas.FontColor = Colors.Blue;

string markdownText = @"This is *italic text*, **bold text**, __underline text__, and ***bold italic text***.";
IAttributedText attributedText = MarkdownAttributedTextReader.Read(markdownText); // Requires the Microsoft.Maui.Graphics.Text.Markdig package
canvas.DrawText(attributedText, 10, 10, 400, 400);

In questo esempio markdown viene convertito in testo con attributi e visualizzato con lo stile corretto:

Importante

Il testo con attributi di disegno richiede l'aggiunta del Microsoft.Maui.Graphics.Text.Markdig pacchetto NuGet al progetto.

Disegnare con riempimento e tratto

Gli oggetti grafici con riempimento e tratto possono essere disegnati nell'area di disegno chiamando un metodo di disegno dopo un metodo di riempimento. Ad esempio, per disegnare un rettangolo delineato, impostare le FillColor proprietà e StrokeColor sui colori, quindi chiamare il FillRectangle metodo seguito dal DrawRectangle metodo .

Nell'esempio seguente viene disegnato un cerchio pieno, con un contorno di tratto, come percorso:

float radius = Math.Min(dirtyRect.Width, dirtyRect.Height) / 4;

PathF path = new PathF();
path.AppendCircle(dirtyRect.Center.X, dirtyRect.Center.Y, radius);

canvas.StrokeColor = Colors.Blue;
canvas.StrokeSize = 10;
canvas.FillColor = Colors.Red;

canvas.FillPath(path);
canvas.DrawPath(path);

In questo esempio vengono specificati i colori di tratto e riempimento per un PathF oggetto . Il cerchio riempito viene disegnato, quindi il tratto del contorno del cerchio:

Avviso

La chiamata a un metodo di disegno prima di un metodo fill comporterà un ordine z non corretto. Il riempimento verrà disegnato sopra il tratto e il tratto non sarà visibile.

Disegnare un'ombreggiatura

Gli oggetti grafici disegnati su un ICanvas oggetto possono avere un'ombreggiatura applicata usando il SetShadow metodo , che accetta gli argomenti seguenti:

• offset, di tipo SizeF, specifica un offset per l'ombreggiatura, che rappresenta la posizione di una sorgente di luce che crea l'ombreggiatura.
• blur, di tipo float, rappresenta la quantità di sfocatura da applicare all'ombreggiatura.
• color, di tipo Color, definisce il colore dell'ombreggiatura.

Gli esempi seguenti illustrano come aggiungere ombreggiature agli oggetti riempiti:

canvas.FillColor = Colors.Red;
canvas.SetShadow(new SizeF(10, 10), 4, Colors.Grey);
canvas.FillRectangle(10, 10, 90, 100);

canvas.FillColor = Colors.Green;
canvas.SetShadow(new SizeF(10, -10), 4, Colors.Grey);
canvas.FillEllipse(110, 10, 90, 100);

canvas.FillColor = Colors.Blue;
canvas.SetShadow(new SizeF(-10, 10), 4, Colors.Grey);
canvas.FillRoundedRectangle(210, 10, 90, 100, 25);

In questi esempi, le ombre le cui sorgenti di luce si trovano in posizioni diverse vengono aggiunte agli oggetti riempiti, con quantità identiche di sfocatura:

Disegnare oggetti tratteggiati

ICanvas gli oggetti hanno una StrokeDashPattern proprietà di tipo float[]. Questa proprietà è una matrice di float valori che indicano il motivo di trattini e spazi che devono essere utilizzati durante il disegno del tratto per un oggetto. Ogni float nella matrice specifica la lunghezza di un trattino o di una distanza. Il primo elemento nella matrice specifica la lunghezza di un trattino, mentre il secondo elemento nella matrice specifica la lunghezza di un gap. Pertanto, float i valori con un valore di indice pari specificano trattini, mentre float i valori con un valore di indice dispari specificano spazi vuoti.

L'esempio seguente illustra come disegnare un quadrato tratteggiato usando un trattino normale:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.StrokeDashPattern = new float[] { 2, 2 };
canvas.DrawRectangle(10, 10, 90, 100);

In questo esempio viene disegnato un quadrato con un tratto tratteggiato regolare:

L'esempio seguente illustra come disegnare un quadrato tratteggiato usando un trattino irregolare:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.StrokeDashPattern = new float[] { 4, 4, 1, 4 };
canvas.DrawRectangle(10, 10, 90, 100);

In questo esempio viene disegnato un quadrato con un tratto tratteggiato irregolare:

Estremità della riga di controllo

Una linea ha tre parti: estremità iniziale, corpo linea e estremità finale. I limiti iniziale e finale descrivono l'inizio e la fine di una riga.

ICanvas gli oggetti hanno una StrokeLineCap proprietà di tipo LineCap, che descrive l'inizio e la fine di una riga. L'enumerazione LineCap definisce i membri seguenti:

• Butt, che rappresenta una linea con una fine quadrata, disegnata per estendersi all'endpoint esatto della linea. Questo è il valore predefinito per la proprietà StrokeLineCap.
• Round, che rappresenta una linea con una estremità arrotondata.
• Square, che rappresenta una linea con una fine quadrata, disegnata per estendersi oltre l'endpoint a una distanza uguale alla metà della larghezza della linea.

Nell'esempio seguente viene illustrato come impostare la StrokeLineCap proprietà :

canvas.StrokeSize = 10;
canvas.StrokeColor = Colors.Red;
canvas.StrokeLineCap = LineCap.Round;
canvas.DrawLine(10, 10, 110, 110);

In questo esempio la linea rossa viene arrotondata all'inizio e alla fine della riga:

Join di riga di controllo

ICanvas gli oggetti hanno una StrokeLineJoin proprietà di tipo LineJoin, che specifica il tipo di join utilizzato nei vertici di un oggetto . L'enumerazione LineJoin definisce i membri seguenti:

• Miter, che rappresenta vertici angolari che producono un angolo appuntito o ritagliato. Questo è il valore predefinito per la proprietà StrokeLineJoin.
• Round, che rappresenta vertici arrotondati che producono un arco circolare nell'angolo.
• Bevel, che rappresenta vertici smussati che producono un angolo diagonale.

Nota

Quando la StrokeLineJoin proprietà è impostata su , la MiterLimit proprietà può essere impostata Mitersu per float limitare la lunghezza del miter dei join di riga nell'oggetto .

Nell'esempio seguente viene illustrato come impostare la StrokeLineJoin proprietà :

PathF path = new PathF();
path.MoveTo(10, 10);
path.LineTo(110, 50);
path.LineTo(10, 110);

canvas.StrokeSize = 20;
canvas.StrokeColor = Colors.Blue;
canvas.StrokeLineJoin = LineJoin.Round;
canvas.DrawPath(path);

In questo esempio l'oggetto blu PathF ha arrotondato join ai relativi vertici:

Ritaglia oggetti

Gli oggetti grafici disegnati a un ICanvas oggetto possono essere ritagliati prima di disegnare, con i metodi seguenti:

• ClipPath ritaglia un oggetto in modo che solo l'area all'interno dell'area di un PathF oggetto sia visibile.
• ClipRectangle ritaglia un oggetto in modo che solo l'area all'interno dell'area di un rettangolo sia visibile. Il rettangolo può essere specificato utilizzando float argomenti o da un Rect argomento o RectF .
• SubtractFromClip ritaglia un oggetto in modo che solo l'area esterna all'area di un rettangolo sia visibile. Il rettangolo può essere specificato utilizzando float argomenti o da un Rect argomento o RectF .

L'esempio seguente illustra come usare il ClipPath metodo per ritagliare un'immagine:

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)
{
    PathF path = new PathF();
    path.AppendCircle(100, 90, 80);
    canvas.ClipPath(path);  // Must be called before DrawImage
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}

In questo esempio l'immagine viene ritagliata usando un oggetto che definisce un PathF cerchio centrato su (100.90) con un raggio pari a 80. Il risultato è che solo la parte dell'immagine all'interno del cerchio è visibile:

Importante

Il ClipPath metodo dispone di un overload che consente di specificare un WindingMode oggetto , che imposta l'algoritmo di riempimento utilizzato durante il ritaglio. Per altre informazioni, vedere Modalità di avvolgimento.

L'esempio seguente illustra come usare il SubtractFromClip metodo per ritagliare un'immagine:

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)
{
    canvas.SubtractFromClip(60, 60, 90, 90);
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}

In questo esempio l'area definita dal rettangolo specificato dagli argomenti forniti al SubtractFromClip metodo viene ritagliata dall'immagine. Il risultato è che solo le parti dell'immagine all'esterno del rettangolo sono visibili: