Android Canvas Demonstration 1

We include several graphics features on this page, from simple drawing of shapes and lines to a Path to which we apply translation, rotation and scale. You can replace our code in the onDraw method with your own to test your static graphics before incorporating them in more complex motion graphics programs.

The documentation of the Java Canvas and Paint classes is very helpful. See our comments in the code below for the parameters of some of the more common methods. See the results of the code in this screenshot.

Screenshot

The code of MainActivity.pas

namespace org.me.canvas_demo1;

interface

uses
  java.util,  android.app,  android.content,  android.os,  android.util,  android.view,  android.graphics;

type
  MainActivity = public class(Activity)
  private
    drawView : DrawView;
  public
    method onCreate(savedInstanceState: Bundle); override;
  end;

  DrawView = class (View)
  private      
    paint : Paint  := new Paint;    
  public
    method onDraw(canvas : Canvas); override;
end;

implementation

method MainActivity.onCreate(savedInstanceState: Bundle);
begin
  inherited;
  drawView := new DrawView(self);
  drawView.setBackgroundColor(Color.WHITE);
  setContentView(drawView);
end; 

method DrawView.onDraw(canvas : Canvas);
const
  HB = 8;   //horizontal border
  VB = 20;  //vertical border
var
  boundingRect : RectF;
  stickman : Path;
  //Divide into grid  2 cells by 3 cells
  col2 := Width / 2;
  row2 := Height / 3;
  row3 := 2 * Height / 3;
begin
  //Blue circle in first cell
  paint.setColor(Color.BLUE);
  canvas.drawCircle(col2 / 2 , row2 / 2  , row2 /2 - VB, paint); //centreX, centreY, radius, paint
  //Yellow ellipse in next cell
  paint.setColor(Color.YELLOW);  
  boundingRect := new RectF(col2 + HB, VB, Width - HB, row2 - VB); //(leftx, topy, rightx, bottomy)
  canvas.drawOval(boundingRect, paint);
  //Red rectangle outline in first cell on second row
  paint.setStyle(paint.Style.STROKE);
  paint.setColor(Color.RED);  
  canvas.drawRect(HB, row2 + VB, col2 - HB, row3 - VB, paint); //(leftx, topy, rightx, bottomy, paint)
  //Cyan rounded rectangle outline in second cell on second row
  paint.setStyle(paint.Style.FILL);
  paint.setColor(Color.CYAN); 
  boundingRect := new RectF(col2 + HB, row2 + VB, Width - HB, row3 - VB); //(leftx, topy, rightx, bottomy)
  canvas.drawRoundRect(boundingRect, 4 * HB, 4 * HB, paint);
  //Magenta diagonal line
  paint.setStyle(paint.Style.STROKE);
  paint.StrokeWidth := 5;
  paint.setColor(Color.MAGENTA);
  canvas.drawLine(HB, row3 + VB, col2 - HB, Height - VB, paint);
  //Dashed dark grey diagonal line
  paint.setPathEffect(new DashPathEffect([10, 20], 0));
  paint.setColor(Color.DKGRAY);
  canvas.drawLine(HB + col2, Height - VB, Width - HB, row3 + VB, paint);

  //Black stickmen at top of window with translation, rotation and scale
  paint.reset;
  paint.StrokeWidth := 2;
  paint.setColor(Color.BLACK);
  stickman := new Path;
  stickman.moveTo(50.0, 50.0); //Top of head
  stickman.quadTo(60.0, 55.0, 50.0, 60.0); //Bottom of head
  stickman.lineTo(52.0, 80.0);  //Pelvis
  stickman.lineTo(50.0, 120.0); //Right foot 
  stickman.lineTo(48.0, 78.0);  //Pelvis
  stickman.lineTo(36.0, 120.0); //Left foot
  stickman.lineTo(44.0, 82.0);  //Pelvis
  stickman.lineTo(52.0, 63.0); //Shoulder
  stickman.lineTo(62.0, 90.0); //Right hand
  stickman.lineTo(44.0, 64.0); //Shoulder
  stickman.lineTo(35.0, 90.0); //Left hand
  stickman.lineTo(48.0, 64.0); //Shoulder
  stickman.lineTo(50.0, 60.0);  //Back to bottom of head
  stickman.quadTo(40.0, 55.0, 50.0, 50.0); //Top of head
  canvas.drawPath(stickman, paint); 
  canvas.save;  //Save and restore afterwards in case we have more to add
  canvas.translate(50, -20);
  canvas.drawPath(stickman, paint); 
  canvas.translate(50, 20);
  canvas.rotate(20, 145, 80);
  canvas.scale(0.9, 0.9, 145, 80);
  canvas.drawPath(stickman, paint);
  canvas.translate(50, 0);
  canvas.rotate(20, 195, 80);
  canvas.scale(0.9, 0.9, 195, 80);
  canvas.drawPath(stickman, paint);
  canvas.restore;
end;

end.

Strings File

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">Canvas Demo 1</string>
</resources>