Graphics and Multimedia
Lecture 7
Outline
Introduction
Graphics Contexts and Graphics Objects
Color Control
Introduction
• 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.
System.Drawing
Key
class
Class
Bitmap
Structure
Font
FontFamily
Graphics
Color
Icon
Point
Pen
Rectangle
Region
Size
SolidBrush
TextureBrush
Image
SolidBrush
HatchBrush
LinearGradient
PathGradient
SolidBrush
TextureBrush
Fig. 16.1
System.Drawing namespace’s Classes and Structures.
Introduction
• 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
•
Introduction
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 has
o Methods for obtaining font information.
Introduction
To 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 pixels
o Used with structures Rectangle and Point that are
provided by System.Drawing namespace
Introduction
(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.
+x
x-axis
+y
(x, y)
y-axis
Graphics Contexts and
Graphics Objects
• 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.
2.
•
Access Graphics object of the control.
Then, use Graphics object to draw shapes and strings on the
control.
Graphics object Can be accessed in 2
ways:
1.
2.
By overriding OnPaint() method to retrieve a Graphics object from
argument PaintEventArgs
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(……)
Color 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 Control
Consta nts in struc ture
Color (a ll a re Public
Shared)
Orange
Pink
Cyan
Magenta
Yellow
Black
Fig. 16.3
RGB va lue
255, 200, 0
Consta nts in struc ture
Color (a ll a re Public
Shared)
White
Gray
255, 175, 175
DarkGray
0, 255, 255
Red
255, 0, 255
Green
255, 255, 0
Blue
0, 0, 0
Color struc ture Shared c onsta nts a nd their RGB va lues.
RGB va lue
255, 255, 255
28, 128, 128
64, 64, 64
255, 0, 0
0, 255, 0
0, 0, 255
Color Control
Struc ture Color method s Desc ription
and p roperties
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
Common Properties
A
R
G
B
Creates a color from a name, passed as a String.
Integer between 0 and 255, representing the alpha component.
Integer between 0 and 255, representing the red component.
Integer between 0 and 255, representing the green component.
Integer between 0 and 255, representing the blue component.
Fig. 16.4 Color struc ture members.
The overloaded version takes four
arguments and allows the user to
specify alpha; the three-argument
version defaults the alpha to 255.
Color Control
• Programmers draw shapes and Strings using Brushes and Pens.
• Pen objects
o 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 objects
o Used to color interiors of shapes
o In most Fill methods, Brushes fill a space with a color,
pattern or image.
o Upcoming example: Color value and alpha demonstration
Cla ss
HatchBrush
Color Control
Desc rip tio n
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 Cla sses tha t d erive fro m c la ss Brush.
1 ' Fig. 16.6: ShowColors.vb
When the application begins its
2 ' Using different colors in Visual Basic.
execution, it calls class
3
ShowColors’ OnPaint
4 Public Class FrmColorForm
method to paint the window.
5
Inherits System.Windows.Forms.Form
6
30
' color for back rectangle
Gets a reference to
31
Private mBehindColor As Color = Color.Wheat
PaintEventArgs e’s
32
Graphics object and
33
' color for front rectangle
assigns it to Graphics
34
Private mFrontColor As Color = Color.FromArgb(100, 0, 0, 255)
object graphicsObject
35
' overrides Form OnPaint method
37
Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
38
Dim graphicsObject As Graphics = e.Graphics ' get graphics
39
40
Dim textBrush As SolidBrush = New SolidBrush(Color.Black) ' create text brush
42
Creates a black and
43
Dim brush As SolidBrush = New SolidBrush(Color.White) ' create solid brush
white SolidBrush for
45
drawing on the form
46
' draw white background
47
graphicsObject.FillRectangle(brush, 4, 4, 275, 180)
48
Graphics method
49
' display name of behindColor
FillRectangle draws
50
graphicsObject.DrawString(mBehindColor.Name, Me.Font, textBrush, 40, 5)
a solid white rectangle
52
with the Brush supplied
53
' set brush color and display back rectangle
as a parameter.
54
brush.Color = mBehindColor
55
Assigns the
56
graphicsObject.FillRectangle(brush, 45, 20, 150, 120)
ColormBehindColor
57
value to the Brush’s
Color property and
displays a rectangle
ShowColors.v
b
58
' display Argb values of front color
59
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 rectangle
65
brush.Color = mFrontColor
66
67
graphicsObject.FillRectangle(brush, 65, 35, 170, 130)
68
End Sub ' OnPaint
69 70
' handle cmdColorValue click event
71
Private Sub cmdColorValue_Click(ByVal sender As _
72
System.Object, ByVal e As System.EventArgs) _
73
Handles cmdColorValue.Click
74
75
' obtain new front color from text boxes
76
mFrontColor = Color.FromArgb(txtAlphaBox.Text, _
77
txtRedBox.Text, txtGreenBox.Text, txtBlueBox.Text)
78
79
Invalidate() ' refresh Form
80
End Sub ' cmdColorValue_Click
81
82
83
84
85
86
87
88
89
90
91
92
Private Sub cmdColorName_Click(ByVal sender As _
System.Object, ByVal e As System.EventArgs) _
Handles cmdColorName.Click
' set behindColor to color specified in text box
mBehindColor = Color.FromName(txtColorName.Text)
Invalidate() ' refresh Form
End Sub ' cmdColorName_Click
End Class ' FrmColorForm