export default class TextLine { constructor(text) { this.LEFT = 0; this.CENTER = 1; this.RIGHT = 2; this.text = text; this.estimatedTextWidth = null; this.colorText = 'red'; this.colorShadow = 'black'; this.colorBorder = 'black'; this.font = 'sans-serif'; this.alphaText = 1.0; this.size = 32; this.alignment = this.LEFT; this.chars = this.text.length; this.hasShadow = false; this.hasBorder = false; } animate(msPerChar = 100) { this.chars = 0; let process = setInterval( () => { this.chars++; if (this.chars === this.text.length) { clearInterval(process); } }, msPerChar ); } draw(context, x, y) { context.font = this.size + 'px ' + this.font; context.globalAlpha = this.alphaText; if (this.estimatedTextWidth === null) { this.estimatedTextWidth = Math.ceil(context.measureText(this.text).width); } switch (this.alignment) { case this.LEFT: break; case this.CENTER: x -= this.estimatedTextWidth * 0.5; break; case this.RIGHT: x -= this.estimatedTextWidth; break; } this.drawShadow(context, x, y); let text = this.text; if (this.chars !== null && this.chars < this.text.length) { text = this.text.substr(0, this.chars); } context.fillStyle = this.colorText; context.fillText(text, x, y + this.size); this.drawBorder(context, x, y, text); } drawBorder(context, x, y, text) { if (this.hasBorder) { context.strokeStyle = this.colorBorder; context.strokeWidth = '1px'; context.strokeText(text, x, y + this.size); } } drawShadow(context, x, y) { if (this.hasShadow) { context.fillStyle = this.colorShadow; context.fillText(this.text.substr(0, this.chars), x + 2, y + this.size + 2); } } }