VB2017 VB2015 VB2013 VB2012 VB2010 VB2008 VB6 VB Sample Codes 中文VB About Us

Lesson 18 : Creating Graphics


Graphics forms a very important part of visual basic programming because an attractive user interface will be appealing to the users and improve the user-experience. In Visual basic, there are two general ways that we can use to create graphics. The first way is to use the Shape control, the line control, the image control and the pictureBox. The second way is to use the Pset, the Line and the Circle methods.

18.1 Using the Shape control

There are four basic controls in VB6 that you can use to draw graphics on your form: the line control, the shape control, the image box and the picture box. To draw a straight line, just click on the line control and then use your mouse to draw the line on the form. After drawing the line, you can then change its color, width and style using the BorderColor, BorderWidth and BorderStyle properties.Similarly, to draw a shape, just click on the shape control and draw the shape on the form. The default shape is a rectangle, with the default shape property set at 0. You can change the shape to square, oval, circle and rounded rectangle by changing the shape property’s value to 1, 2, 3 , 4, and 5 respectively. In addition, you can change its background color using the BackColor property, its border style using the BorderStyle property, its border color using the BorderColor property as well its border width using the BorderWidth property.

 

Example 18.1

The program in this example allows the user to change the shape by selecting a particular shape from a list of options from a list box, as well as changing its color through a common dialog box.

The objects to be inserted in the form are a list box, a command button, a shape control and a common dialog box. The common dialog box can be inserted by clicking on ‘project’ on the menu and then select the Microsoft Common Dialog Control 6.0 by clicking the check box. After that, the Microsoft Common Dialog Control 6.0 will appear in the toolbox; and you can drag it into the form. The list of items can be added to the list box through the AddItem method. The procedure for the common dialog box to present the standard colors is as follows:

				
CommonDialog1.Flags = &H1&
CommonDialog1.ShowColor
Shape1.BackColor = CommonDialog1.Color
	
    

The last line will change the background color of the shape by clicking on a particular color on the common dialog box as shown in the Figure 18.1 below:

The Code

Private Sub Form_Load()
List1.AddItem "Rectangle"
List1.AddItem "Square"
List1.AddItem "Oval"
List1.AddItem "Circle"
List1.AddItem "Rounded Rectangle"
List1.AddItem "Rounded Square"
End Sub
Private Sub List1_Click()
Select Case List1.ListIndex
Case 0
Shape1.Shape = 0
Case 1
Shape1.Shape = 1
Case 2
Shape1.Shape = 2
Case 3
Shape1.Shape = 3
Case 4
Shape1.Shape = 4
Case 5
Shape1.Shape = 5
End Select
End Sub
Private Sub Command1_Click()
CommonDialog1.Flags = &H1&
CommonDialog1.ShowColor
Shape1.BackColor = CommonDialog1.Color
End Sub
Figure 18.1 The color dialog
Figure 18.2: The Interface

18.2 The Image Control and the PictureBox

Using the line and shape controls to draw graphics will only enable you to create a simple design. In order to improve the look of the interface, you need to put in images and pictures of your own. Fortunately, there are two very powerful graphics tools you can use in Visual Basic 6 which are the image box and the picture box.

To load a picture or image into an image box or a picture box, you can click on the picture property in the properties window to launch a dialog box that will prompt you to select a certain picture file. You can also load a picture at runtime by using the LoadPictrure ( ) method. The syntax is

Image1.Picture= LoadPicture("C:\pathname\picture file name")
picture1.Picture= LoadPicture("C:\pathname\picture name")

For example, the following statement will load the grape.gif picture into the image box.

Image1.Picture= LoadPicture("C:\MyFolder\VB program\Images\grape.gif")

Example 18.2

In this example, each time you click on the ‘change pictures’ button as shown in Figure 18.2, you will be able to see three images loaded into the image boxes. This program uses the Rnd function to generate random integers and then uses the LoadPicture method to load different pictures into the image boxes using the If…Then…Statements based on the random numbers generated.

