Drawing Shapes

PaintingCanvas has many different shapes including, Text, Rectangle, and Circle. These shapes are all subclasses of Drawable, meaning they all have some common methods. In this page we will go over these common methods, and how to use them.

Adding Shapes to the Canvas

Before we can modify the shapes, we first need to add them to the canvas. This is done automatically when you create a new shape with its constructor. Lets see how to use all of the built-in shapes:

(0, 0) is at the top left, so positive x is right, negative x is left. Positive y is down, negative y is up.

Most shapes (Rectangle, Circle, Square, etc.) are positioned by their center. Exceptions are ones that didn't make sense to be positioned from their center, notably Path, Polygon, and Line.

List of Shapes

All of these shapes are defined in the paintingcanvas.drawable

Shape	Description
Circle	A circle
Ellipse	An ellipse is basically an oval
Line	A line with a startpoint and an endpoint
Path	A more complicated shape that is drawn using Bézier Curves and lines
Polygon	A more complicated shape defined with points connected together with lines.
Rectangle	A rectangle with a width and height
Square	A rectangle where the width and height are the same
Text	a text object to say some stuff if you feel like it
Triangle	an isoceles triangle. If you want a not isoceles triangle take a look at polygon

Example Usage

// import all the shapes
import paintingcanvas.drawable.*;

// Create a new rectangle at (100, 100) with a width of 20 and a height of 30
Rectangle rect = new Rectangle(100, 100, 20, 30);

// Create a new circle at (200, 200) with a radius of 50
Circle circle = new Circle(100, 100, 50);

// Create a new ellipse at (100, 100) with a width of 20 and a height of 30
Ellipse ellipse = new Ellipse(100, 100, 20, 30);

// Create a new text element at (100, 100) with the text "Hello World"
Text text = new Text(100, 100, "Hello World");

// Create a new polygon
int[][] points = {{0, 0}, {10, 10}, {20, 10}, {0, 0}};
Polygon polygon = new Polygon(points);

// Create a new square at (100, 100) with a side length of 20
Square square = new Square(100, 100, 20);

// Create a new triangle at (100, 100) with a width of 20 and a height of 30
Triangle triangle = new Triangle(100, 100, 20, 30);

Modifying Shapes

Once we have added the shapes to the canvas, we can modify them. Through the use of the Drawable class, we can use the following methods:

Method	Description
getColor()	Get the current color of an element as a java.awt.Color
setColor(int r, int g, int b)	Set the color of the element with RGB.
rotateTo(double degrees)	Set an element's rotation to rotation°.
rotate(double degrees)	Rotate this element by rotation°.
show()	Show the element.
hide()	Hide the element.
getX()	Get the X-position of the element.
getY()	Get the Y-position of the element.
setX(int x)	Set the X-position of the element.
setY(int y)	Set the Y-position of the element.
moveTo(int x, int y)	move this element to the specified x and y.
move(int x, int y)	Move this element by the specified x and y
moveHorizontal(int x)	Move this element by the specified x
moveVertical(int )y	Move this element by the specified y

(This list is incomplete and only shows the most important ones, please see the Drawable class for the full list and more complete information)

Now let's look at some examples of how to use these methods:

// We are using a rectangle for this example, but you can use any of the shapes listed above
Rectangle rect = new Rectangle(100, 100, 20, 30);

// Set the color of the rectangle to red using all three setColor methods
rect.setColor(255, 0, 0);
rect.setColor(0xFF0000);
rect.setColor(Color.RED);

// Rotate the rectangle to 45°
rect.rotateTo(45);

// Rotate the rectangle to 90° (45° + 45°)
rect.rotate(45);

// Hide the rectangle then show it again
// Note: You wont see the rectangle disappear because it is being shown again immediately
rect.hide();
rect.show();

// Move the rectangle to 10 pixels to the right and 20 pixels down
rect.setX(rect.getX() + 10);
rect.setY(rect.getY() + 20);

// Move the rectangle to 10 pixels to the right and 20 pixels down
rect.x += 20;
rect.y += 20;