@eva/plugin-renderer-text 2.1.0-beta.3 → 2.1.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/EVA.plugin.renderer.text.js +475 -0
- package/dist/EVA.plugin.renderer.text.min.js +1 -0
- package/dist/plugin-renderer-text.cjs.js +864 -0
- package/dist/plugin-renderer-text.cjs.prod.js +1 -0
- package/dist/plugin-renderer-text.d.ts +314 -0
- package/dist/plugin-renderer-text.esm.js +857 -0
- package/package.json +4 -4
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@eva/eva.js"),t=require("pixi.js"),o=require("@eva/plugin-renderer"),i=require("@eva/renderer-adapter");function r(e,t,o,i){var r,n=arguments.length,p=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)p=Reflect.decorate(e,t,o,i);else for(var d=e.length-1;d>=0;d--)(r=e[d])&&(p=(n<3?r(p):n>3?r(t,o,p):r(t,o))||p);return n>3&&p&&Object.defineProperty(t,o,p),p}function n(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function p(e,t,o,i){return new(o||(o=Promise))(function(r,n){function p(e){try{s(i.next(e))}catch(e){n(e)}}function d(e){try{s(i.throw(e))}catch(e){n(e)}}function s(e){var t;e.done?r(e.value):(t=e.value,t instanceof o?t:new o(function(e){e(t)})).then(p,d)}s((i=i.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;class d{}r([e.type("string"),n("design:type",Object)],d.prototype,"fontFamily",void 0),r([e.type("number"),n("design:type",Object)],d.prototype,"fontSize",void 0),r([e.Field({type:"color"}),n("design:type",Object)],d.prototype,"fill",void 0),r([e.type("string"),n("design:type",String)],d.prototype,"align",void 0),r([e.type("number"),n("design:type",Number)],d.prototype,"letterSpacing",void 0),r([e.type("number"),n("design:type",Number)],d.prototype,"padding",void 0),r([e.Field({type:"color"}),n("design:type",Object)],d.prototype,"stroke",void 0),r([e.type("number"),n("design:type",Number)],d.prototype,"strokeThickness",void 0),r([e.type("string"),n("design:type",String)],d.prototype,"fontWeight",void 0),r([e.type("string"),n("design:type",String)],d.prototype,"fontStyle",void 0);class s extends e.Component{constructor(){super(...arguments),this.text="",this.style={}}init(e){this.style=Object.assign({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==e?void 0:e.style),e&&(this.text=e.text)}}s.componentName="BitmapText",r([e.type("string"),n("design:type",String)],s.prototype,"text",void 0),r([e.Field(()=>d),n("design:type",Object)],s.prototype,"style",void 0);class y{}r([e.type("number"),n("design:type",Number)],y.prototype,"alpha",void 0),r([e.Field({type:"color"}),n("design:type",Object)],y.prototype,"color",void 0),r([e.type("string"),n("design:type",String)],y.prototype,"join",void 0),r([e.type("number"),n("design:type",Number)],y.prototype,"miterLimit",void 0),r([e.type("number"),n("design:type",Number)],y.prototype,"width",void 0);class l{}r([e.type("number"),n("design:type",Number)],l.prototype,"alpha",void 0),r([e.type("number"),n("design:type",Number)],l.prototype,"angle",void 0),r([e.type("number"),n("design:type",Number)],l.prototype,"blur",void 0),r([e.Field({type:"color"}),n("design:type",Object)],l.prototype,"color",void 0),r([e.type("number"),n("design:type",Number)],l.prototype,"distance",void 0),r([e.type("boolean"),n("design:type",Boolean)],l.prototype,"enabled",void 0);class a{}r([e.type("string"),n("design:type",String)],a.prototype,"align",void 0),r([e.type("boolean"),n("design:type",Boolean)],a.prototype,"breakWords",void 0),r([e.Field(()=>l),n("design:type",Object)],a.prototype,"dropShadow",void 0),r([e.type("number"),n("design:type",Number)],a.prototype,"dropShadowAlpha",void 0),r([e.type("number"),n("design:type",Number)],a.prototype,"dropShadowAngle",void 0),r([e.type("number"),n("design:type",Number)],a.prototype,"dropShadowBlur",void 0),r([e.Field({type:"color"}),n("design:type",Object)],a.prototype,"dropShadowColor",void 0),r([e.type("number"),n("design:type",Number)],a.prototype,"dropShadowDistance",void 0),r([e.Field({type:"color"}),n("design:type",Object)],a.prototype,"fill",void 0),r([e.type("number"),n("design:type",Number)],a.prototype,"fillGradientType",void 0),r([e.type("number"),n("design:type",Array)],a.prototype,"fillGradientStops",void 0),r([e.type("string"),n("design:type",Object)],a.prototype,"fontFamily",void 0),r([e.type("number"),n("design:type",Object)],a.prototype,"fontSize",void 0),r([e.type("string"),n("design:type",String)],a.prototype,"fontStyle",void 0),r([e.type("string"),n("design:type",String)],a.prototype,"fontVariant",void 0),r([e.type("string"),n("design:type",String)],a.prototype,"fontWeight",void 0),r([e.type("number"),n("design:type",Number)],a.prototype,"leading",void 0),r([e.type("number"),n("design:type",Number)],a.prototype,"letterSpacing",void 0),r([e.type("number"),n("design:type",Number)],a.prototype,"lineHeight",void 0),r([e.type("string"),n("design:type",String)],a.prototype,"lineJoin",void 0),r([e.type("number"),n("design:type",Number)],a.prototype,"miterLimit",void 0),r([e.type("number"),n("design:type",Number)],a.prototype,"padding",void 0),r([e.Field(()=>y),n("design:type",Object)],a.prototype,"stroke",void 0),r([e.type("number"),n("design:type",Number)],a.prototype,"strokeThickness",void 0),r([e.type("string"),n("design:type",String)],a.prototype,"textBaseline",void 0),r([e.type("string"),n("design:type",String)],a.prototype,"verticalAlign",void 0),r([e.type("boolean"),n("design:type",Boolean)],a.prototype,"trim",void 0),r([e.type("string"),n("design:type",String)],a.prototype,"whiteSpace",void 0),r([e.type("boolean"),n("design:type",Boolean)],a.prototype,"wordWrap",void 0),r([e.type("number"),n("design:type",Number)],a.prototype,"wordWrapWidth",void 0);class c extends e.Component{constructor(e){super(e),this.text="",this.style={},this.init(e)}init(e){const o=new t.TextStyle({fontSize:20}),i={};for(const e in o)0===e.indexOf("_")&&(i[e.substring(1)]=o[e]);delete i.styleKey,this.style=i,e&&(this.text=e.text,Object.assign(this.style,e.style))}}c.componentName="Text",r([e.type("string"),n("design:type",String)],c.prototype,"text",void 0),r([e.Field(()=>a),n("design:type",Object)],c.prototype,"style",void 0);class g{}r([e.type("string"),n("design:type",String)],g.prototype,"scaleMode",void 0),r([e.type("number"),n("design:type",Number)],g.prototype,"resolution",void 0);class m{}r([e.type("string"),n("design:type",Object)],m.prototype,"fontFamily",void 0),r([e.type("number"),n("design:type",Object)],m.prototype,"fontSize",void 0),r([e.type("string"),n("design:type",String)],m.prototype,"fontWeight",void 0),r([e.type("string"),n("design:type",String)],m.prototype,"fontStyle",void 0),r([e.type("string"),n("design:type",String)],m.prototype,"fontVariant",void 0),r([e.type("string"),n("design:type",String)],m.prototype,"align",void 0),r([e.type("string"),n("design:type",String)],m.prototype,"textBaseline",void 0),r([e.Field({type:"color"}),n("design:type",Object)],m.prototype,"fill",void 0),r([e.Field({type:"color"}),n("design:type",Object)],m.prototype,"stroke",void 0),r([e.type("number"),n("design:type",Number)],m.prototype,"strokeThickness",void 0),r([e.type("number"),n("design:type",Number)],m.prototype,"lineHeight",void 0),r([e.type("number"),n("design:type",Number)],m.prototype,"letterSpacing",void 0),r([e.type("number"),n("design:type",Number)],m.prototype,"padding",void 0),r([e.type("boolean"),n("design:type",Boolean)],m.prototype,"wordWrap",void 0),r([e.type("number"),n("design:type",Number)],m.prototype,"wordWrapWidth",void 0),r([e.type("boolean"),n("design:type",Boolean)],m.prototype,"breakWords",void 0),r([e.type("string"),n("design:type",String)],m.prototype,"whiteSpace",void 0),r([e.type("boolean"),n("design:type",Boolean)],m.prototype,"dropShadow",void 0),r([e.Field({type:"color"}),n("design:type",Object)],m.prototype,"dropShadowColor",void 0),r([e.type("number"),n("design:type",Number)],m.prototype,"dropShadowAlpha",void 0),r([e.type("number"),n("design:type",Number)],m.prototype,"dropShadowAngle",void 0),r([e.type("number"),n("design:type",Number)],m.prototype,"dropShadowBlur",void 0),r([e.type("number"),n("design:type",Number)],m.prototype,"dropShadowDistance",void 0),r([e.type("object"),n("design:type",Array)],m.prototype,"cssOverrides",void 0),r([e.type("object"),n("design:type",Object)],m.prototype,"tagStyles",void 0),r([e.type("boolean"),n("design:type",Boolean)],m.prototype,"trim",void 0);class u extends e.Component{constructor(){super(...arguments),this.text="",this.style={},this.textureStyle={}}init(e){this.style=Object.assign({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==e?void 0:e.style),this.textureStyle=Object.assign({scaleMode:"linear",resolution:window.devicePixelRatio||1},null==e?void 0:e.textureStyle),e&&(this.text=e.text)}}u.componentName="HTMLText",r([e.type("string"),n("design:type",String)],u.prototype,"text",void 0),r([e.Field(()=>m),n("design:type",Object)],u.prototype,"style",void 0),r([e.Field(()=>g),n("design:type",Object)],u.prototype,"textureStyle",void 0);let h=class extends o.Renderer{constructor(){super(...arguments),this.name="Text",this.texts={}}init(){this.renderSystem=this.game.getSystem(o.RendererSystem),this.renderSystem.rendererManager.register(this)}componentChanged(t){return p(this,void 0,void 0,function*(){const o="Text"===t.componentName,i="HTMLText"===t.componentName,r="BitmapText"===t.componentName;if(o||i||r)if(t.type===e.OBSERVER_TYPE.ADD)o?yield this.addTextComponent(t):i?yield this.addHTMLTextComponent(t):yield this.addBitmapTextComponent(t),this.setSize(t);else if(t.type===e.OBSERVER_TYPE.REMOVE)this.containerManager.getContainer(t.gameObject.id).removeChild(this.texts[t.gameObject.id].text),this.texts[t.gameObject.id].text.destroy({children:!0}),delete this.texts[t.gameObject.id];else{this.change(t);const e=t.component;if("style"===t.prop.prop[0]&&e.style&&e.style.fontFamily){const{text:o}=this.texts[t.gameObject.id];yield this.waitForFontResource(o,t,e.style.fontFamily)}this.setSize(t)}})}addTextComponent(e){return p(this,void 0,void 0,function*(){const t=e.component,o=this.processStyle(t.style),r=o.fontFamily;delete o.fontFamily;const n=r?"":t.text,p=new i.Text(n,o);this.containerManager.getContainer(e.gameObject.id).addChildAt(p,0),this.texts[e.gameObject.id]={text:p,component:t},r&&(yield this.waitForFontResource(p,e,r))})}addHTMLTextComponent(e){return p(this,void 0,void 0,function*(){const t=e.component,o=this.processStyle(t.style),r=o.fontFamily;delete o.fontFamily;const n=r?"":t.text,p=new i.HTMLText(Object.assign({text:n,style:o},t.textureStyle&&{textureStyle:t.textureStyle}));this.containerManager.getContainer(e.gameObject.id).addChildAt(p,0),this.texts[e.gameObject.id]={text:p,component:t},r&&(yield this.waitForFontResource(p,e,r))})}addBitmapTextComponent(e){return p(this,void 0,void 0,function*(){const t=e.component,o=this.processStyle(t.style),r=o.fontFamily;delete o.fontFamily;const n=r?"":t.text,p=new i.BitmapText(n,o);this.containerManager.getContainer(e.gameObject.id).addChildAt(p,0),this.texts[e.gameObject.id]={text:p,component:t},r&&(yield this.waitForFontResource(p,e,r))})}waitForFontResource(t,o,i){return p(this,void 0,void 0,function*(){if(i)try{const r=Array.isArray(i)?i[0]:i,n=this.increaseAsyncId(o.gameObject.id);if(yield e.resource.getResource(r),!this.validateAsyncId(o.gameObject.id,n))return;const p=this.texts[o.gameObject.id].component;t.style.fontFamily=i,t.text=p.text}catch(e){console.warn(`字体资源 ${i} 加载失败:`,e)}})}processStyle(e){const o=Object.assign({},e);if(o.strokeThickness){const e=o.stroke;o.stroke={color:e,width:o.strokeThickness},delete o.strokeThickness}const i=null!=o.dropShadowColor||null!=o.dropShadowDistance||null!=o.dropShadowAngle||null!=o.dropShadowAlpha||null!=o.dropShadowBlur;if(o.dropShadow&&i){const e=o.dropShadow&&"object"==typeof o.dropShadow&&!Array.isArray(o.dropShadow)?Object.assign({},o.dropShadow):{};null!=o.dropShadowColor&&(e.color=o.dropShadowColor),null!=o.dropShadowDistance&&(e.distance=o.dropShadowDistance),null!=o.dropShadowAngle&&(e.angle=o.dropShadowAngle),null!=o.dropShadowAlpha&&(e.alpha=o.dropShadowAlpha),null!=o.dropShadowBlur&&(e.blur=o.dropShadowBlur),o.dropShadow=e}if(delete o.dropShadowColor,delete o.dropShadowDistance,delete o.dropShadowAngle,delete o.dropShadowAlpha,delete o.dropShadowBlur,Array.isArray(o.fill)&&(o.fill=o.fill[0]),Array.isArray(o.fillGradientStops)){let e;e=null==o.fontSize?t.TextStyle.defaultTextStyle.fontSize:"string"==typeof o.fontSize?parseInt(o.fontSize,10):o.fontSize;const i=new t.FillGradient(0,0,0,1.7*e),r=o.fillGradientStops.map(e=>t.Color.shared.setValue(e).toNumber());r.forEach((e,t)=>{const o=t/(r.length-1);i.addColorStop(o,e)}),o.fill={fill:i},delete o.fillGradientStops}return o}change(e){const{text:t,component:o}=this.texts[e.gameObject.id],r="HTMLText"===e.componentName;if("text"===e.prop.prop[0])t.text=o.text;else if("style"===e.prop.prop[0]){const e=this.processStyle(o.style);Object.assign(t.style,e)}else if("textureStyle"===e.prop.prop[0]&&r){const r=o,n=this.containerManager.getContainer(e.gameObject.id),p=n.getChildIndex(t);n.removeChild(t),t.destroy({children:!0});const d=new i.HTMLText({text:r.text,style:r.style,textureStyle:r.textureStyle});n.addChildAt(d,p),this.texts[e.gameObject.id].text=d}}setSize(e){const{transform:t}=e.gameObject;if(!t)return;const{text:o}=this.texts[e.gameObject.id],i=o.getSize();t.size.width=i.width,t.size.height=i.height}};h.systemName="Text",h=r([e.decorators.componentObserver({Text:["text",{prop:["style"],deep:!0}],HTMLText:["text",{prop:["style"],deep:!0},{prop:["textureStyle"],deep:!0}],BitmapText:["text",{prop:["style"],deep:!0}]})],h);var b=h;exports.BitmapText=s,exports.HTMLText=u,exports.Text=c,exports.TextSystem=b;
|
|
@@ -0,0 +1,314 @@
|
|
|
1
|
+
import { BitmapText as BitmapText_2 } from '@eva/renderer-adapter';
|
|
2
|
+
import { Component } from '@eva/eva.js';
|
|
3
|
+
import { ComponentChanged } from '@eva/eva.js';
|
|
4
|
+
import { ContainerManager } from '@eva/plugin-renderer';
|
|
5
|
+
import { HTMLText as HTMLText_2 } from '@eva/renderer-adapter';
|
|
6
|
+
import { Renderer } from '@eva/plugin-renderer';
|
|
7
|
+
import { RendererManager } from '@eva/plugin-renderer';
|
|
8
|
+
import { RendererSystem } from '@eva/plugin-renderer';
|
|
9
|
+
import { Text as Text_3 } from '@eva/renderer-adapter';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* 位图文本组件
|
|
13
|
+
*
|
|
14
|
+
* BitmapText 组件使用位图字体渲染文本,性能优于 Canvas 文本渲染。
|
|
15
|
+
* 适用于频繁更新的文本场景,如计分板、倒计时等。
|
|
16
|
+
*
|
|
17
|
+
* 支持两种字体模式:
|
|
18
|
+
* - 动态生成:指定 TextStyle,PixiJS 自动生成 bitmap font
|
|
19
|
+
* - 预加载字体:通过 BitmapFont.install() 预安装或从 .fnt 文件加载
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```typescript
|
|
23
|
+
* const score = new GameObject('score');
|
|
24
|
+
* score.addComponent(new BitmapText({
|
|
25
|
+
* text: 'Score: 0',
|
|
26
|
+
* style: {
|
|
27
|
+
* fontSize: 32,
|
|
28
|
+
* fill: '#ffffff',
|
|
29
|
+
* fontFamily: 'Arial'
|
|
30
|
+
* }
|
|
31
|
+
* }));
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
export declare class BitmapText extends Component<BitmapTextParams> {
|
|
35
|
+
static componentName: string;
|
|
36
|
+
text: string;
|
|
37
|
+
style: BitmapTextStyleOptions;
|
|
38
|
+
init(obj?: BitmapTextParams): void;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export declare interface BitmapTextParams {
|
|
42
|
+
text: string;
|
|
43
|
+
style?: BitmapTextStyleOptions;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
declare interface BitmapTextStyleOptions {
|
|
47
|
+
fontFamily?: string | string[];
|
|
48
|
+
fontSize?: number | string;
|
|
49
|
+
fill?: string | number;
|
|
50
|
+
align?: 'left' | 'center' | 'right' | 'justify';
|
|
51
|
+
letterSpacing?: number;
|
|
52
|
+
padding?: number;
|
|
53
|
+
stroke?: string | number;
|
|
54
|
+
strokeThickness?: number;
|
|
55
|
+
fontWeight?: TextStyleFontWeight;
|
|
56
|
+
fontStyle?: TextStyleFontStyle;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* HTML 富文本组件
|
|
61
|
+
*
|
|
62
|
+
* HTMLText 组件支持渲染带有 HTML 标签的富文本内容。
|
|
63
|
+
* 可以在文本中使用 HTML 标签(如 `<b>`, `<i>`, `<span>` 等)来实现丰富的文本样式,
|
|
64
|
+
* 适用于聊天对话、新闻内容、富文本显示等需要多样式文本的场景。
|
|
65
|
+
*
|
|
66
|
+
* 支持的 HTML 标签:
|
|
67
|
+
* - `<b>` - 粗体
|
|
68
|
+
* - `<i>` - 斜体
|
|
69
|
+
* - `<span style="color:#ff0000">` - 自定义样式
|
|
70
|
+
* - `<br>` - 换行
|
|
71
|
+
* 以及更多标准 HTML 文本标签
|
|
72
|
+
*
|
|
73
|
+
* @example
|
|
74
|
+
* ```typescript
|
|
75
|
+
* // 基础富文本
|
|
76
|
+
* const label = new GameObject('label');
|
|
77
|
+
* label.addComponent(new HTMLText({
|
|
78
|
+
* text: '这是<b>粗体</b>和<i>斜体</i>文本',
|
|
79
|
+
* style: {
|
|
80
|
+
* fontSize: 24,
|
|
81
|
+
* fill: '#000000',
|
|
82
|
+
* fontFamily: 'Arial'
|
|
83
|
+
* }
|
|
84
|
+
* }));
|
|
85
|
+
*
|
|
86
|
+
* // 带颜色的富文本
|
|
87
|
+
* label.addComponent(new HTMLText({
|
|
88
|
+
* text: '欢迎 <span style="color:#ff0000">玩家123</span> 加入游戏!',
|
|
89
|
+
* style: {
|
|
90
|
+
* fontSize: 20,
|
|
91
|
+
* wordWrap: true,
|
|
92
|
+
* wordWrapWidth: 300
|
|
93
|
+
* }
|
|
94
|
+
* }));
|
|
95
|
+
*
|
|
96
|
+
* // 自定义标签样式
|
|
97
|
+
* label.addComponent(new HTMLText({
|
|
98
|
+
* text: '获得 <gold>100</gold> 金币',
|
|
99
|
+
* style: {
|
|
100
|
+
* fontSize: 18,
|
|
101
|
+
* tagStyles: {
|
|
102
|
+
* gold: {
|
|
103
|
+
* fill: '#ffd700',
|
|
104
|
+
* fontWeight: 'bold'
|
|
105
|
+
* }
|
|
106
|
+
* }
|
|
107
|
+
* }
|
|
108
|
+
* }));
|
|
109
|
+
*
|
|
110
|
+
* // 高分辨率渲染(推荐使用 Render 组件的 resolution 属性)
|
|
111
|
+
* label.addComponent(new HTMLText({
|
|
112
|
+
* text: '高清文本',
|
|
113
|
+
* textureStyle: {
|
|
114
|
+
* scaleMode: 'linear'
|
|
115
|
+
* }
|
|
116
|
+
* }));
|
|
117
|
+
* label.addComponent(new Render({ resolution: 2 }));
|
|
118
|
+
* ```
|
|
119
|
+
*/
|
|
120
|
+
export declare class HTMLText extends Component<HTMLTextParams> {
|
|
121
|
+
/** 组件名称 */
|
|
122
|
+
static componentName: string;
|
|
123
|
+
/** 富文本内容(支持 HTML 标签) */
|
|
124
|
+
text: string;
|
|
125
|
+
/** 文本样式配置 */
|
|
126
|
+
style: HTMLTextParams['style'];
|
|
127
|
+
/** 纹理渲染配置 */
|
|
128
|
+
textureStyle: HTMLTextParams['textureStyle'];
|
|
129
|
+
/**
|
|
130
|
+
* 初始化组件
|
|
131
|
+
* @param obj - 初始化参数
|
|
132
|
+
*/
|
|
133
|
+
init(obj?: HTMLTextParams): void;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
export declare interface HTMLTextParams {
|
|
137
|
+
text: string;
|
|
138
|
+
style?: HTMLTextStyleOptions & {
|
|
139
|
+
cssOverrides?: string[];
|
|
140
|
+
wordWrap?: boolean;
|
|
141
|
+
wordWrapWidth?: number;
|
|
142
|
+
tagStyles?: Record<string, HTMLTextStyleOptions>;
|
|
143
|
+
};
|
|
144
|
+
textureStyle?: {
|
|
145
|
+
scaleMode?: 'linear' | 'nearest';
|
|
146
|
+
resolution?: number;
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
declare interface HTMLTextStyleOptions {
|
|
151
|
+
fontFamily?: string | string[];
|
|
152
|
+
fontSize?: number | string;
|
|
153
|
+
fill?: string | number;
|
|
154
|
+
align?: 'left' | 'center' | 'right' | 'justify';
|
|
155
|
+
breakWords?: boolean;
|
|
156
|
+
letterSpacing?: number;
|
|
157
|
+
lineHeight?: number;
|
|
158
|
+
padding?: number;
|
|
159
|
+
stroke?: string | number;
|
|
160
|
+
strokeThickness?: number;
|
|
161
|
+
dropShadow?: boolean;
|
|
162
|
+
dropShadowAlpha?: number;
|
|
163
|
+
dropShadowAngle?: number;
|
|
164
|
+
dropShadowBlur?: number;
|
|
165
|
+
dropShadowColor?: string | number;
|
|
166
|
+
dropShadowDistance?: number;
|
|
167
|
+
trim?: boolean;
|
|
168
|
+
fontWeight?: string;
|
|
169
|
+
fontStyle?: string;
|
|
170
|
+
fontVariant?: string;
|
|
171
|
+
textBaseline?: string;
|
|
172
|
+
whiteSpace?: string;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/**
|
|
176
|
+
* 文本组件(基于 PixiJS Text)
|
|
177
|
+
*
|
|
178
|
+
* Text 组件用于渲染文本内容,支持丰富的文本样式配置。
|
|
179
|
+
* 它基于 PixiJS 的 Text 实现,支持字体、颜色、描边、阴影、对齐等多种样式。
|
|
180
|
+
*
|
|
181
|
+
* 主要特性:
|
|
182
|
+
* - 支持多种字体和字号
|
|
183
|
+
* - 支持文本颜色、渐变填充
|
|
184
|
+
* - 支持描边和投影效果
|
|
185
|
+
* - 支持文本对齐和换行
|
|
186
|
+
*
|
|
187
|
+
* @example
|
|
188
|
+
* ```typescript
|
|
189
|
+
* // 基础文本
|
|
190
|
+
* const label = new GameObject('label');
|
|
191
|
+
* label.addComponent(new Text({
|
|
192
|
+
* text: 'Hello EVA!',
|
|
193
|
+
* style: {
|
|
194
|
+
* fontSize: 32,
|
|
195
|
+
* fill: 0xffffff
|
|
196
|
+
* }
|
|
197
|
+
* }));
|
|
198
|
+
*
|
|
199
|
+
* // 带样式的文本
|
|
200
|
+
* label.addComponent(new Text({
|
|
201
|
+
* text: '得分: 9999',
|
|
202
|
+
* style: {
|
|
203
|
+
* fontFamily: 'Arial',
|
|
204
|
+
* fontSize: 48,
|
|
205
|
+
* fontWeight: 'bold',
|
|
206
|
+
* fill: ['#ff0000', '#ffff00'], // 渐变色
|
|
207
|
+
* stroke: '#000000',
|
|
208
|
+
* strokeThickness: 4,
|
|
209
|
+
* dropShadow: true,
|
|
210
|
+
* dropShadowDistance: 3
|
|
211
|
+
* }
|
|
212
|
+
* }));
|
|
213
|
+
* // 如需高清渲染,使用 Render 组件的 resolution 属性
|
|
214
|
+
* label.addComponent(new Render({ resolution: 2 }));
|
|
215
|
+
* ```
|
|
216
|
+
*/
|
|
217
|
+
declare class Text_2 extends Component<TextParams> {
|
|
218
|
+
/** 组件名称 */
|
|
219
|
+
static componentName: string;
|
|
220
|
+
/** 文本内容 */
|
|
221
|
+
text: string;
|
|
222
|
+
/** 文本样式配置 */
|
|
223
|
+
style: TextParams['style'];
|
|
224
|
+
constructor(params?: TextParams);
|
|
225
|
+
/**
|
|
226
|
+
* 初始化组件
|
|
227
|
+
* @param obj - 初始化参数
|
|
228
|
+
*/
|
|
229
|
+
init(obj?: TextParams): void;
|
|
230
|
+
}
|
|
231
|
+
export { Text_2 as Text }
|
|
232
|
+
|
|
233
|
+
export declare interface TextParams {
|
|
234
|
+
text: string;
|
|
235
|
+
style?: {
|
|
236
|
+
align?: TextStyleAlign;
|
|
237
|
+
breakWords?: boolean;
|
|
238
|
+
dropShadow?: boolean;
|
|
239
|
+
dropShadowAlpha?: number;
|
|
240
|
+
dropShadowAngle?: number;
|
|
241
|
+
dropShadowBlur?: number;
|
|
242
|
+
dropShadowColor?: string | number;
|
|
243
|
+
dropShadowDistance?: number;
|
|
244
|
+
fill?: any;
|
|
245
|
+
fillGradientType?: number;
|
|
246
|
+
fillGradientStops?: number[];
|
|
247
|
+
fontFamily?: string | string[];
|
|
248
|
+
fontSize?: number | string;
|
|
249
|
+
fontStyle?: TextStyleFontStyle_2;
|
|
250
|
+
fontVariant?: TextStyleFontVariant;
|
|
251
|
+
fontWeight?: TextStyleFontWeight_2;
|
|
252
|
+
letterSpacing?: number;
|
|
253
|
+
lineHeight?: number;
|
|
254
|
+
lineJoin?: string;
|
|
255
|
+
miterLimit?: number;
|
|
256
|
+
padding?: number;
|
|
257
|
+
stroke?: string | number;
|
|
258
|
+
strokeThickness?: number;
|
|
259
|
+
textBaseline?: TextStyleTextBaseline;
|
|
260
|
+
verticalAlign?: 'top' | 'middle' | 'bottom' | string;
|
|
261
|
+
trim?: boolean;
|
|
262
|
+
whiteSpace?: TextStyleWhiteSpace;
|
|
263
|
+
wordWrap?: boolean;
|
|
264
|
+
wordWrapWidth?: number;
|
|
265
|
+
leading?: number;
|
|
266
|
+
};
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
declare type TextStyleAlign = 'left' | 'center' | 'right' | 'justify';
|
|
270
|
+
|
|
271
|
+
declare type TextStyleFontStyle = 'normal' | 'italic' | 'oblique';
|
|
272
|
+
|
|
273
|
+
declare type TextStyleFontStyle_2 = 'normal' | 'italic' | 'oblique';
|
|
274
|
+
|
|
275
|
+
declare type TextStyleFontVariant = 'normal' | 'small-caps';
|
|
276
|
+
|
|
277
|
+
declare type TextStyleFontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
|
|
278
|
+
|
|
279
|
+
declare type TextStyleFontWeight_2 = 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
|
|
280
|
+
|
|
281
|
+
declare type TextStyleTextBaseline = 'alphabetic' | 'top' | 'hanging' | 'middle' | 'ideographic' | 'bottom';
|
|
282
|
+
|
|
283
|
+
declare type TextStyleWhiteSpace = 'normal' | 'pre' | 'pre-line';
|
|
284
|
+
|
|
285
|
+
export declare class TextSystem extends Renderer {
|
|
286
|
+
static systemName: string;
|
|
287
|
+
name: string;
|
|
288
|
+
texts: {
|
|
289
|
+
[propName: number]: {
|
|
290
|
+
text: Text_3 | HTMLText_2 | BitmapText_2;
|
|
291
|
+
component: Text_2 | HTMLText | BitmapText;
|
|
292
|
+
};
|
|
293
|
+
};
|
|
294
|
+
renderSystem: RendererSystem;
|
|
295
|
+
rendererManager: RendererManager;
|
|
296
|
+
containerManager: ContainerManager;
|
|
297
|
+
init(): void;
|
|
298
|
+
componentChanged(changed: ComponentChanged): Promise<void>;
|
|
299
|
+
private addTextComponent;
|
|
300
|
+
private addHTMLTextComponent;
|
|
301
|
+
private addBitmapTextComponent;
|
|
302
|
+
/**
|
|
303
|
+
* 等待字体资源加载完成并更新文本
|
|
304
|
+
*/
|
|
305
|
+
private waitForFontResource;
|
|
306
|
+
/**
|
|
307
|
+
* 将 Eva.js 的样式格式转换为 PixiJS v8 格式
|
|
308
|
+
*/
|
|
309
|
+
private processStyle;
|
|
310
|
+
change(changed: ComponentChanged): void;
|
|
311
|
+
setSize(changed: ComponentChanged): void;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
export { }
|