Paths

A path is s series of joined up lines that can be closed to form an irregular shape. It has its own constructor Path(), which creates a new path object, and it has a large number of methods. If path is the Path object these include,

path.moveTo( x, y) moves the path pointer to the position given by the float values x and y.

path.lineTo( x, y) draws a line to the point defined by the float values x and y.

path.close() completes the closed path by joining the last point drawn to the first one.

path.reset() clears the path and allows the variable to be reused to draw another path.

canvas.drawPath( path, paint) finally draw the path that has been defined by path using the current values of paint.

So here is an example of a path drawing operation to draw a diamond shape. The Path object has to be declared outside the onDraw() method. Otherwise a succession of draw movements would create new paths. So we just create on in the View class, which becomes. Also, the paint color has to be set separately.

public class ShapeView extends View{
Paint paint= new Paint();
Path path = new Path();

public ShapeView(Context context){
super(context);
}

public void onDraw(Canvas canvas){
float width=8;
float x=240,y=300, a=100, b=120;
this.setBackgroundColor(Color.LTGRAY);

path.moveTo(x-a, y);   // first draw the path
path.lineTo(x, y-b);
path.lineTo(x+a, y);
path.lineTo(x, y+b);
path.close();

paint.setStyle(Paint.Style.STROKE);   // draw the outline
paint.setStrokeWidth(width);
paint.setColor(Color.BLACK);
canvas.drawPath(path,paint);
paint.setStyle(Paint.Style.FILL);         //fill the path
paint.setColor(Color.GREEN);
canvas.drawPath(path,paint);
}
}

The result of this code is as shown in Figure 1

Figure 1. A path object in the shape of a diamond.

A Car

Paths can be used to draw more complex shapes that simple diamonds and they can be scaled using the drawing units approach introduced in the previous tutorial. They can also be combined with all the other shapes. For example to draw a toy car we might draw a path for the body, circles for the wheels and rectangles for the windows, as in the following app.

public void onDraw(Canvas canvas){
float u;
if (width<height) u=width/1000;
else u=height/1000;
float width=8*u;
this.setBackgroundColor(Color.GRAY);

path.moveTo(200*u, 300*u); // first draw the car body path
path.lineTo(540*u, 300*u);
path.lineTo(600*u, 500*u);
path.lineTo(820*u, 500*u);
path.lineTo(860*u, 700*u);
path.lineTo(160*u, 700*u);
path.close();

paint.setStyle(Paint.Style.STROKE); // draw the outline
paint.setStrokeWidth(width);
paint.setColor(Color.BLACK);
canvas.drawPath(path,paint);
paint.setStyle(Paint.Style.FILL); //fill the path
paint.setColor(Color.YELLOW);
canvas.drawPath(path,paint);

paint.setColor(Color.BLACK);
canvas.drawCircle(300*u, 700*u, 100*u, paint); //tyres
canvas.drawCircle(700*u, 700*u, 100*u, paint);
paint.setColor(Color.WHITE);
canvas.drawCircle(300*u, 700*u, 50*u, paint); // wheels
canvas.drawCircle(700*u, 700*u, 50*u, paint);

paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE); //fill the path
canvas.drawRect(300*u, 330*u, 510*u,500*u, paint); //window

paint.setColor(Color.GRAY);
paint.setStyle(Paint.Style.FILL); //fill the path
canvas.drawRect(300*u, 330*u, 510*u,500*u, paint); //window
}

Here we use a 1/1000 scale again. First we draw a path to represent the car body and draw it with a yellow fill color and black outline. The coordinates can be obtained by plotting on paper first or by good guesses followed by trial and error. Then the wheels are added as black tires and while hubs and finally the window is added as a rectangle the same color as the background.

The result is illustrated in Figure 2.

Figure 2. A car drawn with a path, four circles and a rectangle.

Path Graphics

Paths

A Car