jsge
Version:
Javascript Game Engine
275 lines (230 loc) • 8.56 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="expires" content="Wen, 05 Jun 2024 07:01:00 GMT">
<title>JSDoc: Source: base/2d/DrawTextObject.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="stage-title">Source: base/2d/DrawTextObject.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>import { DrawShapeObject } from "./DrawShapeObject.js";
import { Rectangle } from "./Primitives.js";
import { DRAW_TYPE, ERROR_CODES } from "../../constants.js";
import { Exception } from "../Exception.js";
import { ImageTempStorage } from "../Temp/ImageTempStorage.js";
/**
* @extends DrawShapeObject
* @see {@link DrawObjectFactory} should be created with factory method
*/
export class DrawTextObject extends DrawShapeObject {
#font;
#textAlign;
#textBaseline;
#fillStyle;
#strokeStyle;
#text;
#textMetrics;
/**
* @type {HTMLCanvasElement}
*/
#textureCanvas = document.createElement("canvas");
/**
* @type {ImageTempStorage}
*/
#textureStorage;
/**
* @hideconstructor
*/
constructor(mapX, mapY, text, font, fillStyle) {
super(DRAW_TYPE.TEXT, mapX, mapY);
this.#text = text;
this.#font = font;
this.#fillStyle = fillStyle;
this.#textMetrics;
this.#calculateCanvasTextureAndMeasurements();
}
/**
* Rectangle text box.
* @type {Rectangle}
*/
get boundariesBox() {
const width = this.textMetrics ? Math.floor(this.textMetrics.width) : 300,
height = this.textMetrics ? Math.floor(this.textMetrics.fontBoundingBoxAscent + this.textMetrics.fontBoundingBoxDescent): 30;
return new Rectangle(this.x, this.y - height, width, height);
}
get vertices() {
const bb = this.boundariesBox;
return this._calculateRectVertices(bb.width, bb.height);
}
/**
* @type {string}
*/
get text() {
return this.#text;
}
set text(value) {
if (value !== this.#text) {
this.#text = value;
this.#calculateCanvasTextureAndMeasurements();
}
}
/**
* @type {string}
*/
get font() {
return this.#font;
}
set font(value) {
if (value !== this.#font) {
this.#font = value;
this.#calculateCanvasTextureAndMeasurements();
}
}
/**
* @type {string}
*/
get textAlign() {
return this.#textAlign;
}
set textAlign(value) {
if (value !== this.#textAlign) {
this.#textAlign = value;
this.#calculateCanvasTextureAndMeasurements();
}
}
/**
* @type {string}
*/
get textBaseline() {
return this.#textBaseline;
}
set textBaseline(value) {
if (value !== this.#textBaseline) {
this.#textBaseline = value;
this.#calculateCanvasTextureAndMeasurements();
}
}
/**
* font color
* @type {string}
*/
get fillStyle() {
return this.#fillStyle;
}
/**
* font color
*/
set fillStyle(value) {
if (value !== this.#fillStyle) {
this.#fillStyle = value;
this.#calculateCanvasTextureAndMeasurements();
}
}
/**
* font stroke color
* @type {string}
*/
get strokeStyle() {
return this.#strokeStyle;
}
/**
* font stroke color
*/
set strokeStyle(value) {
if (value !== this.#strokeStyle) {
this.#strokeStyle = value;
this.#calculateCanvasTextureAndMeasurements();
}
}
/**
* @type {TextMetrics}
*/
get textMetrics() {
return this.#textMetrics;
}
/**
* @ignore
*/
set _textMetrics(value) {
this.#textMetrics = value;
}
/**
* @ignore
*/
get _textureStorage() {
return this.#textureStorage;
}
/**
* @ignore
*/
set _textureStorage(texture) {
this.#textureStorage = texture;
}
/**
* @ignore
*/
get _textureCanvas() {
return this.#textureCanvas;
}
/**
*
* @returns {void}
*/
#calculateCanvasTextureAndMeasurements() {
const ctx = this.#textureCanvas.getContext("2d", { willReadFrequently: true }); // cpu counting instead gpu
if (ctx) {
//ctx.clearRect(0, 0, this.#textureCanvas.width, this.#textureCanvas.height);
ctx.font = this.font;
this._textMetrics = ctx.measureText(this.text);
const boxWidth = this.boundariesBox.width,
boxHeight = this.boundariesBox.height;
ctx.canvas.width = boxWidth;
ctx.canvas.height = boxHeight;
// after canvas resize, have to cleanup and set the font again
ctx.clearRect(0, 0, boxWidth, boxHeight);
ctx.font = this.font;
ctx.textBaseline = "bottom";// bottom
if (this.fillStyle) {
ctx.fillStyle = this.fillStyle;
ctx.fillText(this.text, 0, boxHeight);
}
if (this.strokeStyle) {
ctx.strokeStyle = this.strokeStyle;
ctx.strokeText(this.text, 0, boxHeight);
}
if (this.#textureStorage) {
this.#textureStorage._isTextureRecalculated = true;
}
// debug canvas
// this.#textureCanvas.style.position = "absolute";
// document.body.appendChild(this.#textureCanvas);
} else {
Exception(ERROR_CODES.UNHANDLED_EXCEPTION, "can't getContext('2d')");
}
}
}</code></pre>
</article>
</section>
</div>
<nav>
<div class="switcher"><ul><li class="active"><a href="/">1.5.9</a></li></div>
<h2><a href="/">Home</a></h2><h3>Classes</h3><ul><li><a href="DrawCircleObject.html">DrawCircleObject</a></li><li><a href="DrawConusObject.html">DrawConusObject</a></li><li><a href="DrawImageObject.html">DrawImageObject</a></li><li><a href="DrawLineObject.html">DrawLineObject</a></li><li><a href="DrawObjectFactory.html">DrawObjectFactory</a></li><li><a href="DrawPolygonObject.html">DrawPolygonObject</a></li><li><a href="DrawRectObject.html">DrawRectObject</a></li><li><a href="DrawShapeObject.html">DrawShapeObject</a></li><li><a href="DrawTextObject.html">DrawTextObject</a></li><li><a href="DrawTiledLayer.html">DrawTiledLayer</a></li><li><a href="GameStage.html">GameStage</a></li><li><a href="GameStageData.html">GameStageData</a></li><li><a href="IExtension.html">IExtension</a></li><li><a href="INetwork.html">INetwork</a></li><li><a href="IRender.html">IRender</a></li><li><a href="ISystem.html">ISystem</a></li><li><a href="ISystemAudio.html">ISystemAudio</a></li><li><a href="RenderLoop.html">RenderLoop</a></li><li><a href="RenderLoopDebug.html">RenderLoopDebug</a></li><li><a href="System.html">System</a></li><li><a href="SystemSettings.html">SystemSettings</a></li></ul><h3>Tutorials</h3><ul><li><a href="tutorial-application_scheme.html">Application Scheme</a></li><li><a href="tutorial-assets_manager.html">Assets Manager</a></li><li><a href="tutorial-common_issues.html">Common Issues</a></li><li><a href="tutorial-how_to_add_and_use_audio.html">How to add and use audio</a></li><li><a href="tutorial-how_to_do_animations.html">How to Create Animations</a></li><li><a href="tutorial-how_to_load_and_use_tilemaps.html">How to Load and Use Tilemaps</a></li><li><a href="tutorial-quick_start.html">Quick Start</a></li><li><a href="tutorial-spine_animations.html">How to Add Spine Animations</a></li><li><a href="tutorial-stages_lifecycle.html">Stages Lifecycle</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Wed Jun 18 2025 06:53:54 GMT+0000 (Coordinated Universal Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>