Class GridLines

Add shapes to the composed shape

Gets the current angle of the shape (defaults to 0). The angle gets updated when the shape is rotated

Gets the center-bottom point of the shape (the center of the bottom edge of the box bounding the shape)

Example

// Create a new square centered at (1, 1) (default size of 2)
const s = new Square({ x: 1, y: 1 });
// The center is at (1, 1), so the bottom is at (1, 0)
s.bottom();  // => [2, 1]
Copy

Gets the geometric center of the shape (the center of the box bounding the shape)

Example

// Create a new square centered at (1, 1)
const s = new Square({ x: 1, y: 1 });
// Get the center
s.center();  // => [1, 1]
Copy

Changes the current color of the shape. For shapes that are fillable, this is the fill color, for others, it's the singular color (.e.g., Dot, Text)

Changes the line/stroke color of the shape. For shapes that are strokeable, this is the line color (e.g., Square)

Returns a list of the composed shapes built in the compose method and added in the add method

Creates a deep copy of the shape

Gets the current scale of the shape (defaults to 1). The scale gets updated when the shape is scaled

Gets the height of the shape (i.e., the height of the box bounding the shape)

Example

// Create a new rectangle centered at (0, 0) with a width of 4 and height of 2 (stretching from (-2, 1) to (2, -1))
const s = new PointShape({ points: [[-2, 1], [2, 1], [2, -1], [-2, -1]] });
s.height();  // 2
Copy

Gets the center-left point of the shape (the center of the left edge of the box bounding the shape)

Example

// Create a new square centered at (1, 1) (default size of 2)
const s = new Square({ x: 1, y: 1 });
// The center is at (1, 1), so the left is at (0, 1)
s.left();  // => [0, 1]
Copy

Moves the center of the shape to the specified point

Example

// Create a new square centered at (0, 0)
const s = new Square();
// Move the square's center to (1, 1)
s.moveTo([1, 1]);  // the square is now centered at (1, 1)
Copy

Puts the shape next to another locatable in a specified direction

Example

// Create a new square centered at (0, 0) with a default size of 2
const s1 = new Square();
// Create another square
const s2 = new Square();
// Put s2 next to s1 to the right
s2.nextTo(s1, RIGHT());
Copy

Gets the center-right point of the shape (the center of the right edge of the box bounding the shape)

Example

// Create a new square centered at (1, 1) (default size of 2)
const s = new Square({ x: 1, y: 1 });
// The center is at (1, 1), so the right is at (2, 1)
s.right();  // => [2, 1]
Copy

Rotates the shape by some angle (in radians)

Example

// Create a new square centered at (0, 0) with a default size of 2
const s = new Square();
// Rotate the square by 45 degress (turning it into a diamond)
s.rotate(Math.PI / 2);
Copy

Scales the shape by a factor

Example

// Create a new square centered at (0, 0) with a default size of 2
const s = new Square();
// Scale the square by a factor of 2 (doubles the size)
s.scale(2);  // the square now has a size of 4
Copy

Sets the styles of the shape

Shifts the center of the shape by a specified amount

Example

// Create a new square centered at (0, 0)
const s = new Square();
// Shift the square's center by 1 to the right and 1 up (could just combine into one shift, [1, 1], but this is for demonstration purposes)
s.shift([1, 0], [0, 1]);  // the square is now centered at (1, 1)
Copy

Gets the styles of the shape

Gets the center-top point of the shape (the center of the top edge of the box bounding the shape)

Example

// Create a new square centered at (1, 1) (default size of 2)
const s = new Square({ x: 1, y: 1 });
// The center is at (1, 1), so the top is at (1, 2)
s.top();  // => [1, 2]
Copy

Gets the width of the shape (i.e., the width of the box bounding the shape)

Example

// Create a new rectangle centered at (0, 0) with a width of 4 and height of 2 (stretching from (-2, 1) to (2, -1))
const s = new PointShape({ points: [[-2, 1], [2, 1], [2, -1], [-2, -1]] });
s.width();  // 4
Copy