1

Chapter 26 D&D – Graphics

Outline26.1 Introduction26.3 Graphics Contexts and Graphics Objects26.4 Color Control26.5 Font Control26.6 Drawing Lines, Rectangles and Ovals26.8 Drawing Polygons and Polylines26.11 Loading, Displaying and Scaling Images26.12 Animating a Series of Images

2

26.1 Introduction

• Graphical Device Interface– Two dimensional vector graphics

• Drawing capabilities– Pen or Brush object

– Structure Color

– Positioning in x,y coordinate system

3

26.2 Introduction

Fig. 26.1 System.Drawing namespace’s classes and structures.

structure

class

keySystem.Drawing

Font

FontFamily

Graphics

Icon

Pen

Region

SolidBrush

TextureBrush

Image

Brush

HatchBrush

LinearGradientBrush

PathGradientBrush

SolidBrush

TextureBrush

Color

Point

Rectangle

Size

4

26.3 Graphics Contexts and Graphics Objects

Fig. 26.2 GDI+ coordinate system. Units are measured in pixels.

x-axis

y-axis

(0, 0)+x

+y(x, y)

5

26.3 Graphics Contexts and Graphics Objects

• Graphics context– Drawing surface

• Graphics object – control how information is drawn

– Virtual OnPaint event handler

– Method Invalidate• Refreshes and repaints

6

26.4 Color Control

• Enhancing program appearance– Structure Color

• ARGB values

• Value range from 0 to 255

Constants in structure Color (all are public static)

RGB value Constants in structure Color (all are public static)

RGB value

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

Fig. 17.3 Color structure static constants and their RGB values.

Run UsingColors.cs

ColorDialog

// Create ColorDialog object

private static ColorDialog myColorChooser = new ColorDialog();

//get chosen color

DialogResult result = myColorChooser.ShowDialog();

if (result != DialogResult.Cancel)

{

// assign something’s color to result of dialog

something’s color = myColorChooser.Color;

}

• Demo UsingComplexColors

7

8

26.5 Font Control

• Methods and constants of font control– Creating Font

• Font’s metrics:

– height, decent, ascent and leading

• Once created properties cannot be modified

– Size property• Return font size measured in design units

xy1Õdescentbaseline

ascent

leading

height

Fig. 26.10 An illustration of font metrics.

9

26.6 Drawing Shapes: Lines, Rectangles and Ovals

• Graphics methods– Use for drawing lines, rectangles and ovals

• Shape outlines take Pen

• Solid shapes take Brush

• Int argument represent coordinates

• Last two int argument are for width and height

Fig. 26.15 Ellipse bounded by a rectangle.

(x, y)

height

width

10

26.5 Drawing Lines, Rectangles, and Ovals

Graphics Drawing Methods and Descriptions. Note: Many of these methods are overloaded—consult the documentation for a full listing.

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.

Fig. 17.13 Graphics methods that draw lines, rectangles and ovals.

11

LinesRectanglesOvals.cs

1 // Fig. 26.14: LinesRectanglesOvals.cs2 // Demonstrating lines, rectangles and ovals.3 4 using System;5 using System.Drawing;6 using System.Collections;7 using System.ComponentModel;8 using System.Windows.Forms;9 using System.Data;10 11 // draws shapes on the Form12 public partial class LinesRectanglesOvals : Form• {26 public LinesRectanglesOvals () 18 {19 InitializeComponent();• }

