MELJUN CORTES Visual basic 2005 07 graphics and multimedia

Visual Basic 2005Visual Basic 2005VII. GRAPHICS AND MULTIMEDIA

MELJUN CORTESMELJUN CORTES

Graphics and MultimediaGraphics and MultimediaObjectives

In this chapter you will learn:•To understand graphics contexts and graphics objects.•To manipulate colors and fonts.•To understand and use GDI+ Graphics methods to draw lines, rectangles, Strings and images.•To use class Image to manipulate and display images.•To draw complex shapes from simple shapes with class GraphicsPath.•To use Windows Media Player to play audio or video in a Visual Basic application.•To use Microsoft Agent to add interactive animated characters to a Visual Basic application.

Visual Basic 2005

2GRAPHICS AND MULTIMEDIA

OverviewOverview

The FCL supports graphics that enable programmers to visually enhance their Windows applications

The many sophisticated drawing capabilities are part of namespace System.Drawing and the other namespaces that make up the .NET resource GDI+

GDI+ is an application programming interface (API) that provides classes for creating two-dimensional vector graphics, manipulating fonts and inserting images

Visual Basic 2005

Graphics and Multimedia


Drawing Classes and the Coordinate Drawing Classes and the Coordinate SystemSystem

Namespaces System.Drawing and System.Drawing.Drawing2D contain the most commonly used GDI+ components

System.ObjectSystem.Object

System.MarshalByRefObjectSystem.MarshalByRefObject

FontFont

FontFamilyFontFamily

GraphicsGraphics

IconIcon

PenPen

RegionRegion

SolidBrushSolidBrush

BrushBrush

LinearGradientBrushLinearGradientBrush

PathGradientBrushPathGradientBrush

SolidBrushSolidBrush

TextureBrushTextureBrush

HatchBrushHatchBrush

PointPoint

RectangleRectangle

SizeSize

ColorColor

Visual Basic 2005




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

Visual Basic 2005




The Color structure contains numerous Shared properties that set the colors of various graphical components, plus methods that allow users to create new colors

Class Font contains properties that define unique fonts

Class FontFamily contains methods for obtaining font information

Visual Basic 2005




To begin drawing in Visual Basic, we first must understand GDI+'s coordinate system, a scheme for identifying every point on the screen

X Axis

Y Axis

(x, y)

+x

+y

(0, 0)

Visual Basic 2005



Graphics Context and Graphics ObjectsGraphics Context and Graphics Objects

A graphics context represents a drawing surface that enables drawing on the screen

A Graphics object manages a graphics context by controlling how information is drawn

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

Visual Basic 2005




When drawing on a Form, you can override method OnPaint to retrieve a Graphics object from argument PaintEventArgs or to create a new Graphics object associated with the appropriate surface

To override the inherited OnPaint method, use the following method header:

Next, extract the incoming Graphics object from argument PaintEventArg, as in:

Protected Overrides Sub OnPaint(PaintEventArgs e)Protected Overrides Sub OnPaint(PaintEventArgs e)

Dim graphicsObject As Graphics = e.GraphicsDim graphicsObject As Graphics = e.Graphics

Visual Basic 2005




Variable graphicsObject can now be used to draw shapes and Strings on the Form

Instead of overriding the OnPaint method, programmers can add an event handler for the Paint event

Visual Studio .NET generates the Paint event handler in this form:Protected Sub MyEventHandler_Paint( _ ByVal sender As Object, ByVal e As PaintEventArgs) Protected Sub MyEventHandler_Paint( _ ByVal sender As Object, ByVal e As PaintEventArgs)

Visual Basic 2005




Controls, such as Labels and Buttons, do not have their own graphics contexts, but you can create them

To draw on a control, first create a graphics object by invoking the control's CreateGraphics method, as in:

Dim graphicsObject As Graphics = controlName.CreateGraphics() Dim graphicsObject As Graphics = controlName.CreateGraphics()

Visual Basic 2005



Color ControlColor Control

Colors can enhance a program's appearance and help convey meaning

