Results 1 to 12 of 12

Thread: Visual Basic.Net - Graphics for Beginners

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Visual Basic.Net - Graphics for Beginners

    Basic Introduction to GDI+
    The most basic form of graphics programming in Visual Basic.Net utilizes a collection of classes known as GDI+. GDI+ stands for Graphics Device Interface Plus and the reason for the plus suffix is because prior to GDI+ there was GDI so it is there to be shown as an improvement over its predecessor.

    The GDI+ classes reside in the System.Drawing namespace and some classes are:
    1. System.Drawing.Bitmap
    2. System.Drawing.Graphics
    3. System.Drawing.Icon
    4. System.Drawing.Image

    Just to name a few. Each class serves its purpose and throughout the following tutorial you’ll find how to utilize these classes to do basic drawing operations in Visual Basic.Net.

    Surfaces
    In order for a painter to start painting, he must have a canvas; the same is true in programming. In Visual Basic.Net, there are two types of canvases for a programmer to use. The first type of canvas is any type of object that inherits System.Windows.Forms.Control, these include:
    1. System.Windows.Forms.Button
    2. System.Windows.Forms.Panel
    3. System.Windows.Forms.TextBox

    Just to name a few. In order to access the control’s canvas, aka – surface, you would handle the control’s Paint event.

    The second type of canvas is the System.Drawing.Bitmap class. A Bitmap consists of a collection of pixels that ultimately make up an image; just like any class, to declare a Bitmap you must declare a new instance of the object and because a Bitmap implements the System.IDisposable interface it is important to declare a new instance of a Bitmap by utilizing the Using statements.
    Here is an example of declaring a Bitmap:
    Code:
    Using b As Bitmap = New Bitmap(50, 50)
    
    End Using


    Graphics
    Once you have a canvas to draw on, you need to have some kind of object to start the drawing; the System.Drawing.Graphics class is what takes care of the drawing operations in Visual Basic.Net. There are three different methods to use the Graphics class, one method accesses a Graphics object that already exist while the other two methods actually create a Graphics object.

    In order to access a Graphics object that already exists, you must utilize the PaintEventArgs in a control’s Paint event. This is the parameter e in the event declaration, highlighted in red:

    Code:
    Private Sub Form1_Paint(ByVal sender As Object, ByVal e As PaintEventArgs) Handles MyBase.Paint
        Dim g As Graphics = e.Graphics
    End Sub
    In this particular example, it allows you to access the Graphics object associated with the surface of Form1. Something worth mentioning is that the Graphics class also implements System.IDisposable, but if you notice in the example that I do not utilize the Using statement. This is because disposing of any part of an argument in an event handler is typically a bad idea and it’s best to allow the operating system to release the object after the painting takes place.

    The first example of creating a Graphics object is to use a control’s CreateGraphics method. This method creates the Graphics for a particular Control. Here would be an example of creating a Graphics object for a Panel using the CreateGraphics method:
    Code:
    Private Sub CreateButtonGraphics(ByVal sender As Panel)
        Using g As Graphics = sender.CreateGraphics()
    
        End Using
    End Sub
    The last example of creating a Graphics object would be to use one of the many From methods. The different From methods include:
    1. System.Drawing.Graphics.FromHdc
    2. System.Drawing.Graphics.FromHdcInternal
    3. System.Drawing.Grpahics.FromHwnd
    4. System.Drawing.Grpahics.FromHwndInternal
    5. System.Drawing.Graphics.FromImage

    The method most commonly used is the FromImage method and this is because a programmer will typically create a Bitmap to draw on rather than drawing on another device or window. The following is an example of creating a Bitmap and then creating a Graphics object from that Bitmap:
    Code:
    Using b As Bitmap = New Bitmap(50, 50)
        Using g As Graphics = Graphics.FromImage(b)
    
        End Using
    End Using
    Drawing Shapes
    Now that you have a canvas to draw on and an object to do the drawing operations, it’s time to start drawing some basic primitive shapes. This is done by calling the various Draw and Fill operations from the Graphics object. A few drawing operations include:
    1. System.Drawing.Graphics.DrawArc
    2. System.Drawing.Graphics.DrawEllipse
    3. System.Drawing.Graphics.DrawImage
    4. System.Drawing.Graphics.DrawLine
    5. System.Drawing.Graphics.DrawRectangle


    Just to name a few. A few fill operations include:
    1. System.Drawing.Graphics.FillEllipse
    2. System.Drawing.Graphics.FillPolygon
    3. System.Drawing.Graphics.FillRectangle


    Just to name a few. The difference between Draw versus Fill is that Draw will draw just the outline of the shape whereas Fill will fill the interior of the shape.

    In order to call the various Draw operations, the Graphics object needs an object that will actually draw the shape and this object is the System.Drawing.Pen class. The Pen class determines the color, width, and style of the shape. The Pen class also implements IDisposable which means that it is important to utilize the Using statement when creating pens. Here are examples of creating different pens:
    Code:
    Using p As Pen = New Pen(Color.Red)
        ‘Creates a new red color pen with the size defaulted to 1
    End Using
    
    Using p As Pen = New Pen(Color.Red, 5)
        ‘Creates a new red color pen with the size set to 5
    End Using
    The Fill operations also need an object that will actually fill the shape and this object is the System.Drawing.Brush class. The Brush class is a bit different than the Pen class in that there are several different types of brushes. However, for this tutorial we will be using the System.Drawing.SolidBrush class to do the various Fill operations. Just like the Pen class, the SolidBrush implements IDisposable and it is important to utilize the Using statement when creating a SolidBrush. Here is an example of a solid brush:
    Code:
    Using b As SolidBrush = New SolidBrush(Color.Red)
        ‘Creates a new red color brush
    End Using
    Now that we have all the objects needed, we can start drawing primitive shapes. Here is an example of drawing and filling several primitive shapes on a Form’s surface:
    Code:
    Private Sub Form1_Paint(ByVal sender As Object, ByVal e As PaintEventArgs) Handles MyBase.Paint
        Dim g As Graphics = e.Graphics
    
        ‘Draw a simple house
        Using p As Pen = New Pen(Color.Red)
            ‘Draw the upper-left roof
            g.DrawLine(p, New Point(50, 50), New Point(75, 25))
    
            ‘Draw the upper-right roof
            g.DrawLine(p, New Point(75, 25), New Point(100, 50))
    
            ‘Draw the body
            g.DrawRectangle(p, New Rectangle(50, 50, 50, 50))
        End Using
    
        Using b As SolidBrush = New SolidBrush(Color.Yellow)
            ‘Fill in a Sun
            g.FillEllipse(b, New Rectangle(0, 0, 35, 35)
    
             ‘Fill in the door for the house
             g.FillRectangle(b, New Rectangle(60, 75, 30, 100))
        End Using
    End Sub
    Conclusion
    Hopefully you learned how to draw in Visual Basic.Net using GDI+. As you can tell, drawing is fairly simple but can have its pitfalls such as not utilizing the Using statements when declaring the various objects.
    Last edited by dday9; Apr 16th, 2015 at 05:06 PM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Re: Visual Basic.Net - Graphics for Beginners

    Reserved.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  3. #3
    Member
    Join Date
    May 2015
    Posts
    58

    Re: Visual Basic.Net - Graphics for Beginners

    I do not know how anyone else did not comment on this. Thank you, VERY MUCH for this tutorial. I haven't found any of these in similar fashion. Incredible for beginners such as myself. Thank you!

  4. #4

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Re: Visual Basic.Net - Graphics for Beginners

    Good, I'm glad you liked it!
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  5. #5
    Member
    Join Date
    May 2015
    Posts
    58

    Re: Visual Basic.Net - Graphics for Beginners

    Quote Originally Posted by dday9 View Post
    Good, I'm glad you liked it!
    Are there any other overloads that are good to read more about? Eclipse, rectangle, etc?

  6. #6

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Re: Visual Basic.Net - Graphics for Beginners

    I'm sorry for the late reply, I thought that I had replied to you but apparently I had not. Some good "intermediate" methods to read up on are:


    Draw/Fill Polygon helps draw more complex shapes and Draw/Fill Path helps set regions on controls.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  7. #7
    New Member
    Join Date
    May 2017
    Posts
    1

    Re: Visual Basic.Net - Graphics for Beginners

    It is very nice ,very easy to understand....

  8. #8

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Re: Visual Basic.Net - Graphics for Beginners

    Good, I'm glad you liked it!
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  9. #9
    Frenzied Member
    Join Date
    Apr 2016
    Posts
    1,415

    Re: Visual Basic.Net - Graphics for Beginners

    Thank you dday I like how you explain by use real life example of painter and canvas. I have not draw this house yet but am going to try!

  10. #10
    New Member
    Join Date
    Dec 2017
    Posts
    2

    Re: Visual Basic.Net - Graphics for Beginners

    Eu consigo ter interação com o objeto desenhado? Ex, desenhei um retângulo, consigo programar se ao clicar nela, apresentar uma determinada mensagem, ou até mesmo deixar a borda destacada, sinalizando que selecionei o objeto?

  11. #11
    New Member
    Join Date
    Dec 2017
    Posts
    2

    Re: Visual Basic.Net - Graphics for Beginners

    Can I have interaction with the drawn object? For example, I drew a rectangle, can I program it by clicking on it, displaying a certain message, or even leaving a highlighted border, signaling that I select the object?

  12. #12

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Re: Visual Basic.Net - Graphics for Beginners

    This is a good question and I may amend my original post to include this question.

    Whenever you draw on a bitmap, the shape made is not an object (aka - class) and therefore the data associated with the shape is not automatically stored somewhere. However, there is a simple workaround, you could store the data yourself and redraw it as needed where the user interacts with object. So for example, with your request, you could create a Class that stores the Rectangle (point and size) of the shape as well as a property that indicates if it is "selected". Then whenever you draw the shape using GDI+, you would simultaneously create a new instance of this custom Class. Then in the paren't click event where the shape is drawn, you would check if the location of where the parent was clicked is within the bounds of the shape drawn.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width