Top Banner

of 28

3-1 Working with Graphics.pdf

Jul 07, 2018

Download

Documents

Stephanie Lopez
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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” .

    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