mr-crocs-adventures/js/ui/TextLine.js

86 lines
2.2 KiB
JavaScript

import TextAlignment from "./TextAlignment.js";
export default class TextLine
{
constructor(text)
{
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 = TextAlignment.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 TextAlignment.LEFT:
break;
case TextAlignment.CENTER:
x -= this.estimatedTextWidth * 0.5;
break;
case TextAlignment.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);
}
}
}