The code

               
Dim a, b, c As Integer
Private Sub Command1_Click ()
a = 3 + Int(Rnd * 3)
b= 3 + Int(Rnd * 3)
c= 3 + Int(Rnd * 3)
If a = 3 Then
Image1(0).Picture = LoadPicture("C:\My Folder\VB program\Images\grape.gif")
End If
If a = 4 Then
Image1(0).Picture = LoadPicture("C:\My Folder\VB program\Images\cherry.gif")
End If
If a = 5 Then
Image1(0).Picture = LoadPicture("C:\My Folder\VB program\Images\orange.gif")
End If
If b = 3 Then
Image1(1).Picture = LoadPicture("C:\My Folder\VB program\Images\grape.gif")
End If
If b = 4 Then
Image1(1).Picture = LoadPicture("C:\My Folder\VB program\Images\cherry.gif")
End If
If b = 5 Then
Image1(1).Picture = LoadPicture("C:\My Folder\VB program\Images\orange.gif")
End If
If c = 3 Then
Image1(2).Picture = LoadPicture("C:\My Folder\VB program\Images\grape.gif")
End If
If c = 4 Then
Image1(2).Picture = LoadPicture("C:\My Folder\VB program\Images\cherry.gif")
End If
If c = 5 Then
Image1(2).Picture = LoadPicture("C:\My Folder\VB program\Images\orange.gif")
End If
End Sub
Figure 18.3

 

18.3 PSet, Line and Circle Drawing Methods

Other than using the line and shape controls to draw graphics on the form, you can also use the Pset, Line and Circle methods to draw graphics on the form.

18.3.1 The Pset Method

The Pset method draw a dot on the screen, it takes the syntax

Pset (x , y ), color

(x,y) is the coordinates of the point and color is its color. To specify the color, you can use the color codes or the standard VB color constant such as VbRed, VbBlue, VbGeen and etc. For example, Pset(100,200), VbRed will display a red dot at the (100,200) coordinates.

 

The Pset method can also be used to draw a straight line on the form. The procedure is

For x= a to b
 Pset(x,x)
Next x

This procedure will draw a line starting from the point (a,a) and to the point (b,b). For example, the following procedure will draw a magenta line from the point (0,0) to the point (1000,1000).

For x= 0 to 100
 Pset(x,x) , vbMagenta
Next x

18.3.2 The Line Method

Although the Pset method can be used to draw a straight line on the form, it is a little slow. It is better to use the Line method if you want to draw a straight line faster. The format of the Line command is shown below. It draws a line from the point (x1, y1) to the point (x2, y2) and the color constant will determine the color of the line.

Line (x1, y1)-(x2, y2), color

For example, the following command will draw a red line from the point (0, 0) to the point (1000, 2000).

Line (0, 0)-(1000,2000), VbRed 

The Line method can also be used to draw a rectangle. The syntax is

Line (x1-y1)-(x2, y2), color, B

The four corners of the rectangle are (x1-y1), (x2-y1), (x1-y2) and (x2, y2)

Another variation of the Line method is to fill the rectangle with a certain color. The syntax is

Line (x1, y1)-(x2, y2), color, BF

If you wish to draw the graphics in a picture box, you can use the following syntaxes


Picture1.Line (x1, y1)-(x2, y2), color
Picture1.Line (x1-y1)-(x2, y2), color, B
Picture1.Line (x1-y1)-(x2, y2), color, BF
Picture1.Circle (x1, y1), radius, color

Example 18.3 The Bar Graph Plotter

We shall use the knowledge we gained from the Line method to create a bar graph. In this program, we shall insert a picture box for drawing the bar graph. In addition, we insert six text boxes for accepted the user input. We also insert two command buttons for drawing and reseting. Besides that, we need to define a new origin using the Scale method, otherwise, the bar graph will be upside down. The code is

Picture1.Scale (0, 5000)-(5000, 0)

The Code
Private Sub Command1_Click()
Dim sale1, sale2, sale3, sale4, sale5, sale6 As Integer

sale1 = Val(Txt_Jan.Text)
sale2 = Val(Txt_Feb.Text)
sale3 = Val(Txt_Mac.Text)
sale4 = Val(Txt_Apr.Text)
sale5 = Val(Txt_May.Text)
sale6 = Val(Txt_Jun.Text)

