3-1 Working with Graphics.pdf

8/18/2019 3-1 Working with Graphics.pdf

1/28

CHAPTER OUTLINEINTRODUCTION TO GRAPHICS

GRAPHICS IN VISUAL BASIC

DRAWING OBJECTS

C H A P T E R 3.1

Working with

Graphics


2/28

At the end of the chapter, thestudent should be able to:

understand computer graphics andits use;draw graphical elements in anapplication window; anduse image control in representing

image data.

2

Chapter Objectives


3/28

I.

INTRODUCTION TO GRAPHICS

Graphics , in computer science, are image datarepresentation by a computer using specialized graphichardware and software .

The term came from the Greek word graph ḗ (γραφή )which means a writing or drawing .

What are

G

raphics

?

Since most engineering solutions require graphicalrepresentation, manipulation, and analysis of visual information,it is essential that students are equipped with basic knowledge

in manipulating computer graphics.


4/28

I.


A pixel (short for picture element) isa single point, represented as a dotor square, in a raster image.

A raster graphics image is a dotmatrix data structure representing arectangular grid of pixels.

A dot matrix is a 2-dimensionalpatterned array, used to representcharacters, symbols and images.

Pixel


5/28

I.


1. Two-dimensional (2D)Graphics are said to be 2D whengeometric models, digital images,

text, mathematical functions andequations are represented on aEuclidean plane .Being limited to two dimensions,2D graphical manipulations arelimited to translation, rotation,and scaling geometrictransformations.

Types

of Graphics


6/28

I.


Types of 2D Graphics

A. Pixel ArtA pixel art is a raster graphic-based

image.Graphics in most old computer and videogames and many mobile phone gamesare mostly pixel art.

Pixel arts are scaled (enlarged) using thenearest neighbor interpolationalgorithm where new pixels arecalculated using the original neighboringpixels.

Types

of

Graphics (cont.)


7/28

I. INTRODUCTION TO GRAPHICS

Types of 2D Graphics (cont.)

B. Vector GraphicsVector graphics use points, lines,

curves, and polygons — based onmathematical expressions — torepresent images.From the term “vectors”, vectorgraphics are path-based and eachpoint in the path has definedcoordinate , stroke color , shape ,thickness , and fill.Modern typography (fonts) use vector

graphics.

Types of Graphics (cont.)


8/28


2. Three-Dimensional (3D)3D graphics use a 3Drepresentation of geometric data.

In development, 3D graphics exist inraw 3D geometric file but most ofthe time are processed (calledrendering ) to appear real duringpresentation.

In wire-frame , 3D graphics usevector graphics for representation.After rendering , 3D computergraphics rely on raster graphics forrepresentation.

Types of Graphics (cont.)


9/28


A color space is a specific spatialorganization of colors.

A color model is an abstractmathematical model describingthe way colors can berepresented as ordered list ofnumbers such as Red-Green-Blue

(RGB) and Cyan-Magenta-Yellow-Black (CMYK)

Color Spaces and Models


10/28

II. GRAPHICS IN VISUALBASIC

Windows APIs are dynamic-link libraries (DLLs) that areused to perform tasks which are already part of the

Windows operating system.The advantage of using Windows APIs in programmingis that they save development time because they containdozens of useful functions that are already written and

waiting to be used.The disadvantage is that Windows APIs can be difficultto work with and unforgiving when things go wrong.

Windows Application

Progr amming Interface (API)


11/28

II. GRAPHICS IN VISUAL BASIC

GDI+ is a Windows API that isresponsible for displayinggraphics and formatted texts

on screens and printers.As its name suggests, GDI+ isthe successor to GDI — thegraphics device interfaceincluded with earlier versionsof Windows.

Graphics Device Interface+ (GDI+)


12/28


The System.Drawing parent namespace of the .NetFramework contains types that support basic GDI+graphics functionality.

The Child namespaces support advanced 2D andvector graphics functionality ; advanced imagingfunctionality; and print-related and typographicalservices .

A child namespace also contains types that extenddesign-time user-interface logic and drawing.

System.Drawing Namespace


13/28


System.Drawing Namespace (cont.)

More advanced functionalityis provided in the

System.Drawing.Drawing2D ,

System.Drawing.Imaging, andSystem.Drawing.Textnamespaces.

System.DrawingChild Namespaces


14/28


PictureBox ControlThe Windows FormsPictureBox control isused to display graphics

in bitmap , GIF, JPEG ,metafile , or icon format.

The (x,y) coordinate ofeach pixel in a

picturebox starts at theupper-left corner of thecontrol.


15/28


“Paint” EventHandlerA graphic can be drawn conveniently in a form orpicturebox .

To create a graphic, the control should respond to the

event “Paint” Eventhandler.

