pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 8.47 kB

Source Map (JSON)

View Raw

{"version":3,"file":"Text.mjs","sources":["../../../src/scene/text/Text.ts"],"sourcesContent":["import { 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';\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 * resolution: 2\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 * format: 'rgba', // Include alpha channel\n * resolution: 2, // Higher resolution\n * premultiplyAlpha: true\n * }\n * });\n * ```\n * @advanced\n */\n textureStyle?: TextureStyle | TextureStyleOptions;\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 * resolution: 2,\n * format: 'rgba',\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 * @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\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":";;;;;;;AA+JO,MAAM,aACD,YAEZ,CAAA;AAAA,EAkBI,eAAe,IACf,EAAA;AACI,IAAM,MAAA,OAAA,GAAU,iBAAqC,CAAA,IAAA,EAAM,MAAM,CAAA,CAAA;AAEjE,IAAA,KAAA,CAAM,SAAS,SAAS,CAAA,CAAA;AApB5B;AAAA,IAAA,IAAA,CAAyB,YAAuB,GAAA,MAAA,CAAA;AAsB5C,IAAA,IAAI,QAAQ,YACZ,EAAA;AACI,MAAK,IAAA,CAAA,YAAA,GAAe,QAAQ,YAAwB,YAAA,YAAA,GAC9C,QAAQ,YACR,GAAA,IAAI,YAAa,CAAA,OAAA,CAAQ,YAAY,CAAA,CAAA;AAAA,KAC/C;AAAA,GACJ;AAAA;AAAA,EAGU,YACV,GAAA;AACI,IAAA,MAAM,SAAS,IAAK,CAAA,OAAA,CAAA;AACpB,IAAA,MAAM,SAAS,IAAK,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,KAAQ,GAAA,CAAA,CAAA;AACZ,IAAA,IAAI,MAAS,GAAA,CAAA,CAAA;AAEb,IAAI,IAAA,IAAA,CAAK,OAAO,IAChB,EAAA;AACI,MAAA,MAAM,EAAE,KAAA,EAAO,gBAAiB,EAAA,GAAI,oBAAoB,mBAAoB,CAAA;AAAA,QACxE,MAAM,IAAK,CAAA,IAAA;AAAA,QACX,OAAO,IAAK,CAAA,MAAA;AAAA,QACZ,UAAY,EAAA,CAAA;AAAA,OACf,CAAA,CAAA;AAED,MAAA,mBAAA,CAAoB,uBAAuB,gBAAgB,CAAA,CAAA;AAE3D,MAAA,KAAA,GAAQ,KAAM,CAAA,KAAA,CAAA;AACd,MAAA,MAAA,GAAS,KAAM,CAAA,MAAA,CAAA;AAAA,KAGnB,MAAA;AACI,MAAA,MAAM,oBAAoB,iBAAkB,CAAA,WAAA;AAAA,QACxC,IAAK,CAAA,KAAA;AAAA,QACL,IAAK,CAAA,MAAA;AAAA,OACT,CAAA;AAEA,MAAA,KAAA,GAAQ,iBAAkB,CAAA,KAAA,CAAA;AAC1B,MAAA,MAAA,GAAS,iBAAkB,CAAA,MAAA,CAAA;AAAA,KAC/B;AAEA,IAAO,MAAA,CAAA,IAAA,GAAQ,CAAC,MAAA,CAAO,EAAK,GAAA,KAAA,CAAA;AAC5B,IAAO,MAAA,CAAA,IAAA,GAAO,OAAO,IAAO,GAAA,KAAA,CAAA;AAC5B,IAAO,MAAA,CAAA,IAAA,GAAQ,CAAC,MAAA,CAAO,EAAK,GAAA,MAAA,CAAA;AAC5B,IAAO,MAAA,CAAA,IAAA,GAAO,OAAO,IAAO,GAAA,MAAA,CAAA;AAAA,GAChC;AACJ;;;;"}