pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 9.14 kB

Source Map (JSON)

View Raw

{"version":3,"file":"Text.mjs","sources":["../../../src/scene/text/Text.ts"],"sourcesContent":["import { TextureSource } from '../../rendering/renderers/shared/texture/sources/TextureSource';\nimport { TextureStyle, type TextureStyleOptions } from '../../rendering/renderers/shared/texture/TextureStyle';\nimport { AbstractText, ensureTextOptions } from './AbstractText';\nimport { type BatchableText } from './canvas/BatchableText';\nimport { CanvasTextGenerator } from './canvas/CanvasTextGenerator';\nimport { CanvasTextMetrics } from './canvas/CanvasTextMetrics';\nimport { TextStyle } from './TextStyle';\nimport './init';\n\nimport type { View } from '../../rendering/renderers/shared/view/View';\nimport type { TextOptions, TextString } from './AbstractText';\nimport type { TextStyleOptions } from './TextStyle';\n\n// eslint-disable-next-line requireExport/require-export-jsdoc, requireMemberAPI/require-member-api-doc\nexport interface Text extends PixiMixins.Text, AbstractText<\n TextStyle,\n TextStyleOptions,\n CanvasTextOptions,\n BatchableText\n> {}\n\n/**\n * Constructor options used for `Text` instances. These options extend TextOptions with\n * canvas-specific features like texture styling.\n * @example\n * ```ts\n * // Create basic canvas text\n * const text = new Text({\n * text: 'Hello Pixi!',\n * style: {\n * fontSize: 24,\n * fill: 0xff1010,\n * }\n * });\n *\n * // Create text with custom texture style\n * const customText = new Text({\n * text: 'Custom Text',\n * style: {\n * fontSize: 32,\n * fill: 0x4a4a4a\n * },\n * textureStyle: {\n * scaleMode: 'nearest',\n * }\n * });\n * ```\n * @extends TextOptions\n * @category text\n * @standard\n */\nexport interface CanvasTextOptions extends TextOptions\n{\n /**\n * Optional texture style to use for the text texture. This allows fine control over\n * how the text is rendered to a texture before being displayed.\n *\n * The texture style can affect:\n * - Scale mode (nearest/linear)\n * - Resolution\n * - Format (rgb/rgba)\n * - Alpha handling\n * @example\n * ```ts\n * const text = new Text({\n * text: 'Crisp Text',\n * textureStyle: {\n * scaleMode: 'nearest', // Pixel-perfect scaling\n * }\n * });\n * ```\n * @advanced\n */\n textureStyle?: TextureStyle | TextureStyleOptions;\n /**\n * Whether to generate mipmaps for the text texture.\n * Improves rendering quality when the text is scaled down.\n * @default undefined - Falls back to TextureSource.defaultOptions.autoGenerateMipmaps\n */\n autoGenerateMipmaps?: boolean;\n}\n\n/**\n * A powerful text rendering class that creates one or multiple lines of text using the Canvas API.\n * Provides rich text styling capabilities with runtime modifications.\n *\n * Key features:\n * - Dynamic text content and styling\n * - Multi-line text support\n * - Word wrapping\n * - Custom texture styling\n * - High-quality text rendering\n * @example\n * ```ts\n * import { Text } from 'pixi.js';\n *\n * // Basic text creation\n * const basicText = new Text({\n * text: 'Hello Pixi!',\n * style: {\n * fontFamily: 'Arial',\n * fontSize: 24,\n * fill: 0xff1010,\n * align: 'center',\n * }\n * });\n *\n * // Rich text with multiple styles\n * const richText = new Text({\n * text: 'Styled\\nMultiline\\nText',\n * style: {\n * fontFamily: 'Arial',\n * fontSize: 36,\n * fill: 'red',\n * stroke: { color: '#4a1850', width: 5 },\n * align: 'center',\n * lineHeight: 45,\n * dropShadow: {\n * color: '#000000',\n * blur: 4,\n * distance: 6,\n * }\n * },\n * anchor: 0.5,\n * });\n *\n * // Text with custom texture settings\n * const crispText = new Text({\n * text: 'High Quality Text',\n * style: {\n * fontSize: 24,\n * fill: 0x4a4a4a,\n * },\n * textureStyle: {\n * scaleMode: 'nearest',\n * }\n * });\n *\n * // Word-wrapped text\n * const wrappedText = new Text({\n * text: 'This is a long piece of text that will automatically wrap to multiple lines',\n * style: {\n * fontSize: 20,\n * wordWrap: true,\n * wordWrapWidth: 200,\n * lineHeight: 30,\n * }\n * });\n * ```\n *\n * Performance Considerations:\n * - Each text instance creates its own texture\n * - Texture is regenerated when text or style changes\n * - Use BitmapText for better performance with static text\n * - Consider texture style options for quality vs performance tradeoffs\n * @category text\n * @standard\n * @see {@link TextStyle} For detailed style options\n * @see {@link BitmapText} For better performance with static text\n * @see {@link HTMLText} For HTML/CSS-based text rendering\n */\nexport class Text\n extends AbstractText<TextStyle, TextStyleOptions, CanvasTextOptions, BatchableText>\n implements View\n{\n /** @internal */\n public override readonly renderPipeId: string = 'text';\n\n /**\n * Optional texture style to use for the text.\n * > [!NOTE] Text is not updated when this property is updated,\n * > you must update the text manually by calling `text.onViewUpdate()`\n * @advanced\n */\n public textureStyle?: TextureStyle;\n\n /**\n * Whether to generate mipmaps for the text texture.\n * Improves rendering quality when the text is scaled down.\n * > [!NOTE] Text is not updated when this property is updated,\n * > you must update the text manually by calling `text.onViewUpdate()`\n * @default undefined - Falls back to TextureSource.defaultOptions.autoGenerateMipmaps\n */\n public autoGenerateMipmaps?: boolean;\n\n /**\n * @param {CanvasTextOptions} options - The options of the text.\n */\n constructor(options?: CanvasTextOptions);\n /** @deprecated since 8.0.0 */\n constructor(text?: TextString, options?: Partial<TextStyle>);\n constructor(...args: [CanvasTextOptions?] | [TextString, Partial<TextStyle>])\n {\n const options = ensureTextOptions<CanvasTextOptions>(args, 'Text');\n\n super(options, TextStyle);\n\n if (options.textureStyle)\n {\n this.textureStyle = options.textureStyle instanceof TextureStyle\n ? options.textureStyle\n : new TextureStyle(options.textureStyle);\n }\n\n this.autoGenerateMipmaps = options.autoGenerateMipmaps ?? TextureSource.defaultOptions.autoGenerateMipmaps;\n }\n\n /** @private */\n protected updateBounds()\n {\n const bounds = this._bounds;\n const anchor = this._anchor;\n\n let width = 0;\n let height = 0;\n\n if (this._style.trim)\n {\n const { frame, canvasAndContext } = CanvasTextGenerator.getCanvasAndContext({\n text: this.text,\n style: this._style,\n resolution: 1,\n });\n\n CanvasTextGenerator.returnCanvasAndContext(canvasAndContext);\n\n width = frame.width;\n height = frame.height;\n }\n else\n {\n const canvasMeasurement = CanvasTextMetrics.measureText(\n this._text,\n this._style\n );\n\n width = canvasMeasurement.width;\n height = canvasMeasurement.height;\n }\n\n bounds.minX = (-anchor._x * width);\n bounds.maxX = bounds.minX + width;\n bounds.minY = (-anchor._y * height);\n bounds.maxY = bounds.minY + height;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;AAiKO,MAAM,aACD,YAAA,CAEZ;AAAA,EA2BI,eAAe,IAAA,EACf;AACI,IAAA,MAAM,OAAA,GAAU,iBAAA,CAAqC,IAAA,EAAM,MAAM,CAAA;AAEjE,IAAA,KAAA,CAAM,SAAS,SAAS,CAAA;AA7B5B;AAAA,IAAA,IAAA,CAAyB,YAAA,GAAuB,MAAA;AA+B5C,IAAA,IAAI,QAAQ,YAAA,EACZ;AACI,MAAA,IAAA,CAAK,YAAA,GAAe,QAAQ,YAAA,YAAwB,YAAA,GAC9C,QAAQ,YAAA,GACR,IAAI,YAAA,CAAa,OAAA,CAAQ,YAAY,CAAA;AAAA,IAC/C;AAEA,IAAA,IAAA,CAAK,mBAAA,GAAsB,OAAA,CAAQ,mBAAA,IAAuB,aAAA,CAAc,cAAA,CAAe,mBAAA;AAAA,EAC3F;AAAA;AAAA,EAGU,YAAA,GACV;AACI,IAAA,MAAM,SAAS,IAAA,CAAK,OAAA;AACpB,IAAA,MAAM,SAAS,IAAA,CAAK,OAAA;AAEpB,IAAA,IAAI,KAAA,GAAQ,CAAA;AACZ,IAAA,IAAI,MAAA,GAAS,CAAA;AAEb,IAAA,IAAI,IAAA,CAAK,OAAO,IAAA,EAChB;AACI,MAAA,MAAM,EAAE,KAAA,EAAO,gBAAA,EAAiB,GAAI,oBAAoB,mBAAA,CAAoB;AAAA,QACxE,MAAM,IAAA,CAAK,IAAA;AAAA,QACX,OAAO,IAAA,CAAK,MAAA;AAAA,QACZ,UAAA,EAAY;AAAA,OACf,CAAA;AAED,MAAA,mBAAA,CAAoB,uBAAuB,gBAAgB,CAAA;AAE3D,MAAA,KAAA,GAAQ,KAAA,CAAM,KAAA;AACd,MAAA,MAAA,GAAS,KAAA,CAAM,MAAA;AAAA,IACnB,CAAA,MAEA;AACI,MAAA,MAAM,oBAAoB,iBAAA,CAAkB,WAAA;AAAA,QACxC,IAAA,CAAK,KAAA;AAAA,QACL,IAAA,CAAK;AAAA,OACT;AAEA,MAAA,KAAA,GAAQ,iBAAA,CAAkB,KAAA;AAC1B,MAAA,MAAA,GAAS,iBAAA,CAAkB,MAAA;AAAA,IAC/B;AAEA,IAAA,MAAA,CAAO,IAAA,GAAQ,CAAC,MAAA,CAAO,EAAA,GAAK,KAAA;AAC5B,IAAA,MAAA,CAAO,IAAA,GAAO,OAAO,IAAA,GAAO,KAAA;AAC5B,IAAA,MAAA,CAAO,IAAA,GAAQ,CAAC,MAAA,CAAO,EAAA,GAAK,MAAA;AAC5B,IAAA,MAAA,CAAO,IAAA,GAAO,OAAO,IAAA,GAAO,MAAA;AAAA,EAChC;AACJ;;;;"}