/---------------------\
| Notes for lecture08 |
| 26 October 1999 |
| CS 125-609 |
| Michael Goldwasser |
\---------------------/
=========================================================================
GRAPHICS (Chapter 5.1 + additional notes thanks to online help)
=========================================================================
Preface: As usual, much of this material is covered in the text book
chapter, however some of it is not. A lot of this information is also
available in the online help pages.
Think of this document as my own mix between the two - sort of an
annotated help page on the commands
=========================================================================
GRAPHICS AT DESIGN TIME
If you ever want some basic graphics to spice up your form, you will
notice that the toolbox contains a control called a "Shape" and
another control called a "Line". These can be used for putting a bit
more graphics into the layout of your form.
Their use is pretty self explanatory as these controls do not have any
events associated with them. Their properties can be used to define
the size, shape, placement and other attributes. A shape control can
be used to represent a rectangle, square, rounded rectangle, rounded
square, circle or oval.
=========================================================================
GRAPHICS IN PICTURE BOXES
Much more interesting is the fact that we can use picture boxes at run
time for displaying graphics which we create (as opposed to loading a
pre-designed picture).
Actually, all of the rest of this material can equally be used to draw
in picture boxes, to draw on the form itself, or to draw directly to
the printer.
=========================================================================
COORDINATE SYSTEM
"How is an (x,y) value treated on the screen?"
The first interesting issue is the coordinate system for using
graphics. We have already seen a bit of this as controls are placed
on a Form by setting their Left, Top, Width, Height properties. All
of these properties are referencing an underlying coordinate system
for the Form. In a similar spirit, a picture box has its own
internal coordinate system which is separate from the Form's
coordinates.
This coordinate system is setup by default, however we are free to
change it at any time to better meet our graphical needs.
DEFAULT -- the default coordinate system is set up so that the
X-axis goes to the right as numbers increase, and so that the Y-axis
goes down as numbers increase. That is, the top-left corner can be
thought of as an origin, with coordinates increasing from there.
Note that using the top-left as an origin is quite common with
computers.
At the same time, you may want to change this default. For example,
mathematicians treat the X-axis as going to the right, but the
Y-axis as going UPWARDS as coordinates increase. (that is, the
bottom-left corner is often the origin).
Visual Basic lets you choose exactly how you want to treat the axes
in the coordinate system (we will see how this is done in a moment).
-------------------------------------------------------------------------
"What are the units?"
If we draw a circle with radius "50" what does the 50 mean? Again,
there are defaults ("twips") for how the units are set up by Visual
Basic, but we can change the scale of the coordinate system to be
based on inches, millimeters, pixels or many other values (see
ScaleMode property). In fact, we can even define the X-units and
Y-units to be whatever we want (and they can even be different from
each other).
-------------------------------------------------------------------------
object.Scale (x1,y1)-(x2,y2)
Resets the coordinate system so that the top-left corner of the
picture box is considered to have coordinates (x1,y1) and so that
the bottom-right corner has coordinates (x2,y2).
This command does not actually change the corners of the picture
box, rather it changes the coordinate system to line up the axes
and their units to match our desired system.
Example:
object.Scale (0,0)-(100,100) '<--- programmers view?
object.Scale (-50,-50)-(50,50) '<--- moving the origin
object.Scale (0,-100)-(100,0) '<--- mathematicians view?
=========================================================================
DEFAULT PEN LOCATION
Question: when I say to draw something, where does it get drawn?
Answer: There are really two answers. Many of the commands we see
will have a way to explicitly define where something gets drawn
(based on the coordinate system). But if you don't specify the
coordinates, it will use a default pen location which is based
partly on the location of the most recent graphic which was drawn.
For example, when using "Print" to display text in a picture box,
we have already seen the difference between placing a line break
and not. This really is effecting where the default pen location
is left after outputting the text.
In a similar manner, if you draw a line, the default gets left at
the endpoint of the line. If you draw a circle, it gets left at the
center of the circle, and so on.
The way this is done is based on the following two properties:
object.CurrentX
object.CurrentY
You may read and even modify these values at any time.
=========================================================================
DRAWING A POINT
To draw a point, you minimally need to specify the location of the
point. Optional is to give a color choice.
Syntax:
object.PSet [Step] (x,y), [color]
Part description
---- -----------
Step Optional. Keyword specifying that the starting point
coordinates are relative to the current graphics
position given by the CurrentX and CurrentY properties.
(x, y) Required. Single values indicating the coordinates of
the point being drawn.
color Optional. Indicates color used to draw the line. If
omitted, the ForeColor property setting is used.
Note: When PSet executes, the CurrentX and CurrentY properties are
set to the point specified by the arguments.
The "width" of the point is determined by the DrawWidth parameter
Examples:
' to draw a point at (5,5)
object.Pset (5,5)
' to draw a point at (CurrentX + 5, CurrentY + 5)
object.Pset Step(5,5)
' to draw a red point at (5,5)
object.Pset (5,5), vbRed
=========================================================================
DRAWING A LINE OR RECTANGLE
To draw a line, you minimally need to specify a starting and ending
point. Giving a color choice is optional.
To draw a rectangle, you minimally need to specify two opposite
corners. Giving a color choice for the boundary is optional. The
interior of the rectangle will be filled in based on the FillStyle
and FillColor properties of the picture box (invisible by default).
You can override this by changing the FillColor and FillStyle
properties, or by telling it that you want it filled solid using the
same color as the boundary.
Syntax:
object.Line [Step] (x1, y1) - [Step] (x2, y2), [color], [B][F]
Part description
---- -----------
Step Optional. Keyword specifying that the starting point
coordinates are relative to the current graphics
position given by the CurrentX and CurrentY properties.
(x1, y1) Optional. Single values indicating the coordinates of the
starting point for the line or rectangle. If omitted,
the line begins at the position indicated by CurrentX
and CurrentY.
Step Optional. Keyword specifying that the end point
coordinates are relative to the line starting point.
(x2, y2) Required. Single values indicating the coordinates of
the end point for the line being drawn.
color Optional. Indicates color used to draw the line. If
omitted, the ForeColor property setting is used.
B Optional. If included, causes a box to be drawn using the
coordinates to specify opposite corners of the box.
F Optional. If the B option is used, the F option
specifies that the box is filled with the same color
used to draw the box. You cannot use F without B. If B
is used without F, the box is filled with the current
FillColor and FillStyle. The default value for
FillStyle is transparent.
Note: When Line executes, the CurrentX and CurrentY properties are
set to the end point specified by the arguments.
Examples:
' to draw a line from (0,5) to (5,5)
object.Line (0,5)-(5,5)
' to draw a line from current location to the location (5,5)
object.Line -(5,5)
' to draw a line from current location to the location (currentX+5,currentY+5)
object.Line -Step(5,5)
' to draw a rectangle with opposite corners at (3,5) and (4,6)
' with boundary drawn in blue, and with the interior drawn
' according to the FillColor and FillStyle properties
object.Line (3,5)-(4,6), vbBlue, B
' to draw a rectangle with opposite corners at (3,5) and (4,6)
' with boundary drawn in red, and with interior filled in solid
' red.
object.Line (3,5)-(4,6), vbRed, BF
=========================================================================
DRAWING A CIRCLE, ELLIPSE, OR ARC
Syntax:
object.Circle [Step] (x, y), radius, [color, start, end, aspect]
Part description
---- -----------
Step Optional.Keyword specifying that the center of the
circle, ellipse, or arc is relative to the current
coordinates given by the CurrentX and CurrentY
properties of object.
(x, y) Required. Single values indicating the coordinates for
the center point of the circle, ellipse, or arc.
radius Required. Single value indicating the radius of the
circle, ellipse, or arc.
color Optional. Indicating the color of the circle's
outline. If omitted, the value of the ForeColor
property is used.
start, end Optional. Single-precision values. When an arc or a
partial circle or ellipse is drawn, start and end
specify (in radians) the beginning and end positions of
the arc. The range for both is - 2pi radians to 2pi
radians. The default value for start is 0 radians; the
default for end is 2 * pi radians.
aspect Optional. Single-precision value indicating the aspect
ratio of the circle. The default value is 1.0, which
yields a perfect circle on any screen.
Note: When Circle executes, the CurrentX and CurrentY properties are
set to the center of the circle.
In the case that the scale has been changed such that the x-units
and y-units are not equal, the circle radius is based on x-units.
To fill a circle, set the FillColor and FillStyle properties of the
object on which the circle or ellipse is drawn. Only a closed figure
can be filled. Closed figures include circles, ellipses, or pie
slices (arcs with radius lines drawn at both ends).
When drawing a partial circle or ellipse, if start is negative,
Circle draws a radius to start, and treats the angle as positive; if
end is negative, Circle draws a radius to end and treats the angle
as positive. The Circle method always draws in a counter-clockwise
(positive) direction.
When drawing pie slices, to draw a radius to angle 0 (giving a
horizontal line segment to the right), specify a very small negative
value for start, rather than zero.
Examples:
' draws a circle of radius 5 around the current pen location
object.Circle Step(0,0), 5
' draws a red circle of radius 10 around the point (50,50)
object.Circle (50,50), 10, vbRed
' draws a flat, wide ellipse around the point (50,50)
object.Circle (50,50), 40, , , , 0.2
' draws a quarter of a circle "pie-slice"
twopi = 8*atn(1)
object.FillColor = vbBlue
object.Circle (50,50), 20, , -twopi*3/8, -twopi*5/8
' draws three quarters of a circle (e.g. PacMan)
twopi = 8*atn(1)
object.FillColor = vbYellow
object.FillStyle = 0
object.Circle (50,50), 20, , -twopi*5/8, -twopi*3/8
=========================================================================
COLORS
There are three ways to describe a color for the above graphic
methods.
- Use predefined colors as in the textbook:
vbBlack, vbRed, vbGreen, vbYellow, vbBlue, vbMagenta, vbCyan, vbWhite
- QBColor(x)
where x is in the range 0-15 inclusive. These are a set of 16
predefined colors based on earlier versions of the Basic language
(see help page to get list of the colors)
- RGB(r,g,b)
where each of 'r', 'g', and 'b' are integers in the range 0-255,
with 0 being the lack of the color, and 255 being the most. (for
example, RGB(100,0,100) is a dark magenta)
=========================================================================
WORKING WITH TEXT
We have already seen the use of text in picture boxes (see lecture04).
But when combining text with graphics, it is important to be able to
tell the relative size of a piece of text in the coordinate system,
taking into account the font size and style being used.
object.TextHeight(string)
returns the height which would be used if the string were printed
with the Print method based on the current font settings. If the
string contains embedded carriage-return characters, then the text
height takes this into account.
Similarly, the method
object.TextWidth(string)
returns the width which will be used if the string is printed with
the Print method based on the current font settings.
=========================================================================
Other issues:
Although we will not officially cover these properties, you may want to
be aware of them for your own knowledge, as they are relevant to the
appearance of graphics which you draw.
AutoRedraw <-- best to set this to True when dealing with graphics!
BorderStyle
DrawMode
DrawStyle
DrawWidth
FillColor
FillStyle
=========================================================================