Graphics and MultimediaGraphics and MultimediaLecture 7

OutlineOutlineIntroduction

   Graphics Contexts and Graphics Objects   Color Control     

IntroductionIntroduction• The language contains many sophisticated

drawing capabilities as part of namespace System.Drawing and the other namespaces that make up the .NET resource GDI+.

• GDI+, an extension of the Graphical Device Interface, is an application programming interface (API) that provides classes for 2D drawing.

• The most commonly used components of GDI+ reside in the System.Drawing and

System.Drawing.Drawing2D namespaces.

Fig. 16.1 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

SolidBrush

HatchBrush

LinearGradient

PathGradient

SolidBrush

TextureBrush

Class

Structure

Color

Point

Rectangle

Size

Key

IntroductionIntroduction• Class Graphics contains methods used for

drawing Strings, lines, rectangles and other shapes on a Control. • The drawing methods of class Graphics usually

require a Pen or Brush object to render a specified shape.

• The Pen draws shape outlines;• the Brush draws solid objects

IntroductionIntroduction• Structure Color has:

o properties to set color of various graphical components.o Methods to create new colors.

• Class Font has:o Properties to define unique fonts

• Class FontFamily haso Methods for obtaining font information.

IntroductionIntroductionTo begin drawing in Visual Basic, we first must

understand GDI+’s coordinate system:o Upper-left corner of component has

coordinates (0, 0)o Coordinate pairs:

• Allow positioning of text and shapes• Horizontal coordinate (x-coordinate)

o Distance to the right from upper-left corner

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

o Coordinate units measured in pixelso Used with structures Rectangle and Point

that are provided by System.Drawing namespace

IntroductionIntroduction

 

 

x-axis

y-axis

(x, y)

+x

+y

(0, 0)

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

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

• Graphics objects contain methods for drawing, font manipulation, color manipulation and other graphics-related actions.

• Every Windows application that derives from class System.Windows.Forms.Form inherits an Overridable OnPaint method where most graphics operations are performed.

• The arguments to the OnPaint method include a PaintEventArgs object from which we can obtain a Graphics object for the control.

• The OnPaint method triggers the Control’s Paint event.

   Graphics Contexts and Graphics Objects

• When displaying graphical information on a control, we need to:

1. Access Graphics object of the control.2. Then, use Graphics object to draw shapes and strings on the

control.

• Graphics object Can be accessed in 2 ways:

1. By overriding OnPaint() method to retrieve a Graphics object from argument PaintEventArgs

2. Create a new Graphics object associated with the appropriate surface.

   Graphics Contexts and Graphics Objects

1-Overriding OnPaint() :

Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)‘ extract the Graphics object from the PaintEventArgs argument:Dim graphicsObject As Graphics = e.Graphics

• Calling the OnPaint method raises the Paint event.

• Instead of overriding the OnPaint method, programmers can add an event handler for the Paint event because OnPaint method is rarely called directly.

Public Sub MyEventHandler_Paint( _ByVal sender As Object, ByVal e As PaintEventArgs) _ Handles Me.Paint

   Graphics Contexts and Graphics Objects

• OnPaint is 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.

• Programmers can invoke OnPaint explicitly by calling Invalidate method.

• This method refreshes a control’s client area and repaints all graphical components.

   Graphics Contexts and Graphics Objects

2-Creating a new Graphics: By invoking CreateGraphics method.

Dim graphicsObject As Graphics = label1.CreateGraphics()

‘ Then, you can use the methods provided in class Graphics to draw on the control for example we can draw a circle on label1

graphicsObjects.DrawCircle(……)

   Graphics Contexts and Graphics Objects

     Color ControlColor Control• Structure Color

o ARGB values• Alpha, red, green and blue values, respectively• Each value represented as a Byte• Alpha value determines intensity

o 0 = transparent, 255 = opaque color.• The first number in the RGB value defines the amount of red in the color, the second defines the amount of green

