Optional
adjustOptional
align?: TextAlignOptional
baseline?: TextBaselineOptional
center?: LocatableOptional
color?: RGBAOptional
font?: stringOptional
lineOptional
lineOptional
lineOptional
lineOptional
size?: numberOptional
tex?: booleanOptional
x?: numberOptional
y?: numberGets the center-bottom point of the shape (the center of the bottom edge of the box bounding the shape)
a point representing the bottom of the shape's bounding box
// 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]
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
)
the new color to change the shape to
this (used for chaining)
Changes the line/stroke color of the shape. For shapes that are strokeable, this is the line color (e.g., Square
)
the new color to change the shape to
this (used for chaining)
Gets the height of the shape (i.e., the height of the box bounding the shape)
the height of the shape
// 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
Gets the center-left point of the shape (the center of the left edge of the box bounding the shape)
a point representing the left of the shape's bounding box
// 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]
Moves the center of the shape to the specified point
the desired center of the shape
this (used for chaining)
// 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)
Puts the shape next to another locatable in a specified direction
// 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());
Gets the center-right point of the shape (the center of the right edge of the box bounding the shape)
a point representing the right of the shape's bounding box
// 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]
Rotates the shape by some angle (in radians)
the amount (in radians) to rotate the angle by (e.g., Math.PI / 2 will rotate the shape by 90 degrees)
this (used for chaining)
// 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);
Scales the shape by a factor
the factor to scale the shape by (e.g., a factor of 2 will double the size, a factor of 0.5 will halve the size)
this (used for chaining)
// 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
Sets the styles of the shape
the new styles to apply to the shape
Shifts the center of the shape by a specified amount
Rest
...shifts: Point[]this (used for chaining)
// 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)
Gets the styles of the shape
the current styles of the shape
Gets the center-top point of the shape (the center of the top edge of the box bounding the shape)
a point representing the top of the shape's bounding box
// 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]
Gets the width of the shape (i.e., the width of the box bounding the shape)
the width of the shape
// 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
Gets the current angle of the shape (defaults to 0). The angle gets updated when the shape is rotated