Visual Basic Graphics

1
Visual Basic Graphics
Warning The way I am using Visual Basic
graphics is somewhat different (and much
simpler!) to that of the book. Use these slides
as you main reference.
2
picturebox
We will change color to white
EamonnsPicBox
Note size 696 , 224
3
Assume that all code you see today is written
here.
4
When we run our program, we see this form, with a
blank picturebox control
224
696
Almost all computer graphic systems (including
VB) use an upside down Cartesian coordinate
system
5
(0,0)
(696,224)
(102,112)
0
112
224
0
348
696
Any point in the Cartesian coordinate system is
specified by a pair of numbers X and Y.
6
(0,0)
(696,224)
Let us draw the line above in VB
7
There is a built-in function that will draw a
line
EamonnsPicBox.CreateGraphics.DrawLine(Pens.Blue,
0, 0, 696, 224)

• The parameter list is
• The Pen object (more later)
• The first points X coordinate
• The first points Y coordinate
• The second points X coordinate
• The second points Y coordinate

Note You must click on the control to make the
line appear
8
We can draw multiple lines
EamonnsPicBox.CreateGraphics.DrawLine(Pens.Blue,
0, 0, 696, 224) EamonnsPicBox.CreateGraphics.Draw
Line(Pens.Red, 0, 224, 696, 0)
9
We can use all the VB tools we have previously
learned in conjunction with the graphics tools!
Dim shtLoopCounter As Short For
shtLoopCounter 0 To 224 Step 20
EamonnsPicBox.CreateGraphics.DrawLine(Pens.Blue,
0, 0, 696, shtLoopCounter) Next shtLoopCounter
10
There is a function Rnd which produces random
numbers
Function Description Returns a pseudo random
decimal number that is greater than or equal to 0
and less than 1. By passing Rnd an optional
numeric parameter, you can further control the
type of random number you generate. Common Uses
Random numbers are required for a great many
reasons. By combining the output of the Rnd
function with some basic mathematics, random
numbers can be generated within a given range.
Review
Syntax Single Rnd()
To produce random numbers in a range, from
lowerbound to upperbound Int((upperbound -
lowerbound 1) Rnd lowerbound)
11
Dim shtLoopCounter, shtX, shtY As Short
For shtLoopCounter 0 To 100 shtX
Int((696 - 0 1) Rnd() 0) shtY
Int((224 - 0 1) Rnd() 0)
EamonnsPicBox.CreateGraphics.DrawLine(Pens.Blue,
348, 112, shtX, shtY) Next shtLoopCounter
Note, this example suffers from magic numbers,
we will learn to fix this latter
12
There is a built-in function that will draw (axis
parallel) rectangles
EamonnsPicBox.CreateGraphics.DrawRectangle(Pens.Bl
ack, 100, 100, 10, 90) EamonnsPicBox.CreateGraphic
s.DrawRectangle(Pens.Red, 200, 100, 10,
80) EamonnsPicBox.CreateGraphics.DrawRectangle(Pen
s.Blue, 300, 100, 50, 50)

• The parameter list is
• The Pen
• The top left corner Xs coordinate
• The top left corner Ys coordinate
• The width of the rectangle
• The height of the rectangle

13
It is legal (and sometimes useful) to draw
objects that do not fit on the screen (even if
this means giving a negative value for a
coordinate )
EamonnsPicBox.CreateGraphics.DrawRectangle(Pens.B
lack, -20, 10, 100, 90)
14
There is a built-in function that will draw (axis
parallel) ellipses
EamonnsPicBox.CreateGraphics.DrawEllipse(Pens.Bla
ck, 100, 100, 90, 60) EamonnsPicBox.CreateGraphic
s.DrawEllipse(Pens.Red, 300, 100, 30, 80)
EamonnsPicBox.CreateGraphics.DrawEllipse(Pens.Blue
, 500, 100, 50, 50)
The parameter list is the same as for drawing
rectangles, except we imagine the smallest
rectangle that the ellipses we want could fit
into
15
There is a built-in function that will draw arcs
EamonnsPicBox.CreateGraphics.DrawArc(Pens.Blue,
100, 20, 350, 150, 0, 160)
The parameter list is the same as for drawing
ellipses, except we also specify the start and
sweep of the arc
16
EamonnsPicBox.CreateGraphics.DrawArc(Pens.Blue,
100, 20, 350, 150, 0, 160)
start
sweep
17
There is a built-in function that will draw pie
segments
EamonnsPicBox.CreateGraphics.DrawPie(Pens.Blue,
100, 20, 350, 150, 0, 160)
The parameter list is the same as for drawing
arcs.
18
The Pen revisited
A Pen is an object. We are not going to study
objects in VB too much. For now lets think of it
like this We know that a variable, like shtAge
has exactly one property, its value, for example
24 or 58. We can think of an object, as having
more than one property. What properties do real
pens have? They have color, and width We can
declare and use a new pen like this.. Dim MyPen
As New Pen(Color.Purple, 5) EamonnsPicBox.CreateG
raphics.DrawPie(MyPen, 100, 20, 350, 150, 0, 160)
19
Dim MyPen As New Pen(Color.Purple, 5)
EamonnsPicBox.CreateGraphics.DrawPie(MyPen, 100,
20, 350, 150, 0, 160)
20
Dim MyPen As New Pen(Color.Black, 3)
EamonnsPicBox.CreateGraphics.DrawEllipse(MyPen,
100, 100, 90, 60) MyPen.Color Color.Red
MyPen.Width 15 EamonnsPicBox.CreateGraphics.Draw
Ellipse(MyPen, 300, 100, 90, 60)
Once we have created a pen, we can change its
properties and reuse it again and again
21
The SolidBrush Object I
All the functions we have seen thus far have
solid versions Dim MyBrush As New
SolidBrush(Color.Blue) EamonnsPicBox.CreateGraphi
cs.FillRectangle(MyBrush, 100, 100, 100, 90)
EamonnsPicBox.CreateGraphics.FillEllipse(MyBrush,
200, 100, 100, 90) MyBrush.Color Color.Red
EamonnsPicBox.CreateGraphics.FillPie(MyBrush,
300, 20, 350, 150, 0, 160)
22
The SolidBrush Object II
A SolidBrush is an object. What properties do
real SolidBrushes have? They have color We can
declare and use a new SolidBrush like this.. Dim
MyBrush As New SolidBrush(Color.Blue) EamonnsPicBo
x.CreateGraphics.FillRectangle(MyBrush, 100, 100,
300, 90)
23
The Font Object
A Font is an object. What properties do real
Fonts have? They have typeface and size We can
declare and use a new Font like this.. Dim
MyFont New Font("Arial", 46) eamonnsPicBox.Creat
eGraphics.DrawString("Pan is Dead", MyFont,
MyBrush, 100, 100)
24
Homework/Lab
Due on Friday 19th of November (Thursday the 11th
is a holiday) at the beginning of class. Use the
tools you have learned today (and a few more we
will see next time) to create an image of one of
the Simpson's characters (I would especially
prefer a minor character). You need to first
sketch it out on graph paper, and have myself or
Eric sign off on it before you proceed. The
graph paper drawing should include the locations
of some of the major features. Hand in a screen
dump, the graph paper, and a printout of the
code Do a good job! Because the final project in
the class will extend your work here.
25
(No Transcript)
26
(No Transcript)