Computer Science 330
Graphics Programming in C#
„
The Graphics class and the OnPaint()
OnPaint() method
„
The Color and Font classes
„
The Brush and Pen classes
„
Drawing lines, rectangles and ovals
„
Drawing arcs, polygons, and polylines
„
Displaying images
The System.Drawing Namespace
key
System.Drawing
Font
FontFamily
Graphics
Icon
class
The Graphics Class
„
structure
Point
„
Rectangle
„
Size
Pen
SolidBrush
Image
Brush
An "abstract" drawing surface (similar to file system)
A set of "tools" you'll use to paint on the drawing surface
Two ways to get a Graphics object
„
Use the Graphics property passed to OnPaint()
OnPaint()
Use the CreateGraphics()
CreateGraphics() method on any control
„
Graphics g = myButton.CreateGraphics()
myButton.CreateGraphics()
„
Region
TextureBrush
Graphics class represents:
„
Color
HatchBrush
LinearGradientBrush
PathGradientBrush
SolidBrush
TextureBrush
The DrawString()
DrawString() Method
„
Displays text in a particular Graphics context
„
„
„
„
Several overloaded versions; version we used:
DrawString(
DrawString( String text,
Font f,
Brush b,
Float x, y);
// Text to display
// Font used
// Color & texture
// UpperUpper-left corner
Note that x,y is upper-left, rather than baseline
Note that there is no default Font or Brush
The Coordinate System
„
The default coordinate system
„
Change default scaling
„
Use Graphics PageUnit
„
„
„
„
„
GraphicsUnit.Pixel (default)
GraphicsUnit.Inch
GraphicsUnit.Millimeter
GraphicsUnit.Point
(0, 0)
+x
xaxis
+y
(x, y)
y-axis
Use Graphics PageScale to scale output
„
g.PageScale = .01f; // 1/100 of inch if PageUnit = Inch
1
The Color Struct I
„
Represents ARGB colors
„
„
„
„
Four 8-bit integers, packed into a 32-bit value
A (alpha) represents transparency of color (255 opaque)
RGB represent the individual red, green, blue values
The Color Struct II
„
Color objects are immutable
„
„
„
Normally just use the 141 predefined colors
„
Create a custom color object using FromArgb()
FromArgb()
„
Color red = Color.FromArgb(255, 0, 0);
Color blue = Color.FromArgb(128,0,255,0);
„
„
Can't change them after creation
(Makes the constructor kind of useless)
140 of these are the Unix X11 color names
BackColor = Color.PapayaWhip;
Color.PapayaWhip;
ForeColor = Color.AliceBlue;
Color.AliceBlue;
One non-X11 name : Transparent
Other Colors
The Font Class
„
When painting custom controls, or painting on an
existing component, you want your work to "blend in"
„
With DrawString()
DrawString(), we passed the Font property
„
Users have control over colors used in the standard
interface (through the Display Properties dialog)
„
You can create your own Fonts like this:
„
You can use these through the SystemColors
„
Color bg = SystemColors.Control;
SystemColors.Control;
Color fg = SystemColors.ControlText;
SystemColors.ControlText;
„
„
„
DrawString()
DrawString() uses a brush to do do the actual painting
„
Brush is an abstract class, so you use a subclass
„
The most common subclass is SolidBrush
„
Brush sb = new SolidBrush(Color.red);
SolidBrush(Color.red);
„
The Brushes class also has 141 static solid brushes
„
Brush sb2 = Brushes.AliceBlue;
Brushes.AliceBlue;
Font fa = new Font("Times New Roman", 8);
Font fb = new Font("Arial", 36, FontStyle.Bold);
FontStyle.Bold);
Font fc = new Font(fb,
Font(fb, FontStyle.Bold | FontStyle.Italic);
FontStyle.Italic);
Font fd = new Font("Arial", 1, GraphicsUnit.Inch);
GraphicsUnit.Inch);
If a font name can't be found, the default font is used
The Brush Classes
„
Represents the current Font used by any Control
The Pen Class
„
A similar class (not used in DrawString()
DrawString()) is Pen
„
There are two common constructors
„
„
„
Pens are used to draw solid lines
Pen p1 = new Pen(Color.Green);
Pen p2 = new Pen(Color.blue, 10);
There is also a Pens class that has 141 static pens
„
Pen p3 = Pens.Indigo;
2
Lines, Rectangle & Ovals
Drawing Arcs
„
Overloaded Graphics methods for lines and shapes
„
DrawXXX()
DrawXXX() methods take a Pen as first argument
„
„
„
FillXXX()
FillXXX() methods take a Brush as first argument
„
DrawLine() takes x1, y1, x2, y2 as other arguments
„
The other drawing
methods take
x, y, width, height
„
Three methods: DrawArc,
DrawArc DrawPie,
DrawPie FillPie
0 is at 3:00 o'clock, arc sweeps clockwise (positive)
Specify a starting position and ending position
Positive Arc
Negative Arc
270°
270°
(x, y)
180°
height
180°
90°
width
Drawing Polygons and Polylines
0°
0°
90°
Graphics Drawing Methods
Graphics Drawing Methods and Descriptions.
Note: Many of these methods are overloaded—consult the documentation for a full listing.
„
Three methods for drawing collections of lines
„
„
„
DrawLines : series of connected lines
DrawPolygon : same as DrawLines,
DrawLines but figure is closed
FillPolygon : draws a solid polygon
„
Each method takes an array of points
„
First two take a pen, last a brush
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.
Graphics methods that draw lines, rectangles and ovals.
Advanced 2D Drawing
„
Classes provide more control over lines and fills
„
„
„
Texture and Gradient brushes
Ability to use different pen styles
Advanced 2D effects in System.Drawing.Drawing2D
„
„
Transformations (rotations, shearing, etc)
Complex drawings using GraphicsPath
Images
„
„
The Image class represents bitmap and vector graphics
Use static method to create an Image from a file
„
„
Image img = Image.FromFile("cards.bmp");
Image.FromFile("cards.bmp");
Use one of the 50 or so DrawImage()
DrawImage() methods
„
g.DrawImage(img,
g.DrawImage(img, 10, 10); // autoscale
g.DrawImage(img,
g.DrawImage(img, 10, 10, 100, 200);
3
Embedded Images
„
Rather than using a file, you can embed your images
„
„
„
„
Use this constructor to create the Image object
„
„
Use Add Existing Item in Solution Explorer
Find BMP, GIF, etc and add it to your project
Change Build Property to Embedded Resource
Image img =
new Bitmap(GetType(),
Bitmap(GetType(), "cards.bmp");
This also works with PictureBox control
4