Structure Color defines methods and constants used to manipulate colors

Every color can be created from a combination of alpha, red, green and blue components (called ARGB values)

All four ARGB components are Bytes that represent integer values in the range 0 to 255

The alpha value determines the opacity of the color

Visual Basic 2005




Color structure Shared constants and their RGB values:

Constants in structure

Color

RGB Value Constants in structure

color

RGB Value

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

Pink 255, 175, 175 Gray 128, 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

Visual Basic 2005




Color structure members:Structure Color methods and properties

Description

Common Methods

FromArgb A Shared method that creates a color based on red, green and blue values expressed as ints from 0 to 255. The overloaded version allows specification of alpha, red, green and blue values.

FromName A Shared method that creates a color from a name, passed as a String.

Common Properties

A A byte between 0 and 255, representing the alpha component.

R A byte between 0 and 255, representing the red component.

G A byte between 0 and 255, representing the green component.

B A byte between 0 and 255, representing the blue component.

Visual Basic 2005




Manipulating colorsPublic Class FrmShowColors ' color for back rectangle Private backgroundColor As Color = Color.Wheat

' color for front rectangle Private foregroundColor As Color = Color.FromArgb(100, 0, 0, 255)

' override Form's OnPaint method Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs) Dim graphicsObject As Graphics = e.Graphics ' get graphics object

' create text brush Dim textBrush As New SolidBrush(Color.Black)

' create solid brush Dim brush As New SolidBrush(Color.White)

' draw white background graphicsObject.FillRectangle(brush, 4, 4, 270, 180)

' display name of backColor graphicsObject.DrawString(BackColor.Name, Me.Font, textBrush, 40, 5). . .continued

Public Class FrmShowColors ' color for back rectangle Private backgroundColor As Color = Color.Wheat

' color for front rectangle Private foregroundColor As Color = Color.FromArgb(100, 0, 0, 255)

' override Form's OnPaint method Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs) Dim graphicsObject As Graphics = e.Graphics ' get graphics object

' create text brush Dim textBrush As New SolidBrush(Color.Black)

' create solid brush Dim brush As New SolidBrush(Color.White)

' draw white background graphicsObject.FillRectangle(brush, 4, 4, 270, 180)

' display name of backColor graphicsObject.DrawString(BackColor.Name, Me.Font, textBrush, 40, 5). . .continued

Visual Basic 2005




Manipulating colors ' set brush color and display back rectangle brush.Color = backgroundColor graphicsObject.FillRectangle(brush, 45, 20, 150, 120)

' display Argb values of front color graphicsObject.DrawString("Alpha: " & foregroundColor.A & _ " Red: " & foregroundColor.R & " Green: " & _ foregroundColor.G & " Blue: " & foregroundColor.B, Me.Font, textBrush, 55, 165)

' set brush color and display front rectangle brush.Color = foregroundColor graphicsObject.FillRectangle(brush, 65, 35, 170, 130) End Sub ' OnPaint

' change Form's background color Private Sub btnColorName_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles btnColorName.Click ' set backColor to color specified in text box backgroundColor = Color.FromName(txtColorName.Text) Invalidate() ' refresh Form End Sub ' btnColorName_Click. . .continued

' set brush color and display back rectangle brush.Color = backgroundColor graphicsObject.FillRectangle(brush, 45, 20, 150, 120)

' display Argb values of front color graphicsObject.DrawString("Alpha: " & foregroundColor.A & _ " Red: " & foregroundColor.R & " Green: " & _ foregroundColor.G & " Blue: " & foregroundColor.B, Me.Font, textBrush, 55, 165)

' set brush color and display front rectangle brush.Color = foregroundColor graphicsObject.FillRectangle(brush, 65, 35, 170, 130) End Sub ' OnPaint

' change Form's background color Private Sub btnColorName_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles btnColorName.Click ' set backColor to color specified in text box backgroundColor = Color.FromName(txtColorName.Text) Invalidate() ' refresh Form End Sub ' btnColorName_Click. . .continued

