C# Programming Lecture 4 “GDI+” 22-4-2017 PGL01/CSP/2006

Lecture 4 Graphical Device Interface Painting on a Window What is GDI+? device context updating windows OnPaint method Painting on a Window Drawing shapes & images Point, Color, Pen, Brush, Font, Image Antialiasing This slide presents an outline of the complete course of CSP. Make the student aware of the fact that knowing Java doesn’t imply that they can skip the exercises and labs in this course. [iets over practica] 22-4-2017 PGL01/CSP/2006

Graphical Device Interface Drawing on a window sending data to video-card each video-card vendor has its own technology Windows provides an abstraction layer to hardware devices through generic functions functions defined in the GDI+ GDI+ functions can be accessed through a Device Context (dc) dc is a generic virtual device-driver dc always belongs to a certain Form dc contains device info (size of the window, colors used, etc.) dc can be adjusted to custom needs changing colors, lines, etc. 22-4-2017 PGL01/CSP/2006

Drawing Assemblies Namespace Description System.Drawing Contains most of the classes, structs, enums, and delegates con- cerned with the basic functionality of drawing System.Drawing.Drawing2D Provides most of the support for advanced 2D and vector draw- ing, including anti-aliasing, geometric transformations, and graphics paths System.Drawing.Imaging Contains various classes that assist in the manipulation of images (bitmaps, GIF files, and so on) System.Drawing.Printing Contains classes to assist when specifically targeting a printer or print preview window as the "output device" System.Drawing.Design Contains some predefined dialog boxes, property sheets, and other user interface elements concerned with extending the design-time user interface System.Drawing.Text Contains classes to perform more advanced manipulation of fonts and font families 22-4-2017 PGL01/CSP/2006

Drawing on a Form Steps Within a Form: Get a Device Context from the Form: Graphics dc = this.CreateGraphics(); Create a drawing pen: Pen pen = new Pen(Color.BLACK); Draw with default color and pen: dc.DrawRectangle(pen, 0, 0, 100, 100); Where should this code be implemented? 22-4-2017 PGL01/CSP/2006

Paint Method Windows cannot save the content of each window example: 10 windows open on a desktop with resolution: 1024 x 768 32bpp memory needed: 10 x 1024 x 768 x 32 ≈ 250 Mb use a: “redraw when needed” principle assign one method that can redraw the content of a window: protected override OnPaint(PaintEventArgs e); call this method when window has to be refreshed when another window was on top of it window is resized content has changed etc. 22-4-2017 PGL01/CSP/2006

Drawing with OnPaint(…) protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); Graphics dc = this.CreateGraphics(); Pen p = new Pen(Color.Black); dc.DrawLine(p, 10, 10, 100, 100); Pen thickBluePen = new Pen(Color.Blue, 10); dc.DrawEllipse(thickBluePen, 100, 100, 200, 200); Pen thickRedPen = new Pen(Color.Red, 10); dc.DrawRectangle(thickRedPen, 100, 100, 200, 200); } Graphics dc = e.Graphics; 22-4-2017 PGL01/CSP/2006

Never call OnPaint() Directly Instead use: Invalidate() Calling mechanism Never call OnPaint() Directly Instead use: Invalidate() Drawing mostly processor intensive direct call would block application with long during paint-task using Invalidate() raises Paint-event is handled through message-queue paint-event can merge system-issues on handling 22-4-2017 PGL01/CSP/2006

Graphics Helper classes to draw shapes Point / PointF Color Pen Brush represents an ordered pair of x and y coordinates that define a point in a two-dimensional plane Color Used to describe the color used to render a particular object. In GDI+ color can be alpha blended Pen Used to draw lines and polygons, including rectangles, arcs, and pies Brush Used to fill enclosed surfaces with patterns,colors, or bitmaps Font Used to describe the font to be used to render text Image used to draw bitmaps 22-4-2017 PGL01/CSP/2006

Point Point PointF Functionality Point p = new Point(25,30); float arguments Functionality (0,0) x y 22-4-2017 PGL01/CSP/2006

Colors Color Named colors Custom color: Red, Blue, Purple, …… Color c = Color.Blue; Custom color: Color c = Color.FromArgb(255, 255, 0, 0); Alpha channel (transparancy) R G B 22-4-2017 PGL01/CSP/2006

Determines look & feel that will be used by Graphics object Pen Determines look & feel that will be used by Graphics object functions that use a Pen DrawLine DrawRectangle DrawEllipse DrawBezier etc. 22-4-2017 PGL01/CSP/2006

