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
Top Related