Visual Basic 2005




Manipulating colors ‘ change Form's foreground color Private Sub btnColorValue_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles btnColorValue.Click

' obtain new front color from text boxes foregroundColor = Color.FromArgb(Convert.ToInt32(txtAlpha.Text), _ Convert.ToInt32(txtRed.Text), _ Convert.ToInt32(txtGreen.Text), _ Convert.ToInt32(txtBlue.Text)) Invalidate() ' refresh Form End Sub ' btnColorValue_Click

End Class

‘ change Form's foreground color Private Sub btnColorValue_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles btnColorValue.Click

' obtain new front color from text boxes foregroundColor = Color.FromArgb(Convert.ToInt32(txtAlpha.Text), _ Convert.ToInt32(txtRed.Text), _ Convert.ToInt32(txtGreen.Text), _ Convert.ToInt32(txtBlue.Text)) Invalidate() ' refresh Form End Sub ' btnColorValue_Click

End Class

Visual Basic 2005




Manipulating colors

Visual Basic 2005



Font ControlFont Control

The properties of Font objects cannot be modified

If you need a different Font, you must create a new Font object

There are many overloaded versions of the Font constructor for initializing Font objects

Visual Basic 2005




Font class read-only properties

Font class read-only properties

Property Description

Bold Returns true if the font is bold.

FontFamily Returns the font's FontFamily a grouping structure to organize fonts and define their similar properties.

Height Returns the height of the font.

Italic Returns true if the font is italic.

Name Returns the font's name as a String.

Size Returns a float value indicating the current font size measured in design units (design units are any specified unit of measurement for the font).

SizeInPoints Returns a float value indicating the current font size measured in points.

Strikeout Returns True if the font is in strikeout format.

Underline Returns true if the font is underlined.

Visual Basic 2005




Fonts and FontStylesPublic Class FrmUsingFonts ' demonstrate various font and style settings Protected Overrides Sub OnPaint(ByVal paintEvent As PaintEventArgs) Dim graphicsObject As Graphics = paintEvent.Graphics Dim brush As New SolidBrush(Color.DarkBlue)

' arial, 12 pt bold Dim style As FontStyle = FontStyle.Bold Dim arial As New Font("Arial", 12, style)

' times new roman, 12 pt regular style = FontStyle.Regular Dim timesNewRoman As New Font("Times New Roman", 12, style)

' courier new, 16 pt bold and italic style = FontStyle.Bold Or FontStyle.Italic Dim courierNew As New Font("Courier New", 16, style)

. . .continued

Public Class FrmUsingFonts ' demonstrate various font and style settings Protected Overrides Sub OnPaint(ByVal paintEvent As PaintEventArgs) Dim graphicsObject As Graphics = paintEvent.Graphics Dim brush As New SolidBrush(Color.DarkBlue)

' arial, 12 pt bold Dim style As FontStyle = FontStyle.Bold Dim arial As New Font("Arial", 12, style)

' times new roman, 12 pt regular style = FontStyle.Regular Dim timesNewRoman As New Font("Times New Roman", 12, style)

' courier new, 16 pt bold and italic style = FontStyle.Bold Or FontStyle.Italic Dim courierNew As New Font("Courier New", 16, style)

. . .continued

Visual Basic 2005




Fonts and FontStyles ' tahoma, 18 pt strikeout style = FontStyle.Strikeout Dim tahoma As New Font("Tahoma", 18, style)

graphicsObject.DrawString(arial.Name & _ " 12 point bold.", arial, brush, 10, 10)

graphicsObject.DrawString(timesNewRoman.Name & _ " 12 point plain.", timesNewRoman, brush, 10, 30)

graphicsObject.DrawString(courierNew.Name & _ " 16 point bold and italic.", courierNew, brush, 10, 50)

graphicsObject.DrawString(tahoma.Name & _ " 18 point strikeout.", tahoma, brush, 10, 70) End Sub ' OnPaint

End Class

' tahoma, 18 pt strikeout style = FontStyle.Strikeout Dim tahoma As New Font("Tahoma", 18, style)

