Fall 2014

Visual
Instructor: Saima Jawad
Programming

Graphics

BASICS
[Link]
PAINT EVENT
COLOR, FONT, PEN, BRUSH
LINES, RECTANGLES, ELLIPSES,
ARCS, POLYLINE AND POLYGON

Week-09 Outline

Visual Programming - Fall 2014

Instructor: Saima Jawad 1
 Basic Graphics
3

(0, 0)
+x
x-axis

A graphics context
is a drawing surface, +y

the drawing area of a (x, y)

form or a panel

y-axis

Graphics coordinate system. Units are measured in pixels.

Basic Graphics
4

A Graphics object manages a graphics context

Drawing actions are always like:

Graphics g;
…
// get g
[Link]()…

Visual Programming - Fall 2014

Instructor: Saima Jawad 2
 The [Link] Library
5

[Link] key

Font class
Color
FontFamily structure
Point
Graphics
Rectangle
Icon
Size
Pen

Region

Image
HatchBrush
Bitmap
LinearGradientBrush
ImageAnimator
PathGradientBrush
Brush
SolidBrush

TextureBrush

Creating Pens and Brushes

6

 To draw shape outlines; create a Pen:

Pen pen = new Pen ([Link]);
Pen pen2 = new Pen ([Link], 10);

 To draw solid shapes; create a Brush:

Brush brush = new SolidBrush( [Link]);

Visual Programming - Fall 2014

Instructor: Saima Jawad 3
 Creating Fonts
7

 To create new fonts:

Font arial = new Font(“Arial”, 24, [Link]);

Font courier = new Font(“Courier New”, 18,
[Link]);

12 overloaded Font constructors, the most common one takes three

arguments:

FontFamily, represented as a string

Size of the font, represented as an int

FontStyle, could be Plain, Italic, Bold, Regular,
Strikeout, or Underline.

The Paint Event

8

 When a control becomes visible/resized etc,

it will receive a Paint event from the run
time system

 Invalidate() generates a Paint event

as well

forexample you want to redraw graphs after you
update a computation

Visual Programming - Fall 2014

Instructor: Saima Jawad 4
 Handling the Paint Event
9

 A form has a virtual event handler OnPaint() for

the Paint event; thus one way is to override the
virtual event handler OnPaint().

protected override void OnPaint( PaintEventArgs e )

{
Graphics g = [Link];
Pen pen = new Pen( [Link] );
[Link](pen, 0, 0, 150, 150);
}

Handling the Paint Event

10

 Another possibility is to write your own event

handler to handle the Paint event.


private void myForm_Paint (object sender, PaintEventArgs e)
{
Graphics g = [Link];
Pen pen = new Pen( [Link] );
[Link](pen, 0, 0, 150, 150);
}

Visual Programming - Fall 2014

Instructor: Saima Jawad 5
 Using Color
11

 The easiest way to specify color is to use the system defined

color, e.g., [Link], [Link]

 Another way is to call the [Link]() method:

Color itsRed = [Link](255, 0, 0);
Color itsHtRed = [Link](100, 255, 0, 0);

Constants in structure RGB value Constants in structure RGB value

Color (all are Color (all are
public static) public static)
Orange 255, 200, 0 White 255, 255, 255

Pink 255, 175, 175 Gray 128, 128, 128

Cyan 0, 255, 255 DarkGray 64, 64, 64
Magenta 255, 0, 255 Red 255, 0, 0
Yellow 255, 255, 0 Green 0, 255, 0
Black 0, 0, 0 Blue 0, 0, 255
Color structure static constants and their RGB values

Color Methods and Properties

12

Structure Color Description

methods and
properties
Common Methods

static FromArgb Creates a color based on red, green and blue values expressed as ints
from 0 to 255. Overloaded version allows specification of alpha, red,
green and blue values.
static FromName Creates a color from a name, passed as a string.
Common Properties
A byte between 0 and 255, representing the alpha component.
R byte between 0 and 255, representing the red component.
G byte between 0 and 255, representing the green component.

B byte between 0 and 255, representing the blue component.

Color structure members

Visual Programming - Fall 2014