Pen Example private void OnPaint(object sender,PaintEventArgs e) { Graphics g = e.Graphics ; Pen pn = new Pen( Color.Blue, 100 ); Rectangle rect = new Rectangle(50, 50, 200, 100); g.DrawEllipse( pn, rect ); } 22-4-2017 PGL01/CSP/2006

Used to fill a region with a solid color or a pattern Patterns Brush Used to fill a region with a solid color or a pattern Patterns Hatching Gradients Bitmap 22-4-2017 PGL01/CSP/2006

Brush Hatch Example private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; Brush b = new HatchBrush(HatchStyle.Cross, Color.Aqua, Color.White); Pen p = new Pen(b, 100); g.DrawRectangle(p, new Rectangle(10,10,100,100)); } 22-4-2017 PGL01/CSP/2006

Brush Gradient Example private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; Rectangle rect = new Rectangle(5, 30, 100, 100); LinearGradientBrush linearBrush = new LinearGradientBrush(rect, Color.Red, Color.Yellow, LinearGradientMode.Horizontal); g.FillEllipse(linearBrush, 5, 30, 300, 100); } 22-4-2017 PGL01/CSP/2006

BitmapBrush Example Brush private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; Bitmap textureBitmap = new Bitmap(10, 10); Graphics gImg = Graphics.FromImage(textureBitmap); SolidBrush solidColorBrush = new SolidBrush(Color.Red); Pen coloredPen = new Pen(solidColorBrush); solidColorBrush.Color = Color.Yellow; gImg.FillRectangle(solidColorBrush, 0, 0, 10, 10); coloredPen.Color = Color.Black; gImg.DrawRectangle(coloredPen, 1, 1, 6, 6); solidColorBrush.Color = Color.Blue; gImg.FillRectangle(solidColorBrush, 1, 1, 3, 3); solidColorBrush.Color = Color.Red; gImg.FillRectangle(solidColorBrush, 4, 4, 3, 3); TextureBrush texturedBrush = new TextureBrush(textureBitmap); g.FillRectangle(texturedBrush, 10, 10, 100, 100); } Brush 22-4-2017 PGL01/CSP/2006

private void Form1_Paint(object sender, PaintEventArgs e) Font Example: private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; Brush b = Brushes.CadetBlue; Font f = new Font("Courier", 20, FontStyle.Underline); g.DrawString("Hello Font", f, b, 10, 10); } 22-4-2017 PGL01/CSP/2006

Images 22-4-2017 PGL01/CSP/2006 public partial class Form1 : Form { private Image img; private Point[] boundary; public Form1() { InitializeComponent(); img = Image.FromFile("../../london.jpg"); boundary = new Point[3]; boundary[0] = new Point(0, 0); boundary[1] = new Point(this.Width, 0); boundary[2] = new Point(0, this.Height); } private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; g.DrawImage(img, boundary); private void Form1_ResizeEnd(object sender, EventArgs e) { Invalidate(); Images 22-4-2017 PGL01/CSP/2006

What’s wrong with this picture? Anti-aliasing What’s wrong with this picture? Very coarse line Aliasing: jagged or blocky pattern when representing a high-resolution shape at lower resolutions (``jaggies``). 22-4-2017 PGL01/CSP/2006

anti-aliasing is the technique of minimizing aliasing performance heavy operation 22-4-2017 PGL01/CSP/2006

Anti-aliasing code protected override void OnPaint(PaintEventArgs e) { Graphics dc = e.Graphics; Pen p = new Pen(Color.Blue); dc.SmoothingMode = SmoothingMode.None; dc.PixelOffsetMode = PixelOffsetMode.Default; dc.DrawEllipse(p, 20, 20, 200, 200); dc.SmoothingMode = SmoothingMode.AntiAlias; dc.PixelOffsetMode = PixelOffsetMode.HighQuality; dc.DrawEllipse(p, 30, 30, 180, 180); } 22-4-2017 PGL01/CSP/2006

Lecture 4 Summary Drawing under Windows Drawing shapes Graphical Device Interface uses: device context (Graphics) in Paint () method activate painting/repainting of window Invalidate(); Drawing shapes tools: Pen & Brush and Images fillmodes of closed shapes solid, hatch, bitmap Colors predefined & custom alpha channel for transparancy Anti-aliasing smoothing shapes 22-4-2017 PGL01/CSP/2006

Lecture 4 Assignments Study Practical Assignment Chapter 25 in: Professional C# also covers printing froms in C# Practical Assignment exercises 4.1 to 4.5 22-4-2017 PGL01/CSP/2006