graphicsObject.DrawString(arial.Name & _ " 12 point bold.", arial, brush, 10, 10)

graphicsObject.DrawString(timesNewRoman.Name & _ " 12 point plain.", timesNewRoman, brush, 10, 30)

graphicsObject.DrawString(courierNew.Name & _ " 16 point bold and italic.", courierNew, brush, 10, 50)

graphicsObject.DrawString(tahoma.Name & _ " 18 point strikeout.", tahoma, brush, 10, 70) End Sub ' OnPaint

End Class

Visual Basic 2005




Fonts and FontStyles

Visual Basic 2005




You can determine precise information about a font's metrics (or properties), such as height, descent, ascent and leading

Visual Basic 2005




FontFamily methods that return font-metric information

Method Description

GetCellAscent Returns an Integer representing the ascent of a font as measured in design units.

GetCellDescent Returns an Integer representing the descent of a font as measured in design units.

GetEmHeight Returns an Integer representing the height of a font as measured in design units.

GetLineSpacing Returns an Integer representing the distance between two consecutive lines of text as measured in design units.

Visual Basic 2005



Drawing Lines, Rectangles and OvalsDrawing Lines, Rectangles and Ovals

Each of the drawing methods has several overloaded versions

Methods that draw hollow shapes typically require as arguments a Pen and four Integers

Methods that draw solid shapes typically require as arguments a Brush and four Integers

Visual Basic 2005




Draws a line from (x1, y1) to (x2, y2). The Pen determines the line's color, style and width:

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 rectangle's color, style and border width

DrawLine(ByVal p As Pen, ByVal x1 As Integer, ByVal y1 As Integer, _ ByVal x2 As Integer, ByVal y2 As Integer)DrawLine(ByVal p As Pen, ByVal x1 As Integer, ByVal y1 As Integer, _ ByVal x2 As Integer, ByVal y2 As Integer)

DrawRectangle(ByVal p As Pen, ByVal x As Integer, _ ByVal y As Integer, ByVal width As Integer, _ ByVal height As Integer)

DrawRectangle(ByVal p As Pen, ByVal x As Integer, _ ByVal y As Integer, ByVal width As Integer, _ ByVal height As Integer)

Visual Basic 2005




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.

Draws an ellipse inside a bounding rectangle of the specified width and height. The top-left corner of the bounding rectangle is located at (x, y). The Pen determines the color, style and border width of the ellipse.

FillRectangle(ByVal b As Brush, ByVal x As Integer, _ ByVal y As Integer, ByVal width As Integer, _ ByVal height As Integer)

FillRectangle(ByVal b As Brush, ByVal x As Integer, _ ByVal y As Integer, ByVal width As Integer, _ ByVal height As Integer)

DrawEllipse(ByVal p As Pen, ByVal x As Integer, ByVal y As Integer, _ ByVal width As Integer, ByVal height As Integer)DrawEllipse(ByVal p As Pen, ByVal x As Integer, ByVal y As Integer, _ ByVal width As Integer, ByVal height As Integer)

Visual Basic 2005




Draws a filled ellipse inside a bounding rectangle of the specified width and height. The top-left corner of the bounding rectangle is located at (x, y). The Brush determines the pattern inside the ellipse.FillEllipse(ByVal b As Brush, ByVal x As Integer, _ ByVal y As Integer, ByVal width As Integer, _ ByVal height As Integer)

FillEllipse(ByVal b As Brush, ByVal x As Integer, _ ByVal y As Integer, ByVal width As Integer, _ ByVal height As Integer)

Visual Basic 2005




Demonstration of methods that draw lines, rectangles and ellipsesPublic Class FrmLinesRectanglesOvals ' override Form OnPaint method Protected Overrides Sub OnPaint(ByVal paintEvent As PaintEventArgs) ' get graphics object Dim g As Graphics = paintEvent.Graphics Dim brush As New SolidBrush(Color.Blue) Dim pen As New Pen(Color.Black)

