import Shape from 'newton-lib/src/elements/Shape.js'

public class | source

Shape

Extends:

WorldElement → Shape

The Shape class is used to draw shapes manually onto the world. The class provides similar functionality to the methods found in the context on a canvas with key difference that all coordinates passed to the methods in the Shape class take as parameters real units. This makes it possible to draw shapes in the world with ease.

Constructor Summary

Public Constructor
public	constructor(onDraw: function, opts: object)

Member Summary

Public Members
public	fillColor: string Sets the fill color for shapes.
public	onDraw: function Callback function where the shape will be drawn.
public	prevPosition: object Sets the previous position used by Shape.lineTo or Shape.moveTo.
public	renderer: Renderer Sets the prerenderer for the Shape.
public	shapeMode: number Sets if the coordinates are referenced to the previous coordinates given or are allways absolute.
public	shapeStyle: number Sets the currently active shape style.
public	strokeColor: string Sets the stroke color for shapes.

Method Summary

Public Methods
public	angleStyle(mode: number) Sets the active angle style found in ANGLE_STYLE.
public	arc(x0: number, y0: number, r: number, start: number, end: number) Draws an arc or a circle on the world.
public	ellipse(x0: number, y0: number, w: number, h: number, start: number, end: number) Draws an ellipse on the world.
public	end() Closes a drawing path and fills and/or strokes it depending on the settings of Shape.fillColor and Shape.strokeColor.
public	equilateralTriangle(x: number, y: number, s: number, r: number) Draws an equilateral triangle centered around the coordinates (x, y).
public	fill(fillColor: string) Sets a fill color.
public	line(x0: number, y0: number, x1: number, y1: number) Draws a line on the world.
public	lineDash(i: number) Sets the line dash of all lines.
public	lineTo(x0: number, y0: number) Draws a line to coordinates (x0, y0).
public	moveTo(x0: number, y0: number) Sets the starting position of drawing path.
public	noFill() Disables filling the shapes drawn.
public	noStroke() Disables stroking the shapes drawn.
public	rect(x0: number, y0: number, w: number, h: number) Draws a rectangle on the world.
public	restore() Restores the shape to the previously saved state.
public	rotate(angle: number) Sets the rotation of the canvas.
public	save() Saves the current state of the shape.
public	stroke(strokeColor: string) Sets a stroke color.
public	strokeWeight(weight: number) Sets the stroke weight of all lines.
public	text(text: string, x0: number, y0: number) Writes text on the world.
public	textWidth(text: string): number Get the width of a text in units.
public	translate(x: number, y: number) Translates the origin to a new point (x, y).
public	triangle(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number) Draws a triangle given three sets of points.
public	vector(_x0: number, _y0: number, _x1: number, _y1: number, dashed: boolean) Draws a vector between two points.
public	vectorFromMag(x0: number, y0: number, mag: number, angle: number, color: number, dashed: boolean): number[] Draws a vector given a starting point and a magnitude and angle.

Private Methods
private	begin(s: number) Starts a drawing path.
private	draw() Main draw function for the shape called by the World automatically.
private	selectCtx(): object Selects the currently active context for drawing the shape.

Inherited Summary

From class WorldElement
public	color: string Sets the color in HEX format of the element.
public	cursor: string Sets the cursor style when the mouse is over the element.
public	display: boolean Flag for enabling or diabling this element.
public	dragging: boolean Flag set when the element is being dragged around.
public	font: Font Sets the font of the element.
public	height: number Sets the current height of the element.
public	isDraggable: boolean Flag for allowing the element to be dragged around.
public	mouseMoveStyle: string Sets the move style of the element.
public	mouseOver: boolean Flag set when the mouse is over the element.
public	onMouseMove: function Sets a callback function for when the element is dragged around.
public	position: object Sets the position of the element.
public	renderer: Renderer Sets the renderer used for the element.
public	rotation: number Sets the rotation of the element.
public	savedZIndex: number A copy of the z-index value is stored here.
public	scale: number Sets the drawing scale of the element.
public	topmostOnDrag: boolean Flag for determining if the element will be a top-most element when dragged around.
public	valid: boolean Flag used to determine if an object is a child of WorldElement.
public	width: number Sets the current width of the element.
public	world: World Sets the world where this element is found.
public	zIndex: number Sets the z-index of the element.
public	addPosition(x: number, y: number) Adds the provided coordinates to the position.
public	draggable(s: boolean) Sets if the element is draggable.
public	isMouseOver(): boolean Function called when the mouse moves to check if the pointer is over the element.
public	setColor(c: string) Sets the color in HEX format of the element.
public	setPosition(x: number, y: number) Sets the position of the element.
public	setScale(s: number) Sets the scale of the element.
public	setZ(z: number) Sets the z-index of the element.
private	resize() Function called when the canvas gets resized.
private	setWorld(world: World) Sets the world object where element will be drawn.
private	topmost(state: boolean) Sets the element as a topmost element.

