Date post: | 07-Jul-2018 |
Category: |
Documents |
Upload: | stephanie-lopez |
View: | 215 times |
Download: | 0 times |
of 28
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” .
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
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
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 (, _ , , )
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