Computer Science 330. Graphics Programming in C#

Transcription

1 Computer Science 330 Graphics Programming in C#

2 The Graphics class and the OnPaint() method The Color and Font classes The Brush and Pen classes Drawing lines, rectangles and ovals Drawing arcs, polygons, and polylines Displaying images

3 The System.Drawing Namespace System.Drawing Font FontFamily Graphics Icon Pen Region SolidBrush TextureBrush Image Brush Color Point Rectangle Size HatchBrush LinearGradientBrush PathGradientBrush SolidBrush TextureBrush key class structure

4 The Graphics Class Graphics class represents: 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() Use the CreateGraphics() method on any control Graphics g = mybutton.creategraphics()

5 The DrawString() Method Displays text in a particular Graphics context Several overloaded versions; version we used: DrawString( String text, // Text to display Font f, // Font used Brush b, // Color & texture Float x, y); // Upper-left corner Note that x,y is upper-left, rather than baseline Note that there is no default Font or Brush

6 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 +y (x, y) y-axis Use Graphics PageScale to scale output g.pagescale =.01f; // 1/100 of inch if PageUnit = Inch x- axis

7 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 Create a custom color object using FromArgb() Color red = Color.FromArgb(255, 0, 0); Color blue = Color.FromArgb(128,0,255,0);

8 The Color Struct II Color objects are immutable Can't change them after creation (Makes the constructor kind of useless) Normally just use the 141 predefined colors 140 of these are the Unix X11 color names BackColor = Color.PapayaWhip; ForeColor = Color.AliceBlue; One non-x11 name : Transparent

9 Other Colors When painting custom controls, or painting on an existing component, you want your work to "blend in" Users have control over colors used in the standard interface (through the Display Properties dialog) You can use these through the SystemColors Color bg = SystemColors.Control; Color fg = SystemColors.ControlText;

10 The Font Class With DrawString() (), we passed the Font property Represents the current Font used by any Control You can create your own Fonts like this: Font fa = new Font("Times New Roman", 8); Font fb = new Font("Arial", 36, FontStyle.Bold); Font fc = new Font(fb, FontStyle.Bold FontStyle.Italic); Font fd = new Font("Arial", 1, GraphicsUnit.Inch); If a font name can't be found, the default font is used

11 The Brush Classes 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); The Brushes class also has 141 static solid brushes Brush sb2 = Brushes.AliceBlue;

12 The Pen Class A similar class (not used in DrawString() ()) is Pen Pens are used to draw solid lines There are two common constructors 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;

13 Lines, Rectangle & Ovals Overloaded Graphics methods for lines and shapes DrawXXX() methods take a Pen as first argument 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 (x, y) height width

14 Drawing Arcs Three methods: DrawArc, DrawPie, FillPie 0 is at 3:00 o'clock, arc sweeps clockwise (positive) Specify a starting position and ending position Positive Arc Negative Arc

15 Drawing Polygons and Polylines Three methods for drawing collections of lines DrawLines : series of connected lines DrawPolygon : same as 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

16 Graphics Drawing Methods 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. Graphics methods that draw lines, rectangles and ovals.

17 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

18 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"); "); Use one of the 50 or so DrawImage() methods g.drawimage(img,, 10, 10); // autoscale g.drawimage(img,, 10, 10, 100, 200);

19 Embedded Images Rather than using a file, you can embed your images Use Add Existing Item in Solution Explorer Find BMP, GIF, etc and add it to your project Change Build Property to Embedded Resource Use this constructor to create the Image object Image img = new Bitmap(GetType(), (), "cards.bmp"); This also works with PictureBox control