Simple Graphics.

• Font
• FontFamily
• Graphics
• Icon
• Pen
• Region
• Image
• Brush
• SolidBrush
• TextureBrush

• Color
• Point
• Rectangle
• Size

The GDI+ coordinate system is shown on the picture below

GDI+ coordinate system

Colors

AliceBlue
AntiqueWhite
Aqua
Aquamarine
Azure
Beige
Bisque
Black
BlanchedAlmond
Blue
BlueViolet
Brown
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Crimson
Cyan
DarkBlue
DarkCyan
DarkGoldenrod
DarkGray
DarkGreen
DarkKhaki
DarkMagenta
DarkOliveGreen

DarkOrange
DarkOrchid
DarkRed
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBlue
DimGray
DodgerBlue
Firebrick
FloralWhite
ForestGreen
Fuchsia
Gainsboro
GhostWhite
Gold
Goldenrod
Gray
Green
GreenYellow
Honeydew
HotPink
IndianRed
Indigo
Ivory

Khaki
Lavender
LavenderBlush
LawnGreen
LemonChiffon
LightBlue
LightCoral
LightCyan
LightGoldenrodYellow
LightGray
LightGreen
LightPink
LightSalmon
LightSeaGreen
LightSkyBlue
LightSlateGray
LightSteelBlue
LightYellow
Lime
LimeGreen
Linen
Magenta
Maroon
MediumAquamarine
MediumBlue
MediumOrchid
MediumPurple
MediumSeaGreen
MediumSlateBlue

MediumSpringGreen
MediumTurquoise
MediumVioletRed
MidnightBlue
MintCream
MistyRose
Moccasin
NavajoWhite
Navy
OldLace
Olive
OliveDrab
Orange
OrangeRed
Orchid
PaleGoldenrod
PaleGreen
PaleTurquoise
PaleVioletRed
PapayaWhip
PeachPuff
Peru
Pink
Plum
PowderBlue
Purple
Red
RosyBrown
RoyalBlue

SaddleBrown
Salmon
SandyBrown
SeaGreen
SeaShell
Sienna
Silver
SkyBlue
SlateBlue
SlateGray
Snow
SpringGreen
SteelBlue
Tan
Teal
Thistle
Tomato
Transparent
Turquoise
Violet
Wheat
White
WhiteSmoke
Yellow
YellowGreen

 my_color = Color::FromArgb(100, 0, 255, 0); 

 my_color = Color::FromName(S"White"); 

 my_color = Color::FromKnownColor(Color::Khaki); 

• A - byte value of alpha component
• R - byte value of red component
• G - byte value of green component
• B - byte value of blue component

We can easily change colors of the form from inside the program, for example, in the constructor of the Form object. To illustrate this, let's get back to our first project and add the lines

this->ForeColor = Color::FromArgb(100, 0, 0, 255);
this->BackColor = Color::FromName( S"White" );

Form1(void)
{
    this->ForeColor = Color::FromArgb(100, 0, 0, 255);
    this->BackColor = Color::FromName( S"White" );
    InitializeComponent();
}

Simple drawing

Graphics *gObj = e->Graphics;

If we want to create a event-driven graphics, then we need to associate the drawing with events like button clicks, or timer ticks, which do not have their own graphics context. In order to draw, we need to create an instance of the Graphics class by invoking the CreateGraphics() method. For example, inside a button click function it can be done like

Graphics *gObj = this->CreateGraphics();

Once we created an object of the Graphics type we can start using its methods to draw simple pictures. Some of the methods are