Private Sub Form1_Paint( ByVal sender As Object , ByVal e As _System.Windows.Forms. PaintEventArgs ) Handles Me .Paint

' Code here

End Sub


16/28

III. DRAWING OBJECTS

Colors can be represented in two ways in VB.1. Using the built-in color. Colors are set in VB using:

Color .e.g. Color .Blue

2. Manually indicating the RGB value.• Using RGB: Color .FromArgb(, , )

e.g. Color .FromArgb(255, 255, 255)• Or hexadecimal value:

System.Drawing.ColorTranslator.FromHtml (“< Hexcode>")e.g. System.Drawing.ColorTranslator.FromHtml("#FF5B5B")

Color Object


17/28


Pens are objects in the System.Drawing Class which areused in drawing lines and points.

Properties of pen include color and width .

Pens are declared as follows:

Example:

Pen Object

Dim As New Pen (, )

Dim YellowPen As New Pen ( Color .Yellow, 1)


18/28


Brushes are objects in the System.Drawing Class whichare used in color filling geometric shapes and renderingtexts.

A brush only has one property to be set: color .Brushes are declared as follows:

Example:

Brush Object

Dim As New SolidBrush ()

Dim YellowBrush As New SolidBrush ( Color .Yellow)


19/28


To draw objects, use the“Graphics” property of thepaint event “e” .

e.Graphics allow access to thefundamental geometric shapesin VB.

Note that in specifying thecoordinates, X=0 is at the leftmost side while Y=0 is at thetop most side of the form.

e.Graphics


20/28


The Visual Basic Pen object can be used todraw lines between specific points asfollows:

The example code below draws a linebetween the coordinates provided usinga pen with a width of 10 pixels:

Drawing Lines

e.Graphics.DrawLine(, , _, ,)

e.Graphics.DrawLine(greenPen, 20, 30, 100, 100)


21/28


The Visual Basic Pen object can be used todraw ellipse specifying the start pointand dimension of the ellipse as follows:

The example code below draws anellipse using the start coordinates, widthand height:

Drawing Ellipse

e.Graphics.DrawEllipse(, , _, , )

e.Graphics.DrawEllipse(greenPen, 10, 10, 100, 200)


22/28


Similar to ellipse, draw a rectanglespecifying the start point and dimensionas follows:

The example code below draws anellipse using the start coordinates, widthand height:

Drawing Rectangle

e.Graphics.DrawRectangle(, , _, ,


23/28


The example code below draws asolid rectangle using the startcoordinates , width and height :

Solid -Fill Shapes

e.Graphics.FillRectangle(blueBrush, 20, _30, 100, 100)

A shape with solid-fill can be drawn using a brush.

A solid-fill shape has the same parameters with theequivalent non-solid object (e.g.: draw a solid-fill

rectangle by specifying the start coordinates and thewidth and height of the rectangle).


24/28


A shape with gradient-fill can be drawn by:1. Defining a non-solid fill rectangle which will contain the

gradient;2. Defining the gradient; and

3. Drawing the gradient-fill shape.

The example code below draws a gradient-fillrectangle:

Gradient -Fill Shapes

Dim myRectangle As New Drawing. Rectangle (10, 10, 25, 25)Dim myGradient As New Drawing2D. LinearGradientBrush (myRectangle, _

Color .Red, Color .Blue, 45)e.Graphics.FillRectangle(myGradient, 10, 10, 100, 100)

Dim myGradient As New Drawing2D. LinearGradientBrush (, _ , , )


25/28


A raster text can be drawn using a brush and done thruthe following:

1. Declaring a font.

2. Drawing the text.

See example below:

Text -Drawing Objects

Dim fontObject As Font = New System.Drawing. Font ( "Times" , 12, FontStyle .Bold)e.Graphics.DrawString( "You got it!" , fontObject, Brushes .Chocolate, 10, 10)

Dim fontObject As Font = New System.Drawing. Font ( “" , _, )

e.Graphics.DrawString( “" , , , _, )


26/28


A form or picturebox can be cleared of graphics thruthe following syntax:

As shown below, the picturebox was cleared of anygraphics.

Clearing a Drawing Control

e.Graphics.Clear( Color .Empty)


27/28

SUMMARY

Using GDI+ API, the syntax forcreating graphics in Visual BASICwere simplified.

However, effectively using thesecodes and combining them with other

programming structures are based onthe creativity and skill of theprogrammer.

PictureBox and forms are VB controls

which can handle graphics thru the“Paint” event.


28/28

Thank you very much!Next Chapter:FUNDAMENTALS OF COMPUTER VISIONIntroduction to computer visionDigital images and colors

BinarizationBasic image analysisFiltering

3-1 Working with Graphics.pdf

Documents

Transcript of 3-1 Working with Graphics.pdf