Visual Programming

Lecture 5Graphics

Erick Pranata

Outlines» Graphics Overview» About GDI+» Getting Started

Graphics Overview

GDI+» Successor of Graphic Device Interface» Responsible for displaying information

on screens and printers» Namespaces:˃ System.Drawing˃ System.Drawing.Drawing2D˃ System.Drawing.Imaging˃ System.Drawing.Text˃ System.Drawing.Printing

3 Categories of Graphics Services» Two-dimensional (2-D) vector graphics˃ Lines, curves, etc.˃ Specified by set of points in coordinate

system» Imaging˃ Bitmap

» Typography

Important Classes» Graphics Class˃ DrawLine receives a Pen object˃ FillRectangle receives a

LinearGradientBrush object˃ Font and StringFormat˃ Rectangle, Point, Size˃ BitmapData

Outlines» Graphics Overview» About GDI+» Getting Started

About GDI+

Vector Graphics Overview

Vector Graphics Overview» Lines» Rectangles» Ellipses» Arcs» Polygons» Cardinal Splines» Bezier Splines

Vector Graphics OverviewmyGraphics.DrawRectangle(myPen, 20, 10, 100, 50

);

Pen, Lines, and Rectangles» Line

˃ myGraphics.DrawLine(myPen, 4, 2, 12, 6);˃ Point myStartPoint = new Point(4, 2);Point myEndPoint = new Point(12, 6);myGraphics.DrawLine(

myPen, myStartPoint, myEndPoint);

» Pen˃ Pen myPen = new Pen(Color.Blue, 2);myGraphics.DrawLine(

myPen, 0, 0, 60, 30);

˃ myPen.DashStyle = DashStyle.Dash;

˃ StartCap and EndCap:+ Square, Rounded, triangular, or custom shape

Pen, Lines, and Rectangles» Rectangle˃ myGraphics.DrawRectangle(

myPen, 100, 50, 80, 40);

˃ Rectangle myRectangle = new Rectangle(100, 50, 80, 40); myGraphics.DrawRectangle(

myPen, myRectangle);

Ellipses and Arcs» Ellipse

˃ myGraphics.DrawEllipse(myPen, 100, 50, 80, 40);

˃ Rectangle myRectangle = new Rectangle(100, 50, 80, 40); myGraphics.DrawEllipse(myPen, myRectangle);

» Arc˃ myGraphics.DrawArc(myPen, 100, 50, 140, 70, 30, 180);

Polygons» Point[] myPointArray = { new Point(0, 0), new Point(50, 30), new Point(30, 60) }; myGraphics.DrawPolygon(

myPen, myPointArray);

Cardinal Spline

» myGraphics.DrawCurve(myPen, myPointArray, 1.5f);

Bezier Splines» Spesified by four points:˃ Two end points˃ Two control points: act as magnets

» myGraphics.DrawBezier(myPen, 0, 0, 40, 20, 80, 150, 100, 10);

Graphics Paths» Combining vector graphics» Example:˃ GraphicsPath myGraphicsPath = new GraphicsPath();myGraphicsPath.AddLine(0, 0, 30, 20); myGraphicsPath.AddEllipse(20, 20, 20, 40); myGraphicsPath.AddBezier(30, 60, 70, 60, 50, 30, 100, 10); myGraphics.DrawPath(myPen, myGraphicsPath);

Brushes and Filled Shapes» Solid Brush˃ SolidBrush mySolidBrush = new SolidBrush(Color.Red);myGraphics.FillEllipse(

mySolidBrush, 0, 0, 60, 40);

» Hatch Brush˃ HatchBrush myHatchBrush = new HatchBrush(

HatchStyle.Vertical,Color.Blue, Color.Green

);

Brushes and Filled Shapes» Texture Brush˃ Image myImage = Image.FromFile(

"MyTexture.bmp“);TextureBrush myTextureBrush = new TextureBrush(myImage);

» Gradient Brush˃ LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush(

myRectangle,Color.Blue, Color.Green,LinearGradientMode.Horizontal

);

Regions

» myGraphics.FillRegion(mySolidBrush, myRegion);

Clipping

» myGraphics.Clip = myRegion; myGraphics.DrawLine(myPen, 0, 0, 200, 200);

Antialiasing» myGraphics.SmoothingMode = SmoothingMode.AntiAlias;

Outlines» Graphics Overview» About GDI+» Getting Started

Getting Started

How to: Create Graphics Object» PaintEventArgs from Paint event

˃ private void Form1_Paint(object sender,

System.Windows.Forms.PaintEventArgs pe) {

Graphics g = pe.Graphics;}

» CreateGraphics of a component˃ Graphics g = this.CreateGraphics();

» Create a Graphics object from an Image˃ Bitmap myBitmap = new Bitmap("myPic.bmp"); Graphics g = Graphics.FromImage(myBitmap);

Principal Objects» Pen» Brush» Font» Color

Do not forget to dispose them after use

How to: Redraw Component» Use Invalidate() method˃ this.Invalidate()

How to: Draw Text» string drawString = "Sample Text";

» Font drawFont = new Font("Arial", 16);

» SolidBrush drawBrush = new SolidBrush(Color.Black);

» StringFormat drawFormat = new StringFormat();

» myGraphics.DrawString(drawString, drawFont, drawBrush, 150, 50, drawFormat);

Misc.

Mouse Events» MouseClick» MouseDoubleClick» MouseDown» MouseEnter» MouseHover» MouseLeave» MouseMove» MouseUp

Exercise

Exercise

Exercise

Exercise

Exercise

Reference» Graphics and Drawing in Windows

Forms, http://msdn.microsoft.com/en-us/library/a36fascx(v=vs.110).aspx