C# - Come si fa: esempi di grafica

Disegnare una immagine in una picture

Data una picture, è possibile sovrapporre in essa una immagine.
L'immagine può essere:

- traslata in qualsiasi punto;
- ruotata di un qualsiasi angolo;
- cambiata di scala.

Si hanno a disposizione i metodi:

- ResetTransform() annulla le eventuali impostazioni precedenti.
- TranslateTransform() imposta l'origine in un nuovo punto.
- RotateTransform() imposta un angolo di rotazione.
- ScaleTransform() imposta una trasformazione di scala.

Per esempio, sia data la picture picMappa; nell'evento picMappa_Paint(object sender, PaintEventArgs e) andiamo ad utilizzare l'oggetto e e i metodi sopra descritti.
Si voglia disegnare sopra la picture, l'immagine bitmap b1.

   private void picMappa_Paint(object sender, PaintEventArgs e)
   {
       // Immagine sopra la mappa
       Bitmap b1 = new Bitmap(@"c:\immagine.png");
       e.Graphics.ResetTransform();
       // Imposta l'origine nel punto X=300 e Y=400
       e.Graphics.TranslateTransform(300, 400);
       // Imposta l'angolo di rotazione a 30°
       e.Graphics.RotateTransform(30);
       // Disegna la bitmap nelle coordinate (0,0) rispetto al nuovo origine
       // e con dimensione x=100 e Y= 50
       e.Graphics.DrawImage(b1, 0, 0, 100, 50);
    }

Linee, poligoni, cerchi, stringhe

Aggiungere il codice degli esempi sotto nell’evento Paint().
Se necessario, provvedere al Refresh del form, forzandolo nell’evento Resize().

   private void Form1_Resize(object sender, EventArgs e)
   {
       this.Refresh();
   }

Disegnare una linea

//Costruisco un oggetto Pen impostando il colore nero, spessore 2

Pen pen = new Pen(Color.Black, 2);

//Disegno la diagonale

e.Graphics.DrawLine(pen, 0, 0, this.ClientSize.Width, this.ClientSize.Height);

Disegnare un rettangolo: bordo e sfondo

Per ottenere un bordo uniforme, disegnare prima lo sfondo.

// Sfondo del rettangolo

SolidBrush sbr = new SolidBrush(Color.Red);

e.Graphics.FillRectangle(sbr, 10, 10, 50, 20);

// Rettagolo

Pen pen = new Pen(Color.Black, 3);

e.Graphics.DrawRectangle(pen, 10, 10, 50, 20);

Disegnare un poligono: bordo e sfondo

Per ottenere un bordo uniforme, disegnare prima lo sfondo.

// Poligono

Point[] poligonoI = { new Point(10, 0), new Point(20, 10),

new Point(10, 20), new Point(0, 10) };

// In modo analogo è possibile definire un poligono con punti float

PointF[] ...

// Sfondo del poligono

SolidBrush sbr = new SolidBrush(Color.Red);

e.Graphics.FillPolygon(sbr, poligonoI);

// Poligono con punti int

Pen pen = new Pen(Color.Black, 1);

e.Graphics.DrawPolygon(pen, poligonoI);

Disegnare un’ellisse o un cerchio: bordo e sfondo

Per ottenere un bordo uniforme, disegnare prima lo sfondo.

// Sfondo dell'ellisse

SolidBrush sbr = new SolidBrush(Color.Red);

e.Graphics.FillEllipse(sbr, 10, 10, 50, 20);

// Ellisse

Pen pen = new Pen(Color.Black, 1);

e.Graphics.DrawEllipse(pen, 10, 10, 50, 20);

Disegnare una stringa

// Crea la stringa

String drawString = "Sample Text";

// Crea font e brush

Font drawFont = new Font("Arial", 16);

SolidBrush drawBrush = new SolidBrush(Color.Black);

// Crea il punto nell'angolo alto a sinistra

PointF drawPoint = new PointF(0.0F, 0.0F);

// Disegna la stringa

e.Graphics.DrawString(drawString, drawFont, drawBrush, drawPoint);

Label con forma non rettangolare

Ecco un esempio di come disegnare una Label con una forma non rettangolare, in questo caso una ellisse.
La forma non rettangolare è visibile in fase di esecuzione e per meglio evidenziarla è disegnata con lo sfondo rosso e confrontata con un'altra Label (non alterata).
Sono sufficienti solo tre righe di codice:

   // Necessita di using System.Drawing.Drawing2D.
   GraphicsPath path = new GraphicsPath();
   path.AddEllipse(0, 0, label1.Width, label1.Height);
   label1.Region = new Region(path);

Questa è la Label come appare.

Ridurre le dimensioni di una immagine

L'esempio seguente permette di ridurre le dimensioni di una immagine jpeg e di conseguenza anche lo spazio che occupa in termini di byte.
Il programma ha solo due Button:

Il primo carica l'immagine da ridurre nella PictureBox di sinistra. Il nome del file è "Immagine1.jpg" ed è contenuto nella stessa cartella dell'eseguibile.
Il secondo riduce l'immagine, la carica nella PictureBox di destra e infine la salva con nome "Immagine2.jpg", sempre nella stessa cartella dell'eseguibile.

