Text

class Text extends Renderable

a generic system font object.

Constructor

new Text(x: number, y: number, settings: object) → {}

let font = new me.Text(0, 0, {font: "Arial", size: 8, fillStyle: this.color});

Parameters:
Name	Type	Attributes	Default	Description
x	number			position of the text object
y	number			position of the text object
settings	object			the text configuration
settings.font	string			a CSS family font name
settings.size	number \| string			size, or size + suffix (px, em, pt)
settings.fillStyle	Color \| string	<optional>	"#000000"	a CSS color value
settings.strokeStyle	Color \| string	<optional>	"#000000"	a CSS color value
settings.lineWidth	number	<optional>	0	line width, in pixels, when drawing stroke
settings.textAlign	string	<optional>	"left"	horizontal text alignment
settings.textBaseline	string	<optional>	"top"	the text baseline
settings.lineHeight	number	<optional>	1.0	line spacing height
settings.anchorPoint	Vector2d	<optional>	{x:0.0, y:0.0}	anchor point to draw the text at
settings.wordWrapWidth	number	<optional>		the maximum length in CSS pixel for a single segment of text
settings.text	string \| Array<string>	<optional>	""	a string, or an array of strings

Summary

Properties from Text

Color	fillStyle = black
number	fontSize = 10
number	lineHeight = 1.0
number	lineWidth = 0
Color	strokeStyle = black
string	textAlign = "left"
string	textBaseline = "top"
number	wordWrapWidth = -1

Methods from Text

Text	bold()
	draw(renderer: CanvasRenderer \| WebGLRenderer, text: string, x: number, y: number)
	drawStroke(renderer: CanvasRenderer \| WebGLRenderer, text: string, x: number, y: number)
Text	italic()
TextMetrics	measureText(renderer: CanvasRenderer \| WebGLRenderer, text: string)
Text	setFont(font: string, size: number \| string)
Text	setText(value: number \| string \| Array<string>)

Properties inherited from Renderable

number	alpha = 1.0
boolean	alwaysUpdate = false
Container \| Entity	ancestor = undefined
ObservableVector2d	anchorPoint = <0.5,0.5>
boolean	autoTransform = true
string	blendMode = "normal"
Body	body
Matrix2d	currentTransform
number	depth
boolean	floating = false
string	GUID
boolean	inViewport = false
boolean	isDirty = true
boolean	isFlippedX
boolean	isFlippedY
boolean	isFloating
boolean	isKinematic = true
boolean	isPersistent = false
Rect \| RoundRect \| Polygon \| Line \| Ellipse	mask = undefined
string	name = ""
Function	onVisibilityChange = undefined
Application	parentApp
ObservableVector3d	pos
GLShader	shader = undefined
Color	tint = (255, 255, 255)
boolean	updateWhenPaused = false

Properties inherited from Rect

number	bottom
number	centerX
number	centerY
number	height
number	left
number	right
number	top
string	type = "Rectangle"
number	width

Properties inherited from Polygon

Array<Vector2d>

points

Methods inherited from Renderable

number	angleTo(target: Renderable \| Vector2d \| Vector3d)
number	distanceTo(target: Renderable \| Vector2d \| Vector3d)
Renderable	flipX(flip: boolean)
Renderable	flipY(flip: boolean)
Vector2d	getAbsolutePosition()
Bounds	getBounds()
number	getOpacity()
Renderable	lookAt(target: Renderable \| Vector2d \| Vector3d)
boolean	onCollision(response: ResponseObject, other: Renderable \| Container \| Entity \| Sprite \| NineSliceSprite)
	onDestroyEvent()
	postDraw(renderer: CanvasRenderer \| WebGLRenderer)
	preDraw(renderer: CanvasRenderer \| WebGLRenderer)
Renderable	rotate(angle: number, v: Vector2d \| ObservableVector2d)
Renderable	scale(x: number, y: number)
Renderable	scaleV(v: Vector2d)
	setOpacity(alpha: number)
Renderable	transform(m: Matrix2d)
boolean	update(dt: number)
Bounds	updateBounds(absolute: boolean)