Instructor: Saima Jawad 6
 Set Color Example
13

Set Color Example

14

Color frontColor = [Link](100, 0, 0, 255);

protected override void OnPaint( PaintEventArgs e)
{
Graphics g = [Link];
SolidBrush brush = new SolidBrush([Link]);
[Link] = frontColor;
[Link](brush, 50, 30, 200, 100);
}

Visual Programming - Fall 2014

Instructor: Saima Jawad 7
 Set Color Example
15

void setColorButton_Click ( object sender, EventArgs e)

{
frontColor = [Link](
Convert.ToInt32([Link]),
Convert.ToInt32 ([Link]),
Convert.ToInt32 ([Link]),
Convert.ToInt32([Link]) );
Invalidate();
}

Drawing Lines, Rectangles and Ovals

16

 Graphics Methods for drawing

Outline shapes take Pen

Solid shapes take Brush

int argument represent coordinates

Visual Programming - Fall 2014

Instructor: Saima Jawad 8
 Drawing Lines, Rectangles and Ellipses
17

Graphics Drawing Methods and Descriptions.

DrawLine( Pen p, int x1, int y1, int x2, int y2 )
Draws a line from (x1, y1) to (x2, y2). The Pen determines the color, style and width of the
line.
DrawRectangle( Pen p, int x, int y, int width, int height )
Draws a rectangle of the specified width and height. The top-left corner of the rectangle is at point
(x, y). The Pen determines the color, style, and border width of the rectangle.

FillRectangle( Brush b, int x, int y, int width, int height )

Draws a solid rectangle of the specified width and height. The top-left corner of the rectangle is at
point (x, y). The Brush determines the fill pattern inside the rectangle.

DrawEllipse( Pen p, int x, int y, int width, int height )

Draws an ellipse inside a rectangle. The width and height of the rectangle are as specified, and its
top-left corner is at point (x, y). The Pen determines the color, style and border width of the
ellipse.

FillEllipse( Brush b, int x, int y, int width, int height )

Draws a filled ellipse inside a rectangle. The width and height of the rectangle are as specified,
and its top-left corner is at point (x, y). The Brush determines the pattern inside the ellipse.

Drawing an Ellipse
18

Ellipse bounded by a Rectangle

(x, y)

height

width

DrawEllipse( Pen p, int x, int y, int width, int height );

Visual Programming - Fall 2014

Instructor: Saima Jawad 9
 Example: Drawing Shapes

Example: Drawing Shapes

protected override void OnPaint( PaintEventArgs e )

{
// get graphics object
Graphics g = [Link];
SolidBrush brush = new SolidBrush( [Link] );
Pen pen = new Pen( [Link] );
// create filled rectangle
[Link]( brush, 90, 30, 150, 90 );
// draw lines to connect rectangles
[Link]( pen, 90, 30, 110, 40 );
[Link]( pen, 90, 120, 110, 130 );
[Link]( pen, 240, 30, 260, 40 );
[Link]( pen, 240, 120, 260, 130 );

Visual Programming - Fall 2014

Instructor: Saima Jawad 10
 Example: Drawing Shapes

// draw top rectangle

[Link]( pen, 110, 40, 150, 90 );
// set brush to red
[Link] = [Link];
// draw base Ellipse
[Link]( brush, 280, 75, 100, 50 );
// draw connecting lines
[Link]( pen, 380, 55, 380, 100 );
[Link]( pen, 280, 55, 280, 100 );
// draw Ellipse outline
[Link]( pen, 280, 30, 100, 50 );
} // end method OnPaint

Lines with different Pen Styles

22

Pen coloredPen = new Pen([Link]);

// draw a green line
[Link](coloredPen, 50, 30, 250, 150);

// draw a dashed yellow line

[Link] = 4;
[Link] = [Link];
[Link] = [Link];
[Link](coloredPen, 50, 30, 195, 150);

Visual Programming - Fall 2014

Instructor: Saima Jawad 11
 Using Textured Brush
23

Bitmap texBitmap = new

Bitmap("C:\\Images\\[Link]");

// create textured brush and display textured rectangle