24 protected override void OnPaint(25 PaintEventArgs paintEvent )26 {27 // get graphics object28 Graphics g = paintEvent.Graphics;29 SolidBrush brush = new SolidBrush( Color.Blue );30 Pen pen = new Pen( Color.AliceBlue );31 32 // create filled rectangle33 g.FillRectangle( brush, 90, 30, 150, 90 );34

Drawing rectangle on the screen

Drawing object

Coordinates for bounding rectangle Rectangle’s width and height

12

LinesRectanglesOvals.cs

Program Output

35 // draw lines to connect rectangles36 g.DrawLine( pen, 90, 30, 110, 40 );37 g.DrawLine( pen, 90, 120, 110, 130 );38 g.DrawLine( pen, 240, 30, 260, 40 );39 g.DrawLine( pen, 240, 120, 260, 130 );40 41 // draw top rectangle42 g.DrawRectangle( pen, 110, 40, 150, 90 );43 44 // set brush to red45 brush.Color = Color.Red;46 47 // draw base Ellipse48 g.FillEllipse( brush, 280, 75, 100, 50 );49 50 // draw connecting lines51 g.DrawLine( pen, 380, 55, 380, 100 );52 g.DrawLine( pen, 280, 55, 280, 100 );53 54 // draw Ellipse outline55 g.DrawEllipse( pen, 280, 30, 100, 50 );56 57 } // end method OnPaint58 59 } // end class LinesRectanglesOvals

DrawLine takes a Pen and two pairs of ints

Start and end point of the line

Uses pen object to draw

Overloaded methods DrawEllipse and FillEllipse

Specify drawing object

Coordinates of the bounding rectangle for the ellipse

Bounding rectangle’s width and height

13

26.8 Drawing Polygons and Polylines

• Polygons– Multisided shapes

– DrawLines• Series of connected points

– DrawPolygon• Closed polygon

– FillPolygon• Solid polygon

14

26.7 Drawing Polygons and Polylines

Method Description DrawLines Draws a series of connected lines. The coordinates of each point are

specified in an array of Points. If the last point is different from the first point, the figure is not closed.

DrawPolygon 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 point.

FillPolygon Draws a solid polygon. The coordinates of each point are specified in an array of Points. This method draws a closed polygon, even if the last point is different from the first point.

Fig. 17.19 Graphics methods for drawing polygons.

15

DrawPolygons.csProgram Output

16

26.11 Loading, Displaying and Scaling Images

• C#’s multimedia capabilities– Graphics

– Images

– Animations

– video

17

DisplayLogoForm.cs

18

DisplayLogoForm.cs

1 // Fig. 26.23: DisplayLogoForm.cs2 // Displaying and resizing an image.3 4 using System;5 using System.Drawing;6 using System.Collections;7 using System.ComponentModel;8 using System.Windows.Forms;9 using System.Data;

14 private System.Windows.Forms.Button setButton;15 private System.Windows.Forms.TextBox heightTextBox;16 private System.Windows.Forms.Label heightLabel;26 private System.Windows.Forms.TextBox widthTextBox;• private System.Windows.Forms.Label widthLabel;

10 11 // displays an image and allows the user to resize it• public partial class DisplayLogoForm : Form• { 23 private Image image = Image.FromFile( "images/Logo.gif" );25 private Graphics graphicsObject;26 27 public DisplayLogoForm()28 {29 InitializeComponent();30 31 graphicsObject = this.CreateGraphics();32 }33

image is assign through method FromFile

Method CreateGraphics to create a Graphics object associated with the Form

19

DisplayLogoForm.cs

42 private void setButton_Click(43 object sender, System.EventArgs e )44 {45 // get user input46 int width = Convert.ToInt32( widthTextBox.Text );47 int height = Convert.ToInt32( heightTextBox.Text );48 49 // if dimensions specified are too large 50 // display problem51 if ( width > 375 || height > 225 )52 {53 MessageBox.Show( "Height or Width too large" );54 55 return;56 }57 58 // clear Windows Form59 graphicsObject.Clear( this.BackColor );60 61 // draw image62 graphicsObject.DrawImage( 63 image, 5, 5, width, height );64 65 } // end method setButton_Click66 67 } // end class DisplayLogoForm

When user select Set, test to validate they are in acceptable range

Method Clear to paint entire Form in current background color

Graphics method DrawImage is called to display image

20

26.12 Animating a Series of Images

• Animate series of images from an array• Collision detection• Regional invalidation

21

LogoAnimator.cs

1 // Fig. 26.24: LogoAnimator.cs2 // Program that animates a series of images.3 4 using System;5 using System.Drawing;6 using System.Collections;7 using System.ComponentModel;8 using System.Windows.Forms;9 using System.Data;10 14 private System.Windows.Forms.PictureBox logoPictureBox;15 private System.Windows.Forms.Timer Timer;16 private System.ComponentModel.IContainer components;

11 // animates a series of 30 images12 public private class LogoAnimator : Form•{18 private ArrayList images = new ArrayList();19 private int count = -1;20 21 public LogoAnimator()22 {23 InitializeComponent();24 25 for ( int i = 0; i < 30; i++ )26 images.Add( Image.FromFile( "images/deitel" + i +27 ".gif" ) );28 29 // load first image30 logoPictureBox.Image = ( Image ) images[ 0 ];31 32 // set PictureBox to be the same size as Image33 logoPictureBox.Size = logoPictureBox.Image.Size;34 35 } // end constructor

PictureBox contain images to animate

Timer to cycle through the image

Count keeps track of current image

Load each of 30 images and store in an ArrayList

Places first image in the PictureBox

Modify size if PictureBox to equal size of Image

22

45 private void Timer_Tick(46 object sender, System.EventArgs e )47 {48 // increment counter49 count = ( count + 1 ) % 30;50 51 // load next image52 logoPictureBox.Image = ( Image )images[count ];53 54 } // end method Timer_Tick55 56 } // end class LogoAnimator

LogoAnimator.cs

Program Output