Graphics and Multimedia Part #2 IT 211 Graphics and Multimedia Part #2 Lab #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. Resource means classes. Therefore when you draw any shape The first step is to include two namespace in project Using System.Drawing Using System.Drawing.Drawing2D Using is similar to import in JAVA. Using System.Drawing; Using System.Drawing.Drawing2D;

System.Drawing namespace’s Classes and Structures. Bitmap Font   FontFamily Graphics Icon Pen Region SolidBrush TextureBrush Image HatchBrush LinearGradient PathGradient class Structure Color Point Rectangle Size Key Brush PathGradientBrush Class means we will study this in the lab insha’ allah blue background means class while gray background means structure. Explain to students “What is classes and what is the structure?” -Classes are Reference types and Structures are Values types. -Classes will support an Inheritance whereas Structures won’t. -Classes can have explicitly parameterless constructors whereas structures can’t. -Member variable initialization is possible in class whereas in Structures, it is not. -It is not possible to declare destructor in structure but in class it is possible. -Process of converting structure type into object type is called boxing and process of converting object type into structure type is called unboxing. -The “this” keyword gives different meaning in structure and class. How? System.Drawing namespace’s Classes and Structures.

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 Structure Color A R G B values A means Alpha its value determines intensity 0 = transparent, 255 = opaque color. R means red, G means green and B means blue. R value defines the amount of red in the color G value defines the amount of green B value defines the amount of blue. The larger the value, the greater the amount of that particular color. public Color color; color.A color.R color.G color.B All Get the value we cannot use it to set value of ARGB to set the values we will use Color.FromArgb(a,r,g,b);

Color Structure

Color Structure To call these method . Color.FromArgb(a,r,g,b); Color.FromArgb(r,g,b); The overloaded version takes four arguments and allows the user to specify alpha; the three-argument version defaults the alpha to 255.

Coordinate System

Coordinate System In 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) We use the same coordinate system to change the location property.

Using Coordinate System Rectangle structure defines rectangular shapes with ( width & height) dimension.     x-axis y-axis (x, y) width height Determine the width of the rectangle (x,+ width, y+ height) X Coordinate of the Top left Point in rectangle Y Coordinate of the Top left Point in rectangle Rectangle R= new Rectangle (X, Y, Width, Height);

Using Coordinate System Point structure represents the x-y coordinates of a point on a two-dimensional plane.   X Coordinate of point Point P1= new Point (X, Y);   x-axis y-axis (0,0) x Y Coordinate of point y point

Paint Event

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. All controller have paint method however we always use form paint event.

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. 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. } We can say: e.Graphics

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

Pen Programmers can draw shapes and Strings using Brushes and Pens. Pen objects functions 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. We can change color by: Color.Blue When you press dot all colors will display. Define Pen with width =1 Default width // 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 =5

Brush Brush objects Used to color interiors of shapes In most Fill methods, Brushes fill a space with a color, pattern or image.

Brush Brush Class SolidBrush using System.Drawing.Drawing2D; …. // This line creates a Red brush of type Solid Bruch. SolidBrush myBrush = new SolidBrush(Color.Red); // Start drawing using myBrush Any object paints using myBrush will have red color (internally)

Brush Brush Class HatchBrush For more detail http://www.java2s.com/Code/CSharp/2D-Graphics/HatchBrushStyles.htm using System.Drawing.Drawing2D; int i= 1; Color cb = Color.Red; // define Background color Color  cf =Color.White; // define foreground color HatchBrush  hb = new HatchBrush((HatchStyle)i, cf, cb); // Start drawing using hb We have about 53 HatchStyle each have number. When i=1 When i=2

Brush Brush Class Linear 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 Horizontal When IGM is Vertical Color1 in our case is red Color2 is white When IGM is ForwardDiagonal When IGM is BackwardDiagonal

Brush Brush Class Texture Brush For more detail http://www.java2s.com/Code/CSharp/2D-Graphics/TextureBrushes.htm TextureBrush myBrush = new TextureBrush(Image.FromFile("tile.bmp"));

Drawing

Start 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

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 Method take pen -> draw shape outlines. Method take brush-> draw solid shape.

Drawing Lines, Rectangles and Ovals We will see how to call all these function in next slides….

Ellipse bounded by a rectangle. Draw Circle and Ovals DrawEllipse(Pen Pen, Rectangle R) height width (x, y) To draw ellipse or circle we need to define rectangle. To draw ellipse -> we define rectangle. To draw circle -> we define square (rectangle with same width and height) Ellipse bounded by a rectangle.

Drawing Example (1) Demo Demo 30 (run demo to student)… Demo

Drawing Example (1) Design Control Two Combo box Single panel

Drawing Example (1) Add colors to combo box The same for shape… 2

Drawing Example (1) Coding What is our event in this example? When IDE call this event? Every time user change her/his choices color -> automatically 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 Note: Point (1,1) is not 1,1 point in form but 1,1 in the panel1. draw position for student in board. 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 We can draw any thing using primitive graphics shape. However, the idea is understand the coordinate system. Demo 31 Lines Rectangle Rectangle Demo

Drawing Example (2) Design control Single panel

Drawing Example (2) Coding Create graphics object associated with panel1 (150,40) As we said earlier every time we need to paint use paint event for form control and draw inside the panel. (200,100) (100,100) (130,150) (170,150) (100,200) (130,200) (170,200) (200,200)

Reading Assignment: Arcs Drawing Object Intersection Needed by department and used to satisfy HCI rule.

Exception Handling using C# Needed by department and used to satisfy HCI rule.

Exception handling overview 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 Error-Prevention: Exception handling helps improve a program’s fault tolerance.

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 { … } Common Language Runtime (CLR)

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 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 { 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. int[] numbers = new int[2]; try { numbers[0] = 23; numbers[1] = 32; numbers[2] = 42; } // try catch(Exception ex) { MessageBox.Show(“an Exception“+ex.Message); } // catch

References Color http://www.flounder.com/csharp_color_table.htm Brush 1- 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