and the third defines the amount of blue. • The larger the value, the greater the amount of that particular

color.

     Color ControlColor Control

Constants in structure Color (all are Public Shared)

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

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 Fig. 16.3 Color structure Shared constants and their RGB values.

     Color ControlColor ControlStructure Color methods and properties

Description

Common Methods

Shared 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.

Shared 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. Fig. 16.4 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 ControlColor Control• Programmers draw shapes and Strings using Brushes and

Pens.

• Pen objectso functions similarly to an ordinary pen, is used to draw lines.o constructors allow programmers to specify the colors and

widths of the lines that they wish to draw.o Pens collection (System.Drawing) contains predefined Pens.

• Brush objectso Used to color interiors of shapeso In most Fill methods, Brushes fill a space with a color,

pattern or image.o Upcoming example: Color value and alpha demonstration

     Color ControlColor ControlClass 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. Fig. 16.5 Classes that derive from class Brush.

ShowColors.vShowColors.vbb

1 ' Fig. 16.6: ShowColors.vb2 ' Using different colors in Visual Basic.3 4 Public Class FrmColorForm5 Inherits System.Windows.Forms.Form6 30 ' color for back rectangle31 Private mBehindColor As Color = Color.Wheat32 33 ' color for front rectangle34 Private mFrontColor As Color = Color.FromArgb(100, 0, 0, 255)35 ' overrides Form OnPaint method37 Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)38 Dim graphicsObject As Graphics = e.Graphics ' get graphics39 40 Dim textBrush As SolidBrush = New SolidBrush(Color.Black) ' create text brush42 43 Dim brush As SolidBrush = New SolidBrush(Color.White) ' create solid brush45 46 ' draw white background47 graphicsObject.FillRectangle(brush, 4, 4, 275, 180)48 49 ' display name of behindColor50 graphicsObject.DrawString(mBehindColor.Name, Me.Font, textBrush, 40, 5)52 53 ' set brush color and display back rectangle54 brush.Color = mBehindColor55 56 graphicsObject.FillRectangle(brush, 45, 20, 150, 120)57

Graphics method FillRectangle draws a solid white rectangle with the Brush supplied as a parameter.

Gets a reference to PaintEventArgs e’s Graphics object and assigns it to Graphics object graphicsObject

Creates a black and white SolidBrush for drawing on the form

Assigns the ColormBehindColor value to the Brush’s Color property and displays a rectangle

When the application begins its execution, it calls class ShowColors’ OnPaintmethod to paint the window.

58 ' display Argb values of front color59 graphicsObject.DrawString("Alpha: " & mFrontColor.A & _60 " Red: " & mFrontColor.R & " Green: " & mFrontColor.G _61 & " Blue: " & mFrontColor.B, Me.Font, textBrush, _62 55, 165)63 64 ' set brush color and display front rectangle65 brush.Color = mFrontColor66 67 graphicsObject.FillRectangle(brush, 65, 35, 170, 130)68 End Sub ' OnPaint69 70 ' handle cmdColorValue click event71 Private Sub cmdColorValue_Click(ByVal sender As _72 System.Object, ByVal e As System.EventArgs) _73 Handles cmdColorValue.Click74 75 ' obtain new front color from text boxes76 mFrontColor = Color.FromArgb(txtAlphaBox.Text, _77 txtRedBox.Text, txtGreenBox.Text, txtBlueBox.Text)78 79 Invalidate() ' refresh Form80 End Sub ' cmdColorValue_Click

81 82 Private Sub cmdColorName_Click(ByVal sender As _83 System.Object, ByVal e As System.EventArgs) _84 Handles cmdColorName.Click85 86 ' set behindColor to color specified in text box87 mBehindColor =

Color.FromName(txtColorName.Text)88 89 Invalidate() ' refresh Form90 End Sub ' cmdColorName_Click91 • End Class ' FrmColorForm