@eva/plugin-renderer-text 2.0.1-beta.35 → 2.0.1-beta.37
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 +37 -1
- package/dist/EVA.plugin.renderer.text.min.js +1 -1
- package/dist/plugin-renderer-text.cjs.js +43 -1
- package/dist/plugin-renderer-text.cjs.prod.js +2 -2
- package/dist/plugin-renderer-text.d.ts +4 -0
- package/dist/plugin-renderer-text.esm.js +44 -2
- package/package.json +4 -4
|
@@ -245,6 +245,41 @@ var _EVA_IIFE_text = function (exports, eva_js, pixi_js, pluginRenderer, rendere
|
|
|
245
245
|
}
|
|
246
246
|
});
|
|
247
247
|
}
|
|
248
|
+
processStyle(style) {
|
|
249
|
+
const processed = _extends({}, style);
|
|
250
|
+
if (processed.strokeThickness) {
|
|
251
|
+
const color = processed.stroke;
|
|
252
|
+
processed.stroke = {
|
|
253
|
+
color,
|
|
254
|
+
width: processed.strokeThickness
|
|
255
|
+
};
|
|
256
|
+
delete processed.strokeThickness;
|
|
257
|
+
}
|
|
258
|
+
if (Array.isArray(processed.fill)) {
|
|
259
|
+
processed.fill = processed.fill[0];
|
|
260
|
+
}
|
|
261
|
+
if (Array.isArray(processed.fillGradientStops)) {
|
|
262
|
+
let fontSize;
|
|
263
|
+
if (processed.fontSize == null) {
|
|
264
|
+
fontSize = pixi_js.TextStyle.defaultTextStyle.fontSize;
|
|
265
|
+
} else if (typeof processed.fontSize === 'string') {
|
|
266
|
+
fontSize = parseInt(processed.fontSize, 10);
|
|
267
|
+
} else {
|
|
268
|
+
fontSize = processed.fontSize;
|
|
269
|
+
}
|
|
270
|
+
const gradientFill = new pixi_js.FillGradient(0, 0, 0, fontSize * 1.7);
|
|
271
|
+
const fills = processed.fillGradientStops.map(color => pixi_js.Color.shared.setValue(color).toNumber());
|
|
272
|
+
fills.forEach((number, index) => {
|
|
273
|
+
const ratio = index / (fills.length - 1);
|
|
274
|
+
gradientFill.addColorStop(ratio, number);
|
|
275
|
+
});
|
|
276
|
+
processed.fill = {
|
|
277
|
+
fill: gradientFill
|
|
278
|
+
};
|
|
279
|
+
delete processed.fillGradientStops;
|
|
280
|
+
}
|
|
281
|
+
return processed;
|
|
282
|
+
}
|
|
248
283
|
change(changed) {
|
|
249
284
|
const {
|
|
250
285
|
text,
|
|
@@ -254,7 +289,8 @@ var _EVA_IIFE_text = function (exports, eva_js, pixi_js, pluginRenderer, rendere
|
|
|
254
289
|
if (changed.prop.prop[0] === 'text') {
|
|
255
290
|
text.text = component.text;
|
|
256
291
|
} else if (changed.prop.prop[0] === 'style') {
|
|
257
|
-
|
|
292
|
+
const processedStyle = this.processStyle(component.style);
|
|
293
|
+
_extends(text.style, processedStyle);
|
|
258
294
|
} else if (changed.prop.prop[0] === 'textureStyle' && isHTMLText) {
|
|
259
295
|
const htmlComponent = component;
|
|
260
296
|
const container = this.containerManager.getContainer(changed.gameObject.id);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function _extends(){return _extends=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},_extends.apply(null,arguments)}globalThis.EVA=globalThis.EVA||{},globalThis.EVA.plugin=globalThis.EVA.plugin||{},globalThis.EVA.plugin.renderer=globalThis.EVA.plugin.renderer||{};var _EVA_IIFE_text=function(t,e,n,i,o){"use strict";function s(t,e,n,i){var o,s=arguments.length,r=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(s<3?o(r):s>3?o(e,n,r):o(e,n))||r);return s>3&&r&&Object.defineProperty(e,n,r),r}function r(t,e,n,i){return new(n||(n=Promise))((function(o,s){function r(t){try{
|
|
1
|
+
function _extends(){return _extends=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},_extends.apply(null,arguments)}globalThis.EVA=globalThis.EVA||{},globalThis.EVA.plugin=globalThis.EVA.plugin||{},globalThis.EVA.plugin.renderer=globalThis.EVA.plugin.renderer||{};var _EVA_IIFE_text=function(t,e,n,i,o){"use strict";function s(t,e,n,i){var o,s=arguments.length,r=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(s<3?o(r):s>3?o(e,n,r):o(e,n))||r);return s>3&&r&&Object.defineProperty(e,n,r),r}function r(t,e,n,i){return new(n||(n=Promise))((function(o,s){function r(t){try{a(i.next(t))}catch(t){s(t)}}function l(t){try{a(i.throw(t))}catch(t){s(t)}}function a(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(r,l)}a((i=i.apply(t,e||[])).next())}))}function l(t){return function(e,n){var i=function(t,e){return t.constructor.IDEProps||(t.constructor.IDEProps={}),t.constructor.IDEProps[e]||(t.constructor.IDEProps[e]={}),t.constructor.IDEProps[e]}(e,n);i.key=n,i.type=t}}class a extends e.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){this.style=_extends({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==t?void 0:t.style),t&&(this.text=t.text)}}a.componentName="BitmapText",s([l("string")],a.prototype,"text",void 0);class c extends e.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){const e=new n.TextStyle({fontSize:20}),i={};for(const t in e)0===t.indexOf("_")&&(i[t.substring(1)]=e[t]);delete i.styleKey,this.style=i,t&&(this.text=t.text,_extends(this.style,t.style))}}c.componentName="Text",s([l("string")],c.prototype,"text",void 0);class d extends e.Component{constructor(){super(...arguments),this.text="",this.style={},this.textureStyle={}}init(t){this.style=_extends({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==t?void 0:t.style),this.textureStyle=_extends({scaleMode:"linear",resolution:window.devicePixelRatio||1},null==t?void 0:t.textureStyle),t&&(this.text=t.text)}}d.componentName="HTMLText",s([l("string")],d.prototype,"text",void 0);let x=class extends i.Renderer{constructor(){super(...arguments),this.name="Text",this.texts={}}init(){this.renderSystem=this.game.getSystem(i.RendererSystem),this.renderSystem.rendererManager.register(this)}componentChanged(t){return r(this,void 0,void 0,(function*(){const n="Text"===t.componentName,i="HTMLText"===t.componentName,o="BitmapText"===t.componentName;if(n||i||o)if(t.type===e.OBSERVER_TYPE.ADD)n?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:n}=this.texts[t.gameObject.id];yield this.waitForFontResource(n,t,e.style.fontFamily)}this.setSize(t)}}))}addTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,n=_extends({},e.style),i=n.fontFamily;delete n.fontFamily;const s=i?"":e.text,r=new o.Text(s,n);this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},i&&(yield this.waitForFontResource(r,t,i))}))}addHTMLTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,n=_extends({},e.style),i=n.fontFamily;delete n.fontFamily;const s=i?"":e.text,r=new o.HTMLText(_extends({text:s,style:n},e.textureStyle&&{textureStyle:e.textureStyle}));this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},i&&(yield this.waitForFontResource(r,t,i))}))}addBitmapTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,n=_extends({},e.style),i=n.fontFamily;delete n.fontFamily;const s=i?"":e.text,r=new o.BitmapText(s,n);this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},i&&(yield this.waitForFontResource(r,t,i))}))}waitForFontResource(t,n,i){return r(this,void 0,void 0,(function*(){if(i)try{const o=Array.isArray(i)?i[0]:i,s=this.increaseAsyncId(n.gameObject.id);if(yield e.resource.getResource(o),!this.validateAsyncId(n.gameObject.id,s))return;const r=this.texts[n.gameObject.id].component;t.style.fontFamily=i,t.text=r.text}catch(t){console.warn(`字体资源 ${i} 加载失败:`,t)}}))}processStyle(t){const e=_extends({},t);if(e.strokeThickness){const t=e.stroke;e.stroke={color:t,width:e.strokeThickness},delete e.strokeThickness}if(Array.isArray(e.fill)&&(e.fill=e.fill[0]),Array.isArray(e.fillGradientStops)){let t;t=null==e.fontSize?n.TextStyle.defaultTextStyle.fontSize:"string"==typeof e.fontSize?parseInt(e.fontSize,10):e.fontSize;const i=new n.FillGradient(0,0,0,1.7*t),o=e.fillGradientStops.map((t=>n.Color.shared.setValue(t).toNumber()));o.forEach(((t,e)=>{const n=e/(o.length-1);i.addColorStop(n,t)})),e.fill={fill:i},delete e.fillGradientStops}return e}change(t){const{text:e,component:n}=this.texts[t.gameObject.id],i="HTMLText"===t.componentName;if("text"===t.prop.prop[0])e.text=n.text;else if("style"===t.prop.prop[0]){const t=this.processStyle(n.style);_extends(e.style,t)}else if("textureStyle"===t.prop.prop[0]&&i){const i=n,s=this.containerManager.getContainer(t.gameObject.id),r=s.getChildIndex(e);s.removeChild(e),e.destroy({children:!0});const l=new o.HTMLText({text:i.text,style:i.style,textureStyle:i.textureStyle});s.addChildAt(l,r),this.texts[t.gameObject.id].text=l}}setSize(t){const{transform:e}=t.gameObject;if(!e)return;const{text:n}=this.texts[t.gameObject.id],i=n.getSize();e.size.width=i.width,e.size.height=i.height}};x.systemName="Text",x=s([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}]})],x);var p=x;return t.BitmapText=a,t.HTMLText=d,t.Text=c,t.TextSystem=p,Object.defineProperty(t,"__esModule",{value:!0}),t}({},EVA,PIXI,EVA.plugin.renderer,EVA.rendererAdapter);globalThis.EVA.plugin.renderer.text=globalThis.EVA.plugin.renderer.text||_EVA_IIFE_text;
|
|
@@ -386,6 +386,47 @@ let Text = class Text extends pluginRenderer.Renderer {
|
|
|
386
386
|
}
|
|
387
387
|
});
|
|
388
388
|
}
|
|
389
|
+
/**
|
|
390
|
+
* 将 Eva.js 的样式格式转换为 PixiJS v8 格式
|
|
391
|
+
*/
|
|
392
|
+
processStyle(style) {
|
|
393
|
+
const processed = Object.assign({}, style);
|
|
394
|
+
// stroke + strokeThickness -> stroke: { color, width }
|
|
395
|
+
if (processed.strokeThickness) {
|
|
396
|
+
const color = processed.stroke;
|
|
397
|
+
processed.stroke = {
|
|
398
|
+
color,
|
|
399
|
+
width: processed.strokeThickness,
|
|
400
|
+
};
|
|
401
|
+
delete processed.strokeThickness;
|
|
402
|
+
}
|
|
403
|
+
// fill 数组 -> 取第一个值 (deprecated)
|
|
404
|
+
if (Array.isArray(processed.fill)) {
|
|
405
|
+
processed.fill = processed.fill[0];
|
|
406
|
+
}
|
|
407
|
+
// fillGradientStops -> FillGradient 对象
|
|
408
|
+
if (Array.isArray(processed.fillGradientStops)) {
|
|
409
|
+
let fontSize;
|
|
410
|
+
if (processed.fontSize == null) {
|
|
411
|
+
fontSize = pixi_js.TextStyle.defaultTextStyle.fontSize;
|
|
412
|
+
}
|
|
413
|
+
else if (typeof processed.fontSize === 'string') {
|
|
414
|
+
fontSize = parseInt(processed.fontSize, 10);
|
|
415
|
+
}
|
|
416
|
+
else {
|
|
417
|
+
fontSize = processed.fontSize;
|
|
418
|
+
}
|
|
419
|
+
const gradientFill = new pixi_js.FillGradient(0, 0, 0, fontSize * 1.7);
|
|
420
|
+
const fills = processed.fillGradientStops.map((color) => pixi_js.Color.shared.setValue(color).toNumber());
|
|
421
|
+
fills.forEach((number, index) => {
|
|
422
|
+
const ratio = index / (fills.length - 1);
|
|
423
|
+
gradientFill.addColorStop(ratio, number);
|
|
424
|
+
});
|
|
425
|
+
processed.fill = { fill: gradientFill };
|
|
426
|
+
delete processed.fillGradientStops;
|
|
427
|
+
}
|
|
428
|
+
return processed;
|
|
429
|
+
}
|
|
389
430
|
change(changed) {
|
|
390
431
|
const { text, component } = this.texts[changed.gameObject.id];
|
|
391
432
|
const isHTMLText = changed.componentName === 'HTMLText';
|
|
@@ -393,7 +434,8 @@ let Text = class Text extends pluginRenderer.Renderer {
|
|
|
393
434
|
text.text = component.text;
|
|
394
435
|
}
|
|
395
436
|
else if (changed.prop.prop[0] === 'style') {
|
|
396
|
-
|
|
437
|
+
const processedStyle = this.processStyle(component.style);
|
|
438
|
+
Object.assign(text.style, processedStyle);
|
|
397
439
|
}
|
|
398
440
|
else if (changed.prop.prop[0] === 'textureStyle' && isHTMLText) {
|
|
399
441
|
// HTMLText 纹理样式变化需要重新创建
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@eva/eva.js"),e=require("@eva/inspector-decorator"),i=require("pixi.js"),n=require("@eva/plugin-renderer"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@eva/eva.js"),e=require("@eva/inspector-decorator"),i=require("pixi.js"),n=require("@eva/plugin-renderer"),s=require("@eva/renderer-adapter");
|
|
2
2
|
/*! *****************************************************************************
|
|
3
3
|
Copyright (c) Microsoft Corporation. All rights reserved.
|
|
4
4
|
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
@@ -13,4 +13,4 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
|
|
|
13
13
|
See the Apache Version 2.0 License for specific language governing permissions
|
|
14
14
|
and limitations under the License.
|
|
15
15
|
***************************************************************************** */
|
|
16
|
-
function
|
|
16
|
+
function o(t,e,i,n){var s,o=arguments.length,r=o<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(o<3?s(r):o>3?s(e,i,r):s(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r}function r(t,e,i,n){return new(i||(i=Promise))((function(s,o){function r(t){try{l(n.next(t))}catch(t){o(t)}}function a(t){try{l(n.throw(t))}catch(t){o(t)}}function l(t){t.done?s(t.value):new i((function(e){e(t.value)})).then(r,a)}l((n=n.apply(t,e||[])).next())}))}class a extends t.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){this.style=Object.assign({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==t?void 0:t.style),t&&(this.text=t.text)}}a.componentName="BitmapText",o([e.type("string")],a.prototype,"text",void 0);class l extends t.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){const e=new i.TextStyle({fontSize:20}),n={};for(const t in e)0===t.indexOf("_")&&(n[t.substring(1)]=e[t]);delete n.styleKey,this.style=n,t&&(this.text=t.text,Object.assign(this.style,t.style))}}l.componentName="Text",o([e.type("string")],l.prototype,"text",void 0);class c extends t.Component{constructor(){super(...arguments),this.text="",this.style={},this.textureStyle={}}init(t){this.style=Object.assign({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==t?void 0:t.style),this.textureStyle=Object.assign({scaleMode:"linear",resolution:window.devicePixelRatio||1},null==t?void 0:t.textureStyle),t&&(this.text=t.text)}}c.componentName="HTMLText",o([e.type("string")],c.prototype,"text",void 0);let d=class extends n.Renderer{constructor(){super(...arguments),this.name="Text",this.texts={}}init(){this.renderSystem=this.game.getSystem(n.RendererSystem),this.renderSystem.rendererManager.register(this)}componentChanged(e){return r(this,void 0,void 0,(function*(){const i="Text"===e.componentName,n="HTMLText"===e.componentName,s="BitmapText"===e.componentName;if(i||n||s)if(e.type===t.OBSERVER_TYPE.ADD)i?yield this.addTextComponent(e):n?yield this.addHTMLTextComponent(e):yield this.addBitmapTextComponent(e),this.setSize(e);else if(e.type===t.OBSERVER_TYPE.REMOVE)this.containerManager.getContainer(e.gameObject.id).removeChild(this.texts[e.gameObject.id].text),this.texts[e.gameObject.id].text.destroy({children:!0}),delete this.texts[e.gameObject.id];else{this.change(e);const t=e.component;if("style"===e.prop.prop[0]&&t.style&&t.style.fontFamily){const{text:i}=this.texts[e.gameObject.id];yield this.waitForFontResource(i,e,t.style.fontFamily)}this.setSize(e)}}))}addTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,i=Object.assign({},e.style),n=i.fontFamily;delete i.fontFamily;const o=n?"":e.text,r=new s.Text(o,i);this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},n&&(yield this.waitForFontResource(r,t,n))}))}addHTMLTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,i=Object.assign({},e.style),n=i.fontFamily;delete i.fontFamily;const o=n?"":e.text,r=new s.HTMLText(Object.assign({text:o,style:i},e.textureStyle&&{textureStyle:e.textureStyle}));this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},n&&(yield this.waitForFontResource(r,t,n))}))}addBitmapTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,i=Object.assign({},e.style),n=i.fontFamily;delete i.fontFamily;const o=n?"":e.text,r=new s.BitmapText(o,i);this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},n&&(yield this.waitForFontResource(r,t,n))}))}waitForFontResource(e,i,n){return r(this,void 0,void 0,(function*(){if(n)try{const s=Array.isArray(n)?n[0]:n,o=this.increaseAsyncId(i.gameObject.id);if(yield t.resource.getResource(s),!this.validateAsyncId(i.gameObject.id,o))return;const r=this.texts[i.gameObject.id].component;e.style.fontFamily=n,e.text=r.text}catch(t){console.warn(`字体资源 ${n} 加载失败:`,t)}}))}processStyle(t){const e=Object.assign({},t);if(e.strokeThickness){const t=e.stroke;e.stroke={color:t,width:e.strokeThickness},delete e.strokeThickness}if(Array.isArray(e.fill)&&(e.fill=e.fill[0]),Array.isArray(e.fillGradientStops)){let t;t=null==e.fontSize?i.TextStyle.defaultTextStyle.fontSize:"string"==typeof e.fontSize?parseInt(e.fontSize,10):e.fontSize;const n=new i.FillGradient(0,0,0,1.7*t),s=e.fillGradientStops.map((t=>i.Color.shared.setValue(t).toNumber()));s.forEach(((t,e)=>{const i=e/(s.length-1);n.addColorStop(i,t)})),e.fill={fill:n},delete e.fillGradientStops}return e}change(t){const{text:e,component:i}=this.texts[t.gameObject.id],n="HTMLText"===t.componentName;if("text"===t.prop.prop[0])e.text=i.text;else if("style"===t.prop.prop[0]){const t=this.processStyle(i.style);Object.assign(e.style,t)}else if("textureStyle"===t.prop.prop[0]&&n){const n=i,o=this.containerManager.getContainer(t.gameObject.id),r=o.getChildIndex(e);o.removeChild(e),e.destroy({children:!0});const a=new s.HTMLText({text:n.text,style:n.style,textureStyle:n.textureStyle});o.addChildAt(a,r),this.texts[t.gameObject.id].text=a}}setSize(t){const{transform:e}=t.gameObject;if(!e)return;const{text:i}=this.texts[t.gameObject.id],n=i.getSize();e.size.width=n.width,e.size.height=n.height}};d.systemName="Text",d=o([t.decorators.componentObserver({Text:["text",{prop:["style"],deep:!0}],HTMLText:["text",{prop:["style"],deep:!0},{prop:["textureStyle"],deep:!0}],BitmapText:["text",{prop:["style"],deep:!0}]})],d);var p=d;exports.BitmapText=a,exports.HTMLText=c,exports.Text=l,exports.TextSystem=p;
|
|
@@ -296,6 +296,10 @@ export declare class TextSystem extends Renderer {
|
|
|
296
296
|
* 等待字体资源加载完成并更新文本
|
|
297
297
|
*/
|
|
298
298
|
private waitForFontResource;
|
|
299
|
+
/**
|
|
300
|
+
* 将 Eva.js 的样式格式转换为 PixiJS v8 格式
|
|
301
|
+
*/
|
|
302
|
+
private processStyle;
|
|
299
303
|
change(changed: ComponentChanged): void;
|
|
300
304
|
setSize(changed: ComponentChanged): void;
|
|
301
305
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Component, decorators, OBSERVER_TYPE, resource } from '@eva/eva.js';
|
|
2
2
|
import { type } from '@eva/inspector-decorator';
|
|
3
|
-
import { TextStyle } from 'pixi.js';
|
|
3
|
+
import { TextStyle, FillGradient, Color } from 'pixi.js';
|
|
4
4
|
import { Renderer, RendererSystem } from '@eva/plugin-renderer';
|
|
5
5
|
import { HTMLText as HTMLText$1, Text as Text$3, BitmapText as BitmapText$1 } from '@eva/renderer-adapter';
|
|
6
6
|
|
|
@@ -382,6 +382,47 @@ let Text = class Text extends Renderer {
|
|
|
382
382
|
}
|
|
383
383
|
});
|
|
384
384
|
}
|
|
385
|
+
/**
|
|
386
|
+
* 将 Eva.js 的样式格式转换为 PixiJS v8 格式
|
|
387
|
+
*/
|
|
388
|
+
processStyle(style) {
|
|
389
|
+
const processed = Object.assign({}, style);
|
|
390
|
+
// stroke + strokeThickness -> stroke: { color, width }
|
|
391
|
+
if (processed.strokeThickness) {
|
|
392
|
+
const color = processed.stroke;
|
|
393
|
+
processed.stroke = {
|
|
394
|
+
color,
|
|
395
|
+
width: processed.strokeThickness,
|
|
396
|
+
};
|
|
397
|
+
delete processed.strokeThickness;
|
|
398
|
+
}
|
|
399
|
+
// fill 数组 -> 取第一个值 (deprecated)
|
|
400
|
+
if (Array.isArray(processed.fill)) {
|
|
401
|
+
processed.fill = processed.fill[0];
|
|
402
|
+
}
|
|
403
|
+
// fillGradientStops -> FillGradient 对象
|
|
404
|
+
if (Array.isArray(processed.fillGradientStops)) {
|
|
405
|
+
let fontSize;
|
|
406
|
+
if (processed.fontSize == null) {
|
|
407
|
+
fontSize = TextStyle.defaultTextStyle.fontSize;
|
|
408
|
+
}
|
|
409
|
+
else if (typeof processed.fontSize === 'string') {
|
|
410
|
+
fontSize = parseInt(processed.fontSize, 10);
|
|
411
|
+
}
|
|
412
|
+
else {
|
|
413
|
+
fontSize = processed.fontSize;
|
|
414
|
+
}
|
|
415
|
+
const gradientFill = new FillGradient(0, 0, 0, fontSize * 1.7);
|
|
416
|
+
const fills = processed.fillGradientStops.map((color) => Color.shared.setValue(color).toNumber());
|
|
417
|
+
fills.forEach((number, index) => {
|
|
418
|
+
const ratio = index / (fills.length - 1);
|
|
419
|
+
gradientFill.addColorStop(ratio, number);
|
|
420
|
+
});
|
|
421
|
+
processed.fill = { fill: gradientFill };
|
|
422
|
+
delete processed.fillGradientStops;
|
|
423
|
+
}
|
|
424
|
+
return processed;
|
|
425
|
+
}
|
|
385
426
|
change(changed) {
|
|
386
427
|
const { text, component } = this.texts[changed.gameObject.id];
|
|
387
428
|
const isHTMLText = changed.componentName === 'HTMLText';
|
|
@@ -389,7 +430,8 @@ let Text = class Text extends Renderer {
|
|
|
389
430
|
text.text = component.text;
|
|
390
431
|
}
|
|
391
432
|
else if (changed.prop.prop[0] === 'style') {
|
|
392
|
-
|
|
433
|
+
const processedStyle = this.processStyle(component.style);
|
|
434
|
+
Object.assign(text.style, processedStyle);
|
|
393
435
|
}
|
|
394
436
|
else if (changed.prop.prop[0] === 'textureStyle' && isHTMLText) {
|
|
395
437
|
// HTMLText 纹理样式变化需要重新创建
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eva/plugin-renderer-text",
|
|
3
|
-
"version": "2.0.1-beta.
|
|
3
|
+
"version": "2.0.1-beta.37",
|
|
4
4
|
"description": "@eva/plugin-renderer-text",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "dist/plugin-renderer-text.esm.js",
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"homepage": "https://eva.js.org",
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@eva/inspector-decorator": "^0.0.5",
|
|
22
|
-
"@eva/plugin-renderer": "2.0.1-beta.
|
|
23
|
-
"@eva/renderer-adapter": "2.0.1-beta.
|
|
24
|
-
"@eva/eva.js": "2.0.1-beta.
|
|
22
|
+
"@eva/plugin-renderer": "2.0.1-beta.37",
|
|
23
|
+
"@eva/renderer-adapter": "2.0.1-beta.37",
|
|
24
|
+
"@eva/eva.js": "2.0.1-beta.37",
|
|
25
25
|
"pixi.js": "^8.17.0"
|
|
26
26
|
}
|
|
27
27
|
}
|