TextureBrush texBrush = new
TextureBrush(texBitmap);
[Link](texBrush, 0, 50, 250, 200);

Drawing Arcs
24

Positive Arc Negative Arc

270° 270°

180° 0° 180° 0°

90° 90°

Properties of an Arc
 Starting angle
 Arc angle
Positive and negative arc angles.
 Bounding rectangle

Visual Programming - Fall 2014

Instructor: Saima Jawad 12
 Drawing Arcs
25

Graphics Methods And Descriptions

DrawArc( Pen p, int x, int y, int width, int height,
int startAngle, int sweepAngle )
Draws an arc of an ellipse, beginning from angle startAngle (in degrees) and sweeping
sweepAngle degrees. The ellipse is defined by a bounding rectangle of width w, height h and
upper-left corner (x,y). The Pen determines the color, border width and style of the arc.

DrawPie( Pen p, int x, int y, int width, int height,

int startAngle, int sweepAngle )
Draws a pie section of an ellipse, beginning from angle startAngle (in degrees) and sweeping
sweepAngle degrees. The ellipse is defined by a bounding rectangle of width w, height h and
upper-left corner (x,y). The Pen determines the color, border width and style of the arc.

FillPie( Brush b, int x, int y, int width, int height,

int startAngle, int sweepAngle )
Functions similarly to DrawPie, except draws a solid arc (i.e., a sector). The Brush determines
the fill pattern for the solid arc.

Graphics methods for drawing arcs

Drawing Pie and Arc

26

SolidBrush solidBrush = new SolidBrush([Link]);

Pen coloredPen = new Pen([Link]);

// draw Pie and Arc

[Link] = 2;
[Link](coloredPen, 40, 30, 75, 100, 0, 90);
[Link](coloredPen, 40, 30, 75, 100, 90, 90);
[Link](solidBrush, 40, 30, 75, 100, 180, 90);

// clearing the background with a color

[Link]([Link]);

Visual Programming - Fall 2014

Instructor: Saima Jawad 13
 Drawing Polylines and Polygons
27

 DrawLines (Pen, Point [])

 DrawPolygon (Pen, Point[])
 FillPolygon (Pen, Point[])

Point [] pointsArray= {new Point(0,0),new

Point(100,0), new Point(100,500), new Point(0,200)};

[Link](coloredPen, pointsArray);
[Link](coloredPen, pointsArray);
[Link](solidBrush, pointsArray);

Visual Programming - Fall 2014

Instructor: Saima Jawad 14
 // Using ComboBox to select shape to draw

// get selected index, draw shape

private void imageComboBox_SelectedIndexChanged(
object sender, [Link] e )
{
// create graphics object, pen and brush
Graphics myGraphics = [Link]();

// create Pen using color DarkRed

Pen myPen = new Pen( [Link] );

// create SolidBrush using color DarkRed

SolidBrush mySolidBrush =
new SolidBrush( [Link] );

// clear drawing area setting it to color White

[Link]( [Link] );

// find index, draw proper shape

switch ( [Link] )
{
case 0: // case circle is selected
[Link](
myPen, 50, 50, 150, 150 );
break;
case 1: // case rectangle is selected
[Link](
myPen, 50, 50, 150, 150 );
break;
case 2: // case ellipse is selected
[Link](
myPen, 50, 85, 150, 115 );
break;
case 3: // case pie is selected
[Link](
myPen, 50, 50, 150, 150, 0, 45 );
break;
case 4: // case filled circle is selected
[Link](
mySolidBrush, 50, 50, 150, 150 );
break;
case 5: // case filled rectangle is selected
[Link](
mySolidBrush, 50, 50, 150, 150 );
break;
case 6: // case filled ellipse is selected
[Link](
mySolidBrush, 50, 85, 150, 115 );
break;

Visual Programming - Fall 2014

Instructor: Saima Jawad 15
 case 7: // case filled pie is selected
[Link](
mySolidBrush, 50, 50, 150, 150, 0, 45 );
break;

} // end switch
} // end method imageComboBox_SelectedIndexChanged

Visual Programming - Fall 2014

Instructor: Saima Jawad 16