' create filled rectangle g.FillRectangle(brush, 90, 30, 150, 90)

' draw lines to connect rectangles g.DrawLine(pen, 90, 30, 110, 40) g.DrawLine(pen, 90, 120, 110, 130) g.DrawLine(pen, 240, 30, 260, 40) g.DrawLine(pen, 240, 120, 260, 130)

' draw top rectangle g.DrawRectangle(pen, 110, 40, 150, 90). . .continued

Public Class FrmLinesRectanglesOvals ' override Form OnPaint method Protected Overrides Sub OnPaint(ByVal paintEvent As PaintEventArgs) ' get graphics object Dim g As Graphics = paintEvent.Graphics Dim brush As New SolidBrush(Color.Blue) Dim pen As New Pen(Color.Black)

' create filled rectangle g.FillRectangle(brush, 90, 30, 150, 90)

' draw lines to connect rectangles g.DrawLine(pen, 90, 30, 110, 40) g.DrawLine(pen, 90, 120, 110, 130) g.DrawLine(pen, 240, 30, 260, 40) g.DrawLine(pen, 240, 120, 260, 130)

' draw top rectangle g.DrawRectangle(pen, 110, 40, 150, 90). . .continued

Visual Basic 2005




Demonstration of methods that draw lines, rectangles and ellipses ' set brush to red brush.Color = Color.Red

' draw base Ellipse g.FillEllipse(brush, 280, 75, 100, 50)

' draw connecting lines g.DrawLine(pen, 380, 55, 380, 100) g.DrawLine(pen, 280, 55, 280, 100)

' draw Ellipse outline g.DrawEllipse(pen, 280, 30, 100, 50) End Sub ' OnPaint

End Class

' set brush to red brush.Color = Color.Red

' draw base Ellipse g.FillEllipse(brush, 280, 75, 100, 50)

' draw connecting lines g.DrawLine(pen, 380, 55, 380, 100) g.DrawLine(pen, 280, 55, 280, 100)

' draw Ellipse outline g.DrawEllipse(pen, 280, 30, 100, 50) End Sub ' OnPaint

End Class

Visual Basic 2005




Demonstration of methods that draw lines, rectangles and ellipses

Visual Basic 2005



Drawing ArcsDrawing Arcs

Arcs are portions of ellipses and are measured in degrees, beginning at a starting angle and continuing for a specified number of degrees called the arc angle

An arc is said to sweep (traverse) its arc angle, beginning from its starting angle

Arcs that sweep in a clockwise direction are measured in positive degrees

Arcs that sweep in a counter-clockwise direction are measured in negative degrees

Visual Basic 2005




Positive and negative arc angles

Visual Basic 2005




Draws an arc beginning from angle startAngle (in degrees) and sweeping sweepAngle degrees. The ellipse is defined by a bounding rectangle of width, height and upper-left corner (x,y). The Pen determines the color, border width and style of the arcDrawArc(ByVal p As Pen, ByVal x As Integer, ByVal y As Integer, _ ByVal width As Integer, ByVal height As Integer, _ ByVal startAngle As Integer, ByVal sweepAngle As Integer)

DrawArc(ByVal p As Pen, ByVal x As Integer, ByVal y As Integer, _ ByVal width As Integer, ByVal height As Integer, _ ByVal startAngle As Integer, ByVal sweepAngle As Integer)

Visual Basic 2005




Draws a pie section of an ellipse beginning from angle startAngle (in degrees) and sweeping sweepAngle degrees. The ellipse is defined by a bounding rectangle of width, height and upper-left corner (x,y). The Pen determines the color, border width and style of the arc

DrawPie(ByVal p As Pen, ByVal x As Integer, ByVal y As Integer, _ ByVal width As Integer, ByVal height As Integer, _ ByVal startAngle As Integer, ByVal sweepAngle As Integer)

DrawPie(ByVal p As Pen, ByVal x As Integer, ByVal y As Integer, _ ByVal width As Integer, ByVal height As Integer, _ ByVal startAngle As Integer, ByVal sweepAngle As Integer)

