Now to tap into your artistic abilities in order to
draw! Don't get nervous, though. I know that,
as CompSci majors, we have about as much artistic ability as the computers we program. As long as someone
spells it out with enough well-defined parameters, we can get the job done.
You'll need to
using the
System.Drawing namespace to
tap into the pre-built graphics features of C#. To get started with the basics, we'll need to create a
Graphics object.
Graphics g = this.CreateGraphics();
Graphics contains a series of methods for many of the basics of drawing that
we'll need to get started. For example,
public void DrawLine() will take five (5)
arguments: the first is something called a
Pen, followed by the (x, y) coordinates
of one end-point, and the (x, y) coordinates of the other end-point. This will have the effect of drawing a
line between those two points, using the aforementioned
Pen (explained below),
which is the manner in which we broadly describe how points on the screen will be drawn.
There are often
Draw versions of the graphics we can create, as well as
Fill. As you might have guessed, there's no such thing as
FillLine,
so the implication is that Fill methods only exist for closed polygons. You can also substitute the (x, y)
coordinate pair (of integers, by the way), with a
Point object, which will contain
a... well, (x, y) coordinate pair.
Color
You might already be familiar with RGB representations of color on computer systems. Typically shown as six (6)
hexadecimal digits, they represent how much saturation of each of the three primary colors (red, green, and blue)
are being used. For example (and here's where writing these notes up in HTML comes in handy!),
this is #FF0000,
this is #00FF00, and
this is #0000FF. If I jack up the RGB values of all three to 255 (xFF),
<span>you would get white</span>, while taking them all down
to zero gets you
black (highlight the text on your screen if you absolutely
can't figure this one out...).
For my artist friends in the audience: yes, I know
your primary colors are red,
yellow,
and blue. But the cones in our eyes (the bits that allow us to perceive color at all) come in three distinct
types: red,
green, and blue. So we have biology on our side. Checkmate.
You can make the secondary colors (yellow, magenta, and cyan), by mixing equal parts of two primary colors.
here's #FFFF00,
here's #FF00FF;, and
here's #00FFFF. Adding/subtracting RGB values can ultimately create up
16,777,216 numerically distinct colors, although I strongly doubt you can see the green difference between
this #aa65cc color and
this #aa66cc
color.
(If you think you can, know this: I coded the #aa65cc text with #aa66cc color and vise versa. Simmer down.)
C# includes a fourth byte within the
Color struct that represents the color's
transparency, between 0 (fully transparent) and 255 (zero transparency). So for example,
here's #FFFF00 at zero transparency,
here's #FFFF00 at
50% transparency, and [
here's #FFFF00 at 80% transparency].
You can set all four values of the
Color struct by calling
public static Color FromArgb(int Alpha, int Red, int Green, int Blue).
There's also a healthy series of color values defined by name as static properties, such as
Color.DarkSeaGreen or
Color.Gold, if you'd rather use
those instead of digging around with RGB values.
(Let's take a brief break and enjoy one of my favorite Dad jokes:
This text recently
learned that it's child came out as transgender. Which then makes it...
a transparent.)
Pen
You can specify a
Pen's width (imagine the difference between drawing a line with
a needle-point pencil or a thick painter's brush), as well as the
Brush, such as a
SolidBrush (uses a single, solid color throughout the draw), a
TextureBrush which will draw with a specified image, or a
LinearGradientBrush, which will fill a space from one "end" to another, applying a
gradient between two previously defined colors. This one in particular is quite useful, as the nuts and bolts
implementation of a good color gradient can be tricky to achieve.
Pens also have two other useful properties:
PensDashStyle
, which can be set to create dashed lines of various styles, such as dots ......., dashes --------, or
one of our invention: .--.. --- .--.. or
LineJoin, which will dictate
the style of juncture when two lines meet, such as rounded, diagonal, etc. The options available are defined as
part of the
LineJoin enumeration.
Rectangles
Square/rectangle shapes are drawn by providing the (x, y) coordinates of the upper-left corner, followed by the
width and height of the rectangle. This will define the shape of rectangle, extending to the right and down from
the (x, y) coordinate provided. Which does segway into one other important feature to realize about drawing:
the coordinate system within our Windows do not have a negative component to them! The origin (0, 0) is actually
located in the uppermost left corner, with the positive X direction going in the right direction (intuitive)
and the positive Y direction going in the down direction (counter-intuitive). This means that
Graphics g = this.CreateGraphics();
g.DrawRectangle(myPen, 0, 0, 50, 50);
will draw a 50 by 50
square, with the upper left corner at the origin and the bottom right corner at
(50, 50), which will be
down and to the right from the origin. Take it from me: this type
of coordinate system takes some getting used to, so don't hesitate to paper and pencil some of these drawings
as you're getting used to it.
Circles
Similar to how we use
DrawRectangle to draw a square (provided the Length and Width
are the same value), we will use
DrawEllipse to draw a circle, where both the focus
points of the ellipse are the center of the circle. While looking into this issue, I discovered an excellent pair
of wrapper functions for this (
found here) that
simply extends the graphics drawing methods. I highly recommend making a copy of this yourself, as you reduce
the complexity of the method call for drawing one of the most frequently used shapes, from five (5) arguments
(including their corresponding calculations) to four (4) arguments and no calculations.
