CS 2302, Fall 2014
Graphics Concepts
Drawing Paths
12/1/2014
2
Drawing models




Drawing models explain how color is applied to
the screen to create graphics.
We’ve not had to worry about that so far
because we’ve worked with very simple figures.
However, even to draw something as simple as
a triangle and fill it in, our tools are not
adequate.
Drawing models usually work with a pen which
is moved around.

12/1/2014
Sometimes the pen leaves a trace, sometimes it
does not
3
Turtle Graphics





One drawing model, called Turtle Graphics was
popularized by a language called Logo.
The pen is called a turtle in this model
In this model, the turtle has a position and
heading.
The turtle can turn in place, changing its
heading
The turtle can move a given distance in the
direction it is currently heading
12/1/2014
4
Android Paths





The model used in Android for paths is similar,
but only works with position.
The pen has a current position at any time
The pen can be moved to another position. The
pen can leave a trace or not.
The pen can move in a straight line to another
position or along a variety of curved segments.
If the path is the outline of an area to be filled,
the path is ended by closing the path.
Once the Path is created, it must be drawn to
12/1/2014

5
Polygonal Paths

Paths made of line segments

Create a Path object

Apply methods


moveTo(x,y)

lineTo(x,y)

Close()
Use drawPath to make display the path
12/1/2014
6
Examples



We'll continue using the example project we
used earlier
Each example will be implemented as a new
widget that can be dragged into the user
interface
The first example will be a path that has five line
segments: two will be invisible, three will be
visible

Outline the path

Note the visible and invisible segments
12/1/2014

7
Fill the path
Cubic Paths


The cubic path demo app will show how a cubic
path segment works
A cubic path segment is defined by

Two endpoints

Two control points
12/1/2014
8
Cubic Demo Screenshot
12/1/2014
9
Diamonds


Another view will draw diamonds, create a new
View class
A diamond is created by connecting the
midpoints of the sides of a rectangle


Write a method that will draw a diamond given a
Canvas, fill color, outline color and the coordinates
of the bounding rectangle
In onDraw, draw a single diamond
12/1/2014
10
Resources




It will be useful to have several constants
defined in a resource files
These constants will specify certain
characteristics about the diamonds that will be
drawn
The first will be an integer resource that
specifies the stroke width of the border of each
diamond
Define the resource
Use the resource in the drawing program

12/1/2014

11
Define a final instance variable and initialize it in the