Visual Basic 2005




Functions similarly to DrawPie, except draws a solid arc (i.e., a sector). The Brush determines the fill pattern for the solid arc

FillPie(ByVal b As Brush, ByVal x As Integer, ByVal y As Integer, _ ByVal width As Integer, ByVal height As Integer, _ ByVal startAngle As Integer, ByVal sweepAngle As Integer)

FillPie(ByVal b As Brush, ByVal x As Integer, ByVal y As Integer, _ ByVal width As Integer, ByVal height As Integer, _ ByVal startAngle As Integer, ByVal sweepAngle As Integer)

Visual Basic 2005



Drawing Polygons and PolylinesDrawing Polygons and Polylines

Polygons are multisided shapesThere are several Graphics methods used

to draw polygonsMethod Description

DrawLines Draws a series of connected lines. The coordinates of each point are specified in an array of Point objects. If the last point is different from the first point, the figure is not closed.

DrawPolygon Draws a polygon. The coordinates of each point are specified in an array of Point objects. If the last point is different from the first point, those two points are connected to close the polygon.

FillPolygon Draws a solid polygon. The coordinates of each point are specified in an array of Point objects. If the last point is different from the first point, those two points are connected to close the polygon.

Visual Basic 2005



Advanced Graphics CapabilitiesAdvanced Graphics Capabilities

The FCL offers many other graphics capabilities

The Brush hierarchy, for example, also includes HatchBrush, LinearGradientBrush, PathGradientBrush and TextureBrush

Visual Basic 2005




Shapes drawn on a form

Visual Basic 2005




A general path is a shape constructed from straight lines and complex curves

An object of class GraphicsPath (namespace System.Drawing.Drawing2D) represents a general path

The GraphicsPath class provides functionality that enables the creation of complex shapes from vector-based primitive graphics objects

Visual Basic 2005




Paths used to draw stars on a form

Visual Basic 2005



Introduction to MultimediaIntroduction to Multimedia

The FCL offers many convenient ways to include images and animations in programs

Multimedia programming is an entertaining and innovative field, but one that presents many challenges

Multimedia applications demand extraordinary computing power

Visual Basic 2005



Loading, Displaying and Scaling ImagesLoading, Displaying and Scaling Images

Visual Basic's multimedia capabilities include graphics, images, animations and video

Application that loads and displays an image based on

the width and height set by the

user

Visual Basic 2005



Windows Media PlayerWindows Media Player

The Windows Media Player control enables an application to play video and sound in many multimedia formats

These include:◦ MPEG (Motion Pictures Experts Group) audio and video

◦ AVI (audio-video interleave) video◦ WAV (Windows wave-file format) audio ◦ MIDI (Musical Instrument Digital Interface) audio

Visual Basic 2005




Windows Media Player demonstrationPublic Class FrmMediaPlayer ' open new media file in Windows Media Player Private Sub openItem_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles openItem.Click openMediaFileDialog.ShowDialog()

' load and play the media clip player.URL = openMediaFileDialog.FileName End Sub ' openItem_Click

' exit program when exit menu item is clicked Private Sub exitItem_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles exitItem.Click

Application.Exit() End Sub ' exitItem_Click

End Class

Public Class FrmMediaPlayer ' open new media file in Windows Media Player Private Sub openItem_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles openItem.Click openMediaFileDialog.ShowDialog()

' load and play the media clip player.URL = openMediaFileDialog.FileName End Sub ' openItem_Click

' exit program when exit menu item is clicked Private Sub exitItem_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles exitItem.Click

Application.Exit() End Sub ' exitItem_Click

End Class

Visual Basic 2005




Windows Media Player demonstration

Windows Media Player control

Video file loaded into the Windows

Media Player

Visual Basic 2005



ExerciseExercise

Visual Basic 2005



End of Graphics and MultimediaEnd of Graphics and Multimedia

Visual Basic 2005


Technology

MELJUN CORTES Visual basic 2005 07 graphics and multimedia