of 28

# 3-1 Working with Graphics.pdf

Jul 07, 2018

## Documents

Stephanie Lopez
Welcome message from author
Transcript
• 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

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

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

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

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.

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

4/28

I.

INTRODUCTION TO GRAPHICS

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

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

5/28

I.

INTRODUCTION TO GRAPHICS

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

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

6/28

I.

INTRODUCTION TO GRAPHICS

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

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

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/18/2019 3-1 Working with Graphics.pdf

8/28

I. INTRODUCTION TO GRAPHICS

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

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

9/28

I. INTRODUCTION TO GRAPHICS

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

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

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)

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

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+)

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

12/28

II. GRAPHICS IN VISUAL BASIC

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

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

13/28

II. GRAPHICS IN VISUAL BASIC

System.Drawing Namespace (cont.)

More advanced functionalityis provided in the

System.Drawing.Drawing2D ,

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

System.DrawingChild Namespaces

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

14/28

II. GRAPHICS IN VISUAL BASIC

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.

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

15/28

II. GRAPHICS IN VISUAL BASIC

“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

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

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

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

17/28

III. DRAWING OBJECTS

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)

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

18/28

III. DRAWING OBJECTS

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)

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

19/28

III. DRAWING OBJECTS

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

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

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

20/28

III. DRAWING OBJECTS

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)

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

21/28

III. DRAWING OBJECTS

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)

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

22/28

III. DRAWING OBJECTS

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(, , _, ,

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

23/28

III. DRAWING OBJECTS

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

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

24/28

III. DRAWING OBJECTS

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

The example code below draws a gradient-fillrectangle:

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)

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

25/28

III. DRAWING OBJECTS

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( “" , , , _, )

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

26/28

III. DRAWING OBJECTS

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)

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

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.

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

28/28

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

BinarizationBasic image analysisFiltering