Public Constructors

public constructor(onDraw: function, opts: object) source

Override:

WorldElement#constructor

Params:

Name	Type	Attribute	Description
onDraw	function		Function where the drawing process occurs.
opts	object	optional	Object that contains valid Shape properties with values. Their values will be assigned at the end of the constructor. If an invalid property is passed then the value will be ignored.

Public Members

public fillColor: string source

Sets the fill color for shapes. Default value is BOX_COLORS.GREEN.BACKGROUND.

public onDraw: function source

Callback function where the shape will be drawn.

public prevPosition: object source

Sets the previous position used by Shape.lineTo or Shape.moveTo. This is used if the Shape.shapeMode is set to SHAPE_STYLE.ACCOMULATIVE.

Properties:

Name	Type	Attribute	Description
x	number		x coordinate.
y	number		y coordinate.

public renderer: Renderer source

Sets the prerenderer for the Shape. It is disabled by default.

Override:

WorldElement#renderer

public shapeMode: number source

Sets if the coordinates are referenced to the previous coordinates given or are allways absolute. Default value is SHAPE_STYLE.NONE.

public shapeStyle: number source

Sets the currently active shape style. Default value is SHAPE_STYLE.NONE.

public strokeColor: string source

Sets the stroke color for shapes. Default value is BOX_COLORS.GREEN.BORDER.

Public Methods

public angleStyle(mode: number) source

Sets the active angle style found in ANGLE_STYLE.

Params:

Name	Type	Attribute	Description
mode	number		Desired angle style.

public arc(x0: number, y0: number, r: number, start: number, end: number) source

Draws an arc or a circle on the world.

Params:

Name	Type	Attribute	Description
x0	number		Center -x coordinate of the ellipse.
y0	number		Center -y coordinate of the ellipse.
r	number		Radius of the ellipse.
start	number		Start angle of the ellipse.
end	number		End angle of the ellipse.

public ellipse(x0: number, y0: number, w: number, h: number, start: number, end: number) source

Draws an ellipse on the world.

Params:

Name	Type	Attribute	Description
x0	number		Center -x coordinate of the ellipse.
y0	number		Center -y coordinate of the ellipse.
w	number		Width of the ellipse.
h	number		Height of the ellipse.
start	number		Start angle of the ellipse.
end	number		End angle of the ellipse.

public end() source

Closes a drawing path and fills and/or strokes it depending on the settings of Shape.fillColor and Shape.strokeColor.

public equilateralTriangle(x: number, y: number, s: number, r: number) source

Draws an equilateral triangle centered around the coordinates (x, y).

Params:

Name	Type	Attribute	Description
x	number		Center -x coordinate of the triangle.
y	number		Center -y coordinate of the triangle.
s	number		Side length of the triangle.
r	number		Rotation of the triangle.

public fill(fillColor: string) source

Sets a fill color.

Params:

Name	Type	Attribute	Description
fillColor	string		Fill color in HEX format.

public line(x0: number, y0: number, x1: number, y1: number) source

Draws a line on the world.

Params:

Name	Type	Attribute	Description
x0	number		Start -x coordinate of the line.
y0	number		Start -y coordinate of the line.
x1	number		End -x coordinate of the line.
y1	number		End -y coordinate of the line.

public lineDash(i: number) source

Sets the line dash of all lines.

Params:

Name	Type	Attribute	Description
i	number		Length of the dash in pixels.

public lineTo(x0: number, y0: number) source

Draws a line to coordinates (x0, y0). Before using this function, the function Shape.moveTo must be used to set the starting point of the line. Multiple calls to this function can be used to create a shape.

Params:

Name	Type	Attribute	Description
x0	number		Next -x coordinate for the line.
y0	number		Next -y coordinate for the line.

public moveTo(x0: number, y0: number) source

Sets the starting position of drawing path. The path must be then continued by calling Shape.lineTo.

Params:

Name	Type	Attribute	Description
x0	number		Starting -x coordinate for the current drawing path.
y0	number		Starting -y coodinate for the current drawing path.

public noFill() source

Disables filling the shapes drawn.

public noStroke() source

Disables stroking the shapes drawn.

public rect(x0: number, y0: number, w: number, h: number) source

Draws a rectangle on the world.

Params:

Name	Type	Attribute	Description
x0	number		Bottom left -x coordinate of the rectangle.
y0	number		Bottom left -y coordinate of the rectangle.
w	number		Width of the rectangle.
h	number		Height of the rectangle.

public restore() source

Restores the shape to the previously saved state.

public rotate(angle: number) source

Sets the rotation of the canvas. Before doing a rotation the shape must be saved and then restored. See Shape.translate for an example.

Params:

Name	Type	Attribute	Description
angle	number		Desired rotation angle.

public save() source

Saves the current state of the shape.

public stroke(strokeColor: string) source

Sets a stroke color.

Params:

Name	Type	Attribute	Description
strokeColor	string		Stroke color in HEX format.

public strokeWeight(weight: number) source

Sets the stroke weight of all lines.

Params:

Name	Type	Attribute	Description
weight	number		Weight of the lines.

public text(text: string, x0: number, y0: number) source

Writes text on the world. The style of the text is set by Shape.font.

Params:

Name	Type	Attribute	Description
text	string		Text to write.
x0	number		x coordinate of the text.
y0	number		y coordinate of the text.

public textWidth(text: string): number source

Get the width of a text in units.

Params:

Name	Type	Attribute	Description
text	string		Text to measure.

Return:

number

Width of the text-

public translate(x: number, y: number) source

Translates the origin to a new point (x, y). Doing a translation requires to first save the context by calling Shape.save, and when finalizing the drawing by calling Shape.restore. This ensures that the translation doesn't mess with the origin of the axis. Translation is also required when doing a rotation around a point.

Params:

Name	Type	Attribute	Description
x	number		x coordinate to translate.
y	number		y coordinate to translate.

Example:

// The following example will draw a 5x5 box at coordinates (1, 1) with a rotation of 90°.
var s = new Shape();
s.save()
s.translate(1, 1)
s.rotate(90)
s.rect(0, 0, 5, 5);
s.restore();

public triangle(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number) source

Draws a triangle given three sets of points.

Params:

Name	Type	Attribute	Description
x0	number		First -x coordinate of the triangle.
y0	number		First -y coordinate of the triangle.
x1	number		Second -x coordinate of the triangle.
y1	number		Second -y coordinate of the triangle.
x2	number		Third -x coordinate of the triangle.
y2	number		Third -y coordinate of the triangle.

public vector(_x0: number, _y0: number, _x1: number, _y1: number, dashed: boolean) source

Draws a vector between two points. The vector is a line with an equilateral triangle at the tip of the vector.

Params:

Name	Type	Attribute	Description
_x0	number		Start -x coordinate of the vector.
_y0	number		Start -y coordinate of the vector.
_x1	number		End -x coordinate of the vector.
_y1	number		End -y coordinate of the vector.
dashed	boolean		Flag for drawing the vector with a dashed line.

public vectorFromMag(x0: number, y0: number, mag: number, angle: number, color: number, dashed: boolean): number[] source

Draws a vector given a starting point and a magnitude and angle.

Params:

Name	Type	Attribute	Description
x0	number		Start -x coordinate of the vector.
y0	number		Start -y coordinate of the vector.
mag	number		Magnitude of the vector.
angle	number		Angle of the vector.
color	number		Color of the vector in HEX format.
dashed	boolean		Flag for drawing the vector with a dashed line.

Return:

number[]

Array with the -x and -y end coordinates of the vector.

Private Methods

private begin(s: number) source

Starts a drawing path.

Params:

Name	Type	Attribute	Description
s	number	optional	Desired shape style. See SHAPE_STYLE.

private draw() source

Main draw function for the shape called by the World automatically.

private selectCtx(): object source

Selects the currently active context for drawing the shape.

Return:

object

The context where shape will be drawn.