Method	Description
Clear(Color color)	Clears the entire drawing surface and fills it with the specified background color. gObj->Clear( this->BackColor );
DrawLine(*pen, x1, y1, x2, y2)	Draws a line from (x1, y1) to (x2, y2). The pen parameter determines the color, style, and width of the line. Pen *p = new Pen( Color::Blue ); gObj->DrawLine(p, 0, 0, 100, 100); Overloaded
DrawRectangle(*pen, x, y, w, h)	Draws a rectangle of the specified width w and height h. The top-left corner of the rectangle is located at the point (x, y). The pen parameter determines the color, style, and width of the rectangle. gObj->DrawRectangle(p, 0, 0, 200, 100); Overloaded.
DrawEllipse(*pen, x, y, w, h)	Draws an ellipse inside the rectangle specified by the top-left corner (x, y), the width w, and the height h. The pen argument determines the color, style, and width of the ellipse. gObj->DrawEllipse(p, 0, 0, 200, 100); Overloaded
DrawArc(*pen, x, y, w, h, start, sweep)	Draws an arc representing a portion of an ellipse specified by a pair of coordinates, a width, and a height. The arc starts at the angle start (angle in degrees measured clockwise from the x-axis to the starting point of the arc) and the size of the arc is sweep (angle in degrees measured clockwise from the startAngle parameter to ending point of the arc). gObj->DrawArc(p, 0, 0, 100, 100, 90, 30); Overloaded
DrawPie(*pen, x, y, w, h, start, sweep)	Draws a pie shape defined by an ellipse specified by a coordinate pair, a width, and a height and two radial lines. gObj->DrawPie(p, 0, 0, 100, 100, 90, 30); Overloaded
DrawPolygon(*pen, Point[])	Draws a polygon. The coordinates of each point are specified in an array of Point objects. This method draws a closed polygon, even if the last point is different from the first one. Pen *pen = new Pen( Color::DarkBlue, 7); Point points[] = new Point[4]; points[0].X = 50; points[0].Y = 0; points[1].X = 100; points[1].Y = 50; points[2].X = 50; points[2].Y = 100; points[3].X = 0; points[3].Y = 50; gObj->DrawPolygon(pen, points); Overloaded
FillRectangle(*brush, x, y, width, heigth)	Draws a solid rectangle of the given width and height. The top-left corner of the rectangle is located at the point (x, y). The brush attribute defines the fill pattern inside the rectangle. Brush *brush = new Brush( Color::FromArgb(128, 128, 128, 128) ); gObj->FillRectangle(brush, 10, 10, 150, 40); Overloaded
FillEllips(*brush, x, y, width, heigth)	Draws a filled ellipse inside the given rectangle. Thebrush argument determines the fill pattern inside the ellipse. gObj->FillEllipse(brush, 10, 10, 150, 40); Overloaded
FillPie(*brush, x, y, w, h, start, sweep)	Fills the interior of a pie section defined by an ellipse specified by a pair of coordinates, a width, and a height and two radial lines. gObj->FillPie(brush, 0, 0, 200, 200, 0, -90); Overloaded
FillPolygon(*brush, Point[])	Draws a closed solid polygon. The coordinates of each point are specified in an array of Points. Thebrush argument determines the fill pattern inside the polygon. Brush *brush = new SolidBrush( Color::Blue ); Point points[] = new Point[4]; points[0].X = 50; points[0].Y = 0; points[1].X = 100; points[1].Y = 50; points[2].X = 50; points[2].Y = 100; points[3].X = 0; points[3].Y = 50; gObj->FillPolygon(brush, points); Overloaded

Note that all angles are measured clockwise; that is, exactly the opposite to the usual trigonometry angles.

Positive and negative angles

Pens and brushes

The Pen class defines an object used to draw lines and curves. A Pen object draws a line of specified width and style. Use the DashStyle property to draw several varieties of dashed lines. The line drawn by a Pen object can be filled in a variety of fill styles, including solid colors and textures. The fill style depends on brush or texture that is used as the fill object.

The list of some of the public attributes of the Pen class is

Attribute	Description
Alignment	Gets or sets the alignment for this Pen object.
Brush	Gets or sets the Brush object that determines attributes of this Pen object.
Color	Gets or sets the color of this Pen object.
CustomEndCap	Gets or sets a custom cap to use at the end of lines drawn with this Pen object.
CustomStartCap	Gets or sets a custom cap to use at the beginning of lines drawn with this Pen object.
DashCap	Gets or sets the cap style used at the end of the dashes that make up dashed lines drawn with this Pen object
DashOffset	Gets or sets the distance from the start of a line to the beginning of a dash pattern
DashPattern	Gets or sets an array of custom dashes and spaces.
DashStyle	Gets or sets the style used for dashed lines drawn with this Pen object
EndCap	Gets or sets the cap style used at the end of lines drawn with this Pen object
PenType	Gets the style of lines drawn with this Pen object.
StartCap	Gets or sets the cap style used at the beginning of lines drawn with this Pen object
Width	Gets or sets the width of this Pen object.

This class provides several constructors that allow us to set Color, Width, and/or Brush attributes of the new Pen object during the creation. The simplest constructor, takes only the color of the new pen:

Pen *pen = new Pen( Color::FromArgb(100, 0, 0, 100) );

Pen *pen = new Pen( Color::Blue, 3 );

Pen *pen = new Pen( brush, 12);

Thus, we can specify in the constructor the color and the thickness of the lines we will draw using a pen. To control the style of the lines, we need to use property DashStyle. A DashStyle is an enumeration that represents the style used for dashed lines drawn with this Pen object. Possible values are

Value	Description
Dash	Specifies a line consisting of dashes
DashDot	Specifies a line consisting of a repeating pattern of dash-dot
DashDotDot	Specifies a line consisting of a repeating pattern of dash-dot-dot
Dot	Specifies a line consisting of dots
Solid	Specifies a solid line (the default value).
Custom	Specifies a user-defined custom dash style. This value specifies that a custom pattern of dashes and spaces, defined by the DashPattern property, make up lines drawn with this Pen object. If the value of this property is DashStyle::Custom and the value of the DashPattern property is a null reference, the pen draws solid lines.

Please note that this enumeration is defined in the System::Drawing::Drawing2D namespace. Here is an example that shows how to draw a dark blue rectangle with thick dotted sides:

Pen *dot_pen = new Pen( Color::DarkBlue, 4);
dot_pen->DashStyle = DashStyle::Dot;
gObj->DrawRectangle(dot_pen, 10, 10, 200, 200);

The Brush class an abstract base class and cannot be instantiated. To create a brush object, we need to use classes derived from Brush, such as

• SolidBrush - fills a region with one color defined by a Color object,
• TextureBrush - fills a region by repeating a specified Image across the surface,
• HatchBrush - uses a rectangular brush to fill a region with a pattern (The pattern is defined by a member of the HatchStyle enumeration, a foreground color and a background color.), and
• LinearGradientBrush - fills a region with gradient blend of one color into another. Linear gradients are defined along a line. They can be specified by the two colors, the angle of the gradient and either the width of a rectangular or two points.

Here are several examples that illustrate how we can use the different types of brushes to fill regions:

Brush *brush = new SolidBrush( Color::LightGreen );
gObj->FillPolygon(brush, points);

Brush *hbrush = new HatchBrush( HatchStyle::ZigZag, Color::Navy, Color::Cyan );
gObj->FillPolygon(hbrush, points);

Bitmap *texture = new Bitmap(10, 10);                 // create a bitmap for future texture
Graphics *temp_gObj = Graphics::FromImage( texture ); // create a graphics object to fill the bitmap
SolidBrush *brush = new SolidBrush( Color::LightGreen );
temp_gObj->FillRectangle(brush, 0, 0, 10, 10);
brush->Color = Color::Blue;
temp_gObj->FillRectangle(brush, 2, 2, 7, 6);
brush->Color = Color::Navy;
temp_gObj->FillRectangle(brush, 1, 1, 4, 2);
Brush *tbrush = new TextureBrush(texture);    // create a texture brush
gObj->FillPolygon(tbrush, points);

Brush *lgbrush = new LinearGradientBrush(Point(0, 50), Point(100, 50),
                                         Color::DarkBlue, Color::LightGreen );
gObj->FillPolygon(lgbrush, points);

Drawing strings

FontFamily *family = new FontFamily(S"Arial");

Drawing::Font *fnt = new Drawing::Font(FontFamily::GenericSansSerif, 32);

Drawing::Font *fnt = new Drawing::Font(S"Times New Roman", 32);

Drawing::Font *fnt = new Drawing::Font(FontFamily::GenericSansSerif, 32,
                                       FontStyle::Italic);

Drawing::Font *fnt;
fnt = new Drawing::Font(FontFamily::GenericSansSerif, 32,
                        static_cast<FontStyle>(FontStyle::Bold + FontStyle::Underline));

Drawing::Font *fnt = new Drawing::Font(S"Courier", 32, FontStyle::Italic);

Drawing::Font *fnt = new Drawing::Font(FontFamily::GenericSansSerif, 2,
                                       FontStyle::Italic, GraphicsUnit::Inch);

Now, when we know how to create a new Font object, we are ready to draw strings. To print a string in a graphics context, we should use method DrawString() of the Graphics object. This method is overloaded and has many flavors. Here we describe only some of them. The complete information can be found in the Visual Studio documentation.

• DrawString(s, font, brush, x, y)
  where the parameters are
  • s - String to draw.
  • font - Font object that defines the text format of the string.
  • brush - Brush object that determines the color and texture of the drawn text.
  • x - x coordinate of the upper-left corner of the drawn text.
  • y - y coordinate of the upper-left corner of the drawn text.
  For example, we can print a string "Hello" using a big Times font using:

  Drawing::Font *fnt = new Drawing::Font(S"Times New Roman", 14, FontStyle::Italic);

Drawing::Font *fnt = new Drawing::Font(S"Times New Roman", 0.5, FontStyle::Bold,
                                       GraphicsUnit::Inch);
gObj->DrawRectangle(pen, 10, 10, 50, 200);
gObj->DrawString(S"Hello", fnt, brush, RectangleF(10, 10, 50, 200));
 

Working with images

The Image class is a basic class that provides functionality for Bitmap and Metafile descended classes. We will not discuss this class in details, just mention a couple of static method of the class. The first method, we would like to discuss is FromFile(). This method takes a String containing an image file name as a parameter and creates a new object of the Image class. For example, the cimplest code that displays an image stored in a file robot.gif will look like

Graphics *gObj = this->CreateGraphics();
Image *img = Image::FromFile( S"robot.gif" );
gObj->DrawImage(img, 5, 5);

In the example above we have seen the simplest form of the DrawImage() method of the Graphics class. The easiest form of the method takes only three arguments - the image object to draw ant the coordinates of the top-left corner of the rectangle where the image should appear. Another version of the DrawImage() method takes the image to draw, the coordinates of the top-left corner, and the size of the rectangle to fit the image into:

DrawImage( Image *image, int x, int y, int width, int height);

gObj->DrawImage(img, 10, 5, img->Width/2, img->Height/2);

DrawImage( Image *image, Point dest[] );

Graphics *gObj = this->CreateGraphics();
Image *img = Image::FromFile( S"img/bluedrag.gif" );
Point dest[] = { Point(40, 0), Point(80, 40), Point(0, 40) };
gObj->DrawImage(img, dest);

Jumping ball example

Second, add the following lines to the private section of the Form object definition:

Graphics   *gObj;
SolidBrush *brush;   // brush to display the ball
SolidBrush *erasor;  // brush to erase the ball
int         x, y,    // the current position of the ball
            dx, dy;  // the direction the ball is heading
Random     *rnd_gen; // we will generate all random numbers using this instance of the Random class

Now, click twice to the Start button to get into the button1_Click() method of the form. Here we need to create all the graphical objects and initialize the current position of the ball and its direction:

gObj = GraphPanel->CreateGraphics();
brush = new SolidBrush( Color::Red );
erasor = new SolidBrush( GraphPanel->BackColor );
rnd_gen = new Random( DateTime::Now.Ticks );

gObj->Clear( GraphPanel->BackColor );

x = rnd_gen->Next() % (GraphPanel->Width - 10);   // 10 - is the size of the ball
y = rnd_gen->Next() % (GraphPanel->Height - 10);
dx = 1 + rnd_gen->Next()%4;
dy = 1 + rnd_gen->Next()%2;

When the program starts, it will initialize all the needed variables and then it will repeat the same steps:

• erase the ball
• change the position of the ball
• draw the ball

NextStepTimer->Enabled = true;

Click twice on the timer and add the following code to the timer1_Tick() method:

// erase the ball
gObj->FillEllipse(erasor, x, y, 10, 10);

// change the X coordinates
x += dx;
if( x>GraphPanel->Width-10 || x<0 ){
    dx = -dx;
    x += 2*dx;
  // make the ball more transparent
    int alpha = brush->Color.A;
    brush->Color = Color::FromArgb(alpha>5?alpha-5:0, brush->Color);
}

// change the Y coordinates
y += dy;
if( y>GraphPanel->Height-10 || y<0 ){
    dy = -dy;
    y += 2*dy;
  // make the ball more transparent
    int alpha = brush->Color.A;
    brush->Color = Color::FromArgb(alpha>5?alpha-5:0, brush->Color);
}

// draw the ball in the new position 
gObj->FillEllipse(brush, x, y, 10, 10);

Homework assignment

• Graphics
• Point
• Color
• Rectangle
• RectangleF
• Pen
• Brush classes
• Font
• FontFamily
• FontStyle
• DashStyle
• Image
• Bitmap