Il programma esegue lo 'Stretch' delle due immagini in modo da vederle interamente nelle PictureBox (non mantenendone le corrette dimensioni).
Sono necessari gli spazi dei nomi seguenti.

using System.Drawing.Drawing2D;

using System.Drawing.Imaging;

Questa è la form del programma.

Il codice dei due bottoni sopra descritti è il seguente.

private void btnLoadImage_Click(object sender, EventArgs e)

{

// Mostra l'immagine originale.

picImage1.SizeMode = PictureBoxSizeMode.StretchImage;

picImage1.Load("Immagine1.jpg");

}

private void btnResizeImage_Click(object sender, EventArgs e)

{

// Ridimensiona l'immagine.

Image newImage = ResizeImage(Image.FromFile("Immagine1.jpg"), 400, 300);

// Mostra l'immagine ridotta.

picImage2.SizeMode = PictureBoxSizeMode.StretchImage;

picImage2.Image = newImage;

// Salva l'immagine ridotta.

newImage.Save("Immagine2.jpg", ImageFormat.Jpeg);

}

La dimensione dell'immagine ridotta è 400x300 pixel. È facilmente modificabile impostandone valori differenti nella seconda riga del codice precedente.
La funzione che esegue il ridimensionamento è ResizeImage(), trovata nella rete.

/// <summary>

/// Resize the image to the specified width and height.

/// </summary>

/// <param name="image">The image to resize.</param>

/// <param name="width">The width to resize to.</param>

/// <param name="height">The height to resize to.</param>

/// <returns>The resized image.</returns>

public static Bitmap ResizeImage(Image image, int width, int height)

{

var destRect = new Rectangle(0, 0, width, height);

var destImage = new Bitmap(width, height);

destImage.SetResolution(image.HorizontalResolution, image.VerticalResolution);

using (var graphics = Graphics.FromImage(destImage))

{

graphics.CompositingMode = CompositingMode.SourceCopy;

graphics.CompositingQuality = CompositingQuality.HighQuality;

graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;

graphics.SmoothingMode = SmoothingMode.HighQuality;

graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;

using (var wrapMode = new ImageAttributes())

{

wrapMode.SetWrapMode(WrapMode.TileFlipXY);

graphics.DrawImage(image, destRect, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, wrapMode);

}

return destImage;

}

Ritaglio di una immagine (Crop)

L'esempio seguente permette di tagliare una immagine jpeg e di conseguenza riduce anche lo spazio che occupa in termini di byte. L'operazione è detta in inglese 'crop'.
Il taglio ha una forma rettangolare: il rettangono è quindi una parte della fotografia iniziale ed è in essa contenuto.
Il programma ha solo due Button:

Il primo carica l'immagine da tagliare nella PictureBox di sinistra. Il nome del file è "Immagine1.jpg" ed è contenuto nella stessa cartella dell'eseguibile.
Il secondo taglia l'immagine, la carica nella PictureBox di destra e infine la salva con nome "Immagine2.jpg", sempre nella stessa cartella dell'eseguibile.

Il programma esegue lo 'Stretch' delle due immagini in modo da vederle interamente nelle PictureBox (non mantenendone le corrette dimensioni).
Sono necessari gli spazi dei nomi seguenti.

using System.Drawing.Drawing2D;

using System.Drawing.Imaging;

Questa è la form del programma.

Il codice dei due bottoni sopra descritti è il seguente.

private void btnLoadImage_Click(object sender, EventArgs e)

{

// Mostra l'immagine originale.

picImage1.SizeMode = PictureBoxSizeMode.StretchImage;

picImage1.Load("Immagine1.jpg");

}

private void btnCropImage_Click(object sender, EventArgs e)

{

// Taglia l'immagine.

Image newImage = CropImage(Image.FromFile("Immagine1.jpg"), 300, 200, 300, 225);

// Mostra l'immagine ridotta.

picImage2.SizeMode = PictureBoxSizeMode.StretchImage;

picImage2.Image = newImage;

// Salva l'immagine ridotta.

newImage.Save("Immagine2.jpg", ImageFormat.Jpeg);

}

La dimensione dell'immagine tagliata è 300x225 pixel, partendo dalle coordinate X = 300 e Y = 200. È facilmente modificabile impostandone valori differenti nella seconda riga del codice precedente. Come di vede, il taglio necessita di quattro parametri: le coordinate X e Y dell'angolo in alto a sinistra, la larghezza e l'altezza dell'immagine.
La funzione che esegue il taglio è CropImage().

/// <summary>

/// Crop the image to the specified rectangle area.

/// </summary>

/// <param name="image">The image to crop.</param>

/// <param name="x">The x-coordinate to crop to.</param>

/// <param name="y">The y-coordinate to crop to.</param>

/// <param name="width">The width to crop to.</param>

/// <param name="height">The height to crop to.</param>

/// <returns>The cropped image.</returns>

public static Bitmap CropImage(Image image, int x, int y, int width, int height)

{

var destRect = new Rectangle(0, 0, width, height);

var destImage = new Bitmap(width, height);

destImage.SetResolution(image.HorizontalResolution, image.VerticalResolution);

using (var graphics = Graphics.FromImage(destImage))

{

graphics.DrawImage(image, destRect, x, y, width, height, GraphicsUnit.Pixel);

}

return destImage;

}