Picture1.Line (100, 0)-(600, sale1 * 50), vbRed, BF
Picture1.Line (700, 0)-(1200, sale2 * 50), vbRed, BF
Picture1.Line (1300, 0)-(1800, sale3 * 50), vbRed, BF
Picture1.Line (1900, 0)-(2400, sale4 * 50), vbRed, BF
Picture1.Line (2500, 0)-(3000, sale5 * 50), vbRed, BF
Picture1.Line (3100, 0)-(3600, sale6 * 50), vbRed, BF
Picture1.Line (3700, 0)-(4200, sale7 * 50), vbRed, BF
Picture1.Line (4300, 0)-(4800, sale8 * 50), vbRed, BF

End Sub

Private Sub Command2_Click()
Txt_Jan.Text = ""
Txt_Feb.Text = ""
Txt_Mac.Text = ""
Txt_Apr.Text = ""
Txt_May.Text = ""
Txt_Jun.Text = ""

Picture1.Cls

End Sub

Private Sub Form_Load()
'To redefine the coordinates of the origin
Picture1.Scale (0, 5000)-(5000, 0)

End Sub

The Output
Figure 18.4

18.3.3 The Circle Method

The Circle Method Draws a circle, ellipse, or arc on an object such as a form or a picture box. The syntax is :

object.Circle  (x, y), radius, color, start, end, aspect

Where

For example, the procedure

Form1.Circle (400, 400),500, VbRed

draws a circle centered at coordinates(400, 400) with a radius of 500 twips and a red outline on the form. Actually you can use the keyword Me to replace Form1, as follows

 Me.Circle (400, 400),500, VbRed

In addition, usually we need to re-define the coordinates system as the default coordinates of the origin (0,0) is at the top left corner. We would like to move it to somwehere in the middle. We can define the coordinates using the Scale method. The syntax is

 Scale(x1,y1)-(x2,y2)
where (x1,y1) is the new coordinates of the upper left corner and (x2,y2) is the new coordinates of the lower right corner.

For example,

 Scale (-2000,2000) - (2000,-2000)

changes the the coordinates of the upper left corner to (-2000,2000) and the coordinates of the lower right corner to (2000,-2000). Besides, be aware that we the measurement we use here is twip, 1cm is about 567 twip. In addition, we must also know that Circle has a few properties, namely FillColor, FillStyle, DrawWidth, DrawMode and DrawStyles. The DrawStyles are vbDot, vbDash, vbDashDot, vbSolid and vb DashDotDot. However, if the DrawWidth property is set to a value more than 1, the Drawstyles has no effect.

Example 18.3

This example will draw a circle, a sector, an arc and an ellipse with different colors and different DrawStyles

The Code
Dim pi As Single

Private Sub Form_Load()
'Change the coordinates of the origin
Scale (-4000, 4000)-(4000, -4000)
Me.Width = 8000
Me.Height = 8000

End Sub

Private Sub cmd_Draw_Click(Index As Integer)
    
pi = 4 * Atn(1)
Select Case Index
Case Is = 0
Me.FillColor = vbRed
Me.FillStyle = vbSolid
Me.DrawStyle = vbDot
Me.DrawWidth = 1
Me.Circle (0, 0), 800, vbYellow ' Draw a circle with red border
Case Is = 1
Me.FillColor = vbCyan
Me.FillStyle = vbSolid
Me.DrawStyle = vbDot
Me.DrawWidth = 3
Me.Circle (-2000, 0), 800, vbBlack, -pi, -pi / 2
Case Is = 2
Me.FillColor = vbYellow
Me.FillStyle = vbSolid
Me.DrawStyle = vbDashDot
Me.DrawWidth = 1
Me.Circle (-2000, -2000), 800, vbBlue, 0, pi
Case Is = 3
Me.FillColor = vbBlue
Me.FillStyle = vbSolid
Me.DrawStyle = vbDashDotDot
Me.DrawWidth = 1
Me.Circle (-1500, 2000), 800, vbCyan, , , 1.3
End Select

End Sub

The Output
Figure 18.5

For another example: Please refer to the Drawing Pad




Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy