IT 211

Graphics and MultimediaGraphics and MultimediaPart #2Part #2

Lab #10Lab #10

Introduction

C# language contains many sophisticated drawing capabilities as part of namespace System.Drawing and System.Drawing.Drawing2D those namespace contains

the .NET resource for GDI+.

GDI+, an extension of the Graphical Device Interface, is an application programming interface (API) that provides classes for advanced two-dimensional drawing.

Therefore when you aims to draw shapes in your project first step is to add these namespace.

Using System.Drawing; Using System.Drawing.Drawing2D;

System.Drawing namespace’s Classes and Structures.

System.Drawing

Bitmap

Font 

FontFamily

Graphics

Icon

Pen

Region

SolidBrush

TextureBrush

Image

SolidBrush

HatchBrush

LinearGradient

PathGradient

SolidBrush

TextureBrush

class

Structure

Color

Point

Rectangle

Size

KeySystem.Drawing

Bitmap

Font 

FontFamily

Graphics

Icon

Pen

Region

SolidBrush

TextureBrush

Image

Brush

HatchBrush

LinearGradient

PathGradientBrush

SolidBrush

TextureBrush

Class

Structure

Color

Point

Rectangle

Size

Key

Structures in system.Drawing

Color has: Properties to set color of various graphical components .

Methods to create new colors.

Class Font has: Properties to define unique fonts.

Class FontFamily has: Methods for obtaining font information.

In this lecture we will study color structure

Color Structure

public Color color;

Constants in structure Color (all are Public Color)

RGB value Constants in structure Color (all are Public Color)

RGB value

Orange 255, 200, 0 White 255, 255, 255

Pink 255, 175, 175 Gray 28, 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 Color structure and their RGB values.

Color Structure

Structure Color methods and properties

Description

Common Methods

Color FromArgb Creates a color based on red, green and blue values expressed as Integers from 0 to 255. Overloaded version allows specification of alpha, red, green and blue values.

Color FromName Creates a color from a name, passed as a String. Common Properties A Integer between 0 and 255, representing the alpha component. R Integer between 0 and 255, representing the red component. G Integer between 0 and 255, representing the green component. B Integer between 0 and 255, representing the blue component. Color structure members.

The overloaded version takes four arguments and allows the user to specify alpha; the three-argument version defaults the alpha to 255.

Color Structure

Coordinate System

Coordinate SystemIn order to drawing in C# you need to understand coordinate system:

Upper-left corner of component has coordinates (0, 0)

Coordinate pairs:Horizontal coordinate (x-coordinate)Distance to the right from upper-left corner

Vertical coordinate (y-coordinate)Distance down from upper-left corner

Coordinate units measured in Pixels.

Used with structures Rectangle and Point

that are provided by System.Drawing

namespace .

And also to change the location property

 

x-axis

y-axis

(0, 0)

Using Coordinate System

 

• Rectangle structure defines rectangular shapes with ( width & height) dimension.

X Coordinate of the Top left Point in rectangle

Y Coordinate of the Top left Point in rectangle

 

x-axis

y-axis

(x, y)width

hei

gh

t

Determine the width of the rectangle

Rectangle R= new Rectangle (X, Y, Width, Height);

(x,+ width, y+ height)

Using Coordinate System

 

• Point structure represents the x-y coordinates of a point on a two-dimensional plane.

X Coordinate of point

Y Coordinate of point

Point P1= new Point (X, Y); 

x-axis

y-axis

(0,0)x

ypoint

Paint Event

We can paint in any event or function.

However, Every controller have Paint event which Occurs when the control is redrawn .

Paint event is also called automatically by system when events occur such as moving or resizing of windows. Similarly, when controls( such as Label or Button) are displayed the program calls that controls paint method.

Paint Event

When you use Paint event you can deal with the arguments to the Paint method include a PaintEventArgs object from which we can obtain a Graphics object for the control.

Paint Event

private void Form1_Paint(object sender, PaintEventArgs e){

//1- Declares the Graphics object and sets it to the Graphics object

//2- Insert code to paint the form here.

}

Pen and Brush

Pen and Brush

The drawing methods of class Graphics usually require a Pen or Brush object as parameter to render a specified shape.

The Pen draws shape outlines;

the Brush draws solid objects

PenProgrammers can draw shapes and Strings using Brushes and

Pens .

Pen objectsfunctions similarly to an ordinary pen, is used to draw lines.

constructors allow programmers to specify the colors and widths of the lines that they wish to draw.

Pens collection (System.Drawing) contains predefined Pens.

// This line creates a black pen with a default thickness of 1. Pen myPen = new Pen(Color.Black); // This line creates a black pen with a thickness of 5. Pen myPen = new Pen(Color.Black, 5);

Define Pen with width =1Default width

Define Pen with width =5

Brush

Brush objectsUsed to color interiors of shapesIn most Fill methods, Brushes fill a space with a color, pattern or image.

Class Description HatchBrush Uses a rectangular brush to fill a region with a pattern. The pattern

is defined by a member of the HatchStyle enumeration, a foreground color (with which the pattern is drawn) and a background color.

LinearGradientBrush Fills a region with a gradual blend of one color into another. Linear gradients are defined along a line. They can be specified by the two colors, the angle of the gradient and either the width of a rectangle or two points.

SolidBrush Fills a region with one color. Defined by a Color object. TextureBrush Fills a region by repeating a specified Image across the surface. Classes that derive from class Brush.

Brush

Brush ClassSolidBrush

using System.Drawing.Drawing2D;….

// This line creates a Red brush of type Solid Bruch. SolidBrush myBrush = new SolidBrush(Color.Red);

// Start drawing using myBrush

Brush

Brush ClassHatchBrush

For more detailhttp://www.java2s.com/Code/CSharp/2D-Graphics/HatchBrushStyles.htm

using System.Drawing.Drawing2D;

int i= 1;Color cb = Color.Red; // define Background colorColor  cf =Color.White; // define foreground color HatchBrush  hb = new HatchBrush((HatchStyle)i, cf, cb);// Start drawing using hb

When i=1

When i=2

Brush

Brush ClassLinear Gradient Brush

For more detail http://www.java2s.com/Code/CSharp/2D-Graphics/LineGradient.htm

LinearGradientMode lGM = LinearGradientMode.Horizontal;// lGM = LinearGradientMode.Vertical;// lGM = LinearGradientMode.ForwardDiagonal;// lGM = LinearGradientMode.BackwardDiagonal;

lGB = new LinearGradientBrush(Rectangle, Color1, Color2,  lGM);

When IGM is Vertical

When IGM is BackwardDiagonal

When IGM is Horizontal

When IGM is ForwardDiagonal

Brush

Brush ClassTexture Brush

For more detail http://www.java2s.com/Code/CSharp/2D-Graphics/TextureBrushes.htm

TextureBrush myBrush = new TextureBrush(Image.FromFile("tile.bmp"));

Drawing

• Till now we study concepts (Tools) to drawing.• Exactly like real word Step to draw any object we

follow the following steps:• Choose Pen• Choose Brush• Start Drawing shapes

Start Drawing

Drawing Lines, Rectangles and Ovals

• There are two different kind of method of drawing shape one take pen and other take brush.• Drawing shape outlines

– Versions that take a Pen and four Integers

• Drawing solid shapes– Versions that take a Brush and four Integers

• Four Integer arguments– First two represent the coordinates of the upper-left

corner of the shape or its enclosing area– Last two indicate the shape’s width and height

Drawing Lines, Rectangles and Ovals

hgGraphics Drawing Methods and Descriptions Note: Many of these methods are overloaded—consult the documentation for a full listing.

DrawLine(Pen Pen, Point P1, Point P2) Draws a line from P1(x1, y1) to P2(x2, y2). The Pen determines the color, style and width of the line.

DrawRectangle(Pen Pen, 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, Rectangle R) 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 Pen, Rectangle R) Draws an ellipse inside a rectangle (R). 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 brush, Rectangle R) 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.

Draw Circle and Ovals

Ellipse bounded by a rectangle.

height

width

(x, y)

DrawEllipse(Pen Pen, Rectangle R)

Drawing Example (1)Demo

Demo

Drawing Example (1)Design Control

Single panel

Two Combo box

Drawing Example (1)Add colors to combo box

1

2

Drawing Example (1) Coding

• What is our event in this example?

• When IDE call this event?

Drawing Example (1) Coding

Any thing we try to draw it will be draw in panel1 not in form

When selected index is =0 means user select blue color

When selected index is =2 means user select Red color

Drawing Example (1)Coding

When user select index=0 means that draw line

When user select index=1 means that draw Circle

Clear panel by fill panel with background color

Drawing Example (2)Demo

Lines

RectangleRectangle

Demo

• We can draw any thing using primitive graphics shape.

• However, the idea is understand the coordinate system.

Drawing Example (2)Design control

Single panel

Drawing Example (2)Coding

Create graphics object associated with panel1

(100,100) (200,100)

(100,200) (200,200)

(130,150) (170,150)

(130,200) (170,200)

(150,40)

Reading Assignment:Arcs Drawing Object Intersection

Exception Handling using C#

Exception handling overview

• Exception• Indication of a problem during program

execution– Problems are exceptional, normally no

problems

• Exception handling– Enables programmers to create application that can handle

exceptions

• Enable clear, robust and more fault-tolerant programs

Exception handling overview

• CLR in C# support exception handling• Structure of exceptions is similar to Java• There is no throws clause in C#• Example of Exception Handling:

• Multiple catch clauses are allowed• Finally block is executed either the try block raises

or not an exception

try { … } catch(XXXException) { … } finally{ … }

Exception handling overview

• Exceptions are unforeseen errors that happen in your programs.

• There are times when you don't know if an error will occur. This is where exception handling comes in.

• When exceptions occur, they are said to be "thrown".

• The System.Exception class provides several methods and properties for obtaining information on what went wrong.

Common C# Exceptions

• System.ArithmeticException• System.ArrayTypeMismatchException• System.IndexOutOfRangeException• System.InvalidCastException• System.MulticastNotSupportedException• System.NullReferenceException• System.OutOfMemoryException• System.OverflowException• System.StackOverflowException• System.TypeInitializationException

Exception handling keywords

• Keywords– Try

• Include codes in which exceptions might occur– Catch

• represent types of exceptions the catch can handle– Finally

• (Optional) codes present here will always execute.

Try Catch Blocks

• When exceptions are thrown, you need to be able to handle them, by implementing try catch.

• Code that could throw an exception is put in the try block.

• Exception handling code goes in the catch block.

C# exception handling structure

try{

// Code to try here.}catch (System.Exception ex){

// Code to handle exception here.}finally{

// Code to execute after try (and possibly catch) here.}

C# exception Example

int[] numbers = new int[2]; try { numbers[0] = 23; numbers[1] = 32; numbers[2] = 42; } // trycatch(Exception ex) { MessageBox.Show(“an Exception“+ex.Message); } // catch

We have defined an array of integers for 2 items, yet we try to use 3 spaces in it. this leads to an error, we can handle it by placing it in try catch block as explained below.

References• Colorhttp://www.flounder.com/csharp_color_table.htm

•Brush1- http://www.java2s.com/Code/CSharp/2D-Graphics/HatchBrushStyles.htm

2- http://www.java2s.com/Code/CSharp/2D-Graphics/LineGradient.htm

3-http://www.java2s.com/Code/CSharp/2D-Graphics/TextureBrushes.htm

• Drawing in C#1- http://www.geekpedia.com/tutorial50_Drawing-with-Csharp.html