Methods inherited from Rect

Rect	centerOn(x: number, y: number)
Rect	clone()
boolean	contains(x: number \| Vector2d \| Rect, y: number)
Rect	copy(rect: Rect)
boolean	equals(rect: Rect)
boolean	isFinite()
boolean	overlaps(rect: Rect)
Rect	resize(w: number, h: number)
Rect	setShape(x: number, y: number, w: number \| Vector2d<Array>, h: number)
Polygon	toPolygon()
Rect	union(rect: Rect)

Methods inherited from Polygon

Array<number>	getIndices()
boolean	isConvex()
Polygon	recalc()
Polygon	setVertices(vertices: Array<Vector2d>)
	shift(x: number \| Vector2d, y: number)
Polygon	to2d()
Polygon	toIso()
Polygon	translate(x: number \| Vector2d, y: number)

Public Properties

fillStyle text.js:48

fillStyle: Color = black

Color

defines the color used to draw the font.

fontSize text.js:101

fontSize: number = 10

number

the font size (in px)

lineHeight text.js:85

lineHeight: number = 1.0

number

Set the line spacing height (when displaying multi-line strings).
Current font height will be multiplied with this value to set the line height.

lineWidth text.js:62

lineWidth: number = 0

number

sets the current line width, in pixels, when drawing stroke

strokeStyle text.js:55

strokeStyle: Color = black

Color

defines the color used to draw the font stroke.

textAlign text.js:69

textAlign: string = "left"

string

Set the default text alignment (or justification),
possible values are "left", "right", and "center".

textBaseline text.js:77

textBaseline: string = "top"

string

Set the text baseline (e.g. the Y-coordinate for the draw operation),
possible values are "top", "hanging, "middle, "alphabetic, "ideographic, "bottom"

wordWrapWidth text.js:93

wordWrapWidth: number = -1

number

the maximum length in CSS pixel for a single segment of text. (use -1 to disable word wrapping)

Public Methods

bold text.js:188

bold() → {Text}

make the font bold

Returns:
Type	Description
Text	this object for chaining

draw text.js:311

draw(renderer: CanvasRenderer | WebGLRenderer, text: string, x: number, y: number) → {}

draw a text at the specified coord

Parameters:
Name	Type	Attributes	Description
renderer	CanvasRenderer \| WebGLRenderer		Reference to the destination renderer instance
text	string	<optional>
x	number	<optional>
y	number	<optional>

drawStroke text.js:360

drawStroke(renderer: CanvasRenderer | WebGLRenderer, text: string, x: number, y: number) → {}

Deprecated: since 15.0.0

draw a stroke text at the specified coord, as defined by the lineWidth and fillStroke properties.

Parameters:
Name	Type	Description
renderer	CanvasRenderer \| WebGLRenderer	Reference to the destination renderer instance
text	string
x	number
y	number

italic text.js:198

italic() → {Text}

make the font italic

Returns:
Type	Description
Text	this object for chaining

measureText text.js:300

measureText(renderer: CanvasRenderer | WebGLRenderer, text: string) → {TextMetrics}

measure the given text size in pixels

Parameters:
Name	Type	Attributes	Description
renderer	CanvasRenderer \| WebGLRenderer		reference to the active renderer
text	string	<optional>	the text to be measured

Returns:
Type	Description
TextMetrics	a TextMetrics object defining the dimensions of the given piece of text

setFont text.js:208

setFont(font: string, size: number | string) → {Text}

set the font family and size

font.setFont("Arial", 20);
font.setFont("Arial", "1.5em");

Parameters:
Name	Type	Attributes	Default	Description
font	string			a CSS font name
size	number \| string	<optional>	10	size in px, or size + suffix (px, em, pt)

Returns:
Type	Description
Text	this object for chaining

setText text.js:249

setText(value: number | string | Array<string>) → {Text}

change the text to be displayed

Parameters:
Name	Type	Default	Description
value	number \| string \| Array<string>	""	a string, or an array of strings

Returns:
Type	Description
Text	this object for chaining