@eva/plugin-renderer-text 2.0.1-beta.36 → 2.0.1-beta.38
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 +49 -2
- package/dist/EVA.plugin.renderer.text.min.js +1 -1
- package/dist/plugin-renderer-text.cjs.js +54 -3
- package/dist/plugin-renderer-text.cjs.prod.js +2 -2
- package/dist/plugin-renderer-text.d.ts +2 -2
- package/dist/plugin-renderer-text.esm.js +55 -4
- package/package.json +4 -4
|
@@ -245,7 +245,7 @@ var _EVA_IIFE_text = function (exports, eva_js, pixi_js, pluginRenderer, rendere
|
|
|
245
245
|
}
|
|
246
246
|
});
|
|
247
247
|
}
|
|
248
|
-
|
|
248
|
+
processStyle(style) {
|
|
249
249
|
const processed = _extends({}, style);
|
|
250
250
|
if (processed.strokeThickness) {
|
|
251
251
|
const color = processed.stroke;
|
|
@@ -255,6 +255,53 @@ var _EVA_IIFE_text = function (exports, eva_js, pixi_js, pluginRenderer, rendere
|
|
|
255
255
|
};
|
|
256
256
|
delete processed.strokeThickness;
|
|
257
257
|
}
|
|
258
|
+
if (processed.dropShadow) {
|
|
259
|
+
const dropShadowConfig = {};
|
|
260
|
+
if (processed.dropShadowColor != null) {
|
|
261
|
+
dropShadowConfig.color = processed.dropShadowColor;
|
|
262
|
+
}
|
|
263
|
+
if (processed.dropShadowDistance != null) {
|
|
264
|
+
dropShadowConfig.distance = processed.dropShadowDistance;
|
|
265
|
+
}
|
|
266
|
+
if (processed.dropShadowAngle != null) {
|
|
267
|
+
dropShadowConfig.angle = processed.dropShadowAngle;
|
|
268
|
+
}
|
|
269
|
+
if (processed.dropShadowAlpha != null) {
|
|
270
|
+
dropShadowConfig.alpha = processed.dropShadowAlpha;
|
|
271
|
+
}
|
|
272
|
+
if (processed.dropShadowBlur != null) {
|
|
273
|
+
dropShadowConfig.blur = processed.dropShadowBlur;
|
|
274
|
+
}
|
|
275
|
+
processed.dropShadow = dropShadowConfig;
|
|
276
|
+
delete processed.dropShadowColor;
|
|
277
|
+
delete processed.dropShadowDistance;
|
|
278
|
+
delete processed.dropShadowAngle;
|
|
279
|
+
delete processed.dropShadowAlpha;
|
|
280
|
+
delete processed.dropShadowBlur;
|
|
281
|
+
}
|
|
282
|
+
if (Array.isArray(processed.fill)) {
|
|
283
|
+
processed.fill = processed.fill[0];
|
|
284
|
+
}
|
|
285
|
+
if (Array.isArray(processed.fillGradientStops)) {
|
|
286
|
+
let fontSize;
|
|
287
|
+
if (processed.fontSize == null) {
|
|
288
|
+
fontSize = pixi_js.TextStyle.defaultTextStyle.fontSize;
|
|
289
|
+
} else if (typeof processed.fontSize === 'string') {
|
|
290
|
+
fontSize = parseInt(processed.fontSize, 10);
|
|
291
|
+
} else {
|
|
292
|
+
fontSize = processed.fontSize;
|
|
293
|
+
}
|
|
294
|
+
const gradientFill = new pixi_js.FillGradient(0, 0, 0, fontSize * 1.7);
|
|
295
|
+
const fills = processed.fillGradientStops.map(color => pixi_js.Color.shared.setValue(color).toNumber());
|
|
296
|
+
fills.forEach((number, index) => {
|
|
297
|
+
const ratio = index / (fills.length - 1);
|
|
298
|
+
gradientFill.addColorStop(ratio, number);
|
|
299
|
+
});
|
|
300
|
+
processed.fill = {
|
|
301
|
+
fill: gradientFill
|
|
302
|
+
};
|
|
303
|
+
delete processed.fillGradientStops;
|
|
304
|
+
}
|
|
258
305
|
return processed;
|
|
259
306
|
}
|
|
260
307
|
change(changed) {
|
|
@@ -266,7 +313,7 @@ var _EVA_IIFE_text = function (exports, eva_js, pixi_js, pluginRenderer, rendere
|
|
|
266
313
|
if (changed.prop.prop[0] === 'text') {
|
|
267
314
|
text.text = component.text;
|
|
268
315
|
} else if (changed.prop.prop[0] === 'style') {
|
|
269
|
-
const processedStyle = this.
|
|
316
|
+
const processedStyle = this.processStyle(component.style);
|
|
270
317
|
_extends(text.style, processedStyle);
|
|
271
318
|
} else if (changed.prop.prop[0] === 'textureStyle' && isHTMLText) {
|
|
272
319
|
const htmlComponent = component;
|
|
@@ -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 o in n)({}).hasOwnProperty.call(n,o)&&(t[o]=n[o])}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,o,i){"use strict";function
|
|
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 o in n)({}).hasOwnProperty.call(n,o)&&(t[o]=n[o])}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,o,i){"use strict";function r(t,e,n,o){var i,r=arguments.length,s=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,n,o);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(s=(r<3?i(s):r>3?i(e,n,s):i(e,n))||s);return r>3&&s&&Object.defineProperty(e,n,s),s}function s(t,e,n,o){return new(n||(n=Promise))((function(i,r){function s(t){try{d(o.next(t))}catch(t){r(t)}}function l(t){try{d(o.throw(t))}catch(t){r(t)}}function d(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,l)}d((o=o.apply(t,e||[])).next())}))}function l(t){return function(e,n){var o=function(t,e){return t.constructor.IDEProps||(t.constructor.IDEProps={}),t.constructor.IDEProps[e]||(t.constructor.IDEProps[e]={}),t.constructor.IDEProps[e]}(e,n);o.key=n,o.type=t}}class d 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)}}d.componentName="BitmapText",r([l("string")],d.prototype,"text",void 0);class a extends e.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){const e=new n.TextStyle({fontSize:20}),o={};for(const t in e)0===t.indexOf("_")&&(o[t.substring(1)]=e[t]);delete o.styleKey,this.style=o,t&&(this.text=t.text,_extends(this.style,t.style))}}a.componentName="Text",r([l("string")],a.prototype,"text",void 0);class c 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)}}c.componentName="HTMLText",r([l("string")],c.prototype,"text",void 0);let p=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 s(this,void 0,void 0,(function*(){const n="Text"===t.componentName,o="HTMLText"===t.componentName,i="BitmapText"===t.componentName;if(n||o||i)if(t.type===e.OBSERVER_TYPE.ADD)n?yield this.addTextComponent(t):o?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 s(this,void 0,void 0,(function*(){const e=t.component,n=_extends({},e.style),o=n.fontFamily;delete n.fontFamily;const r=o?"":e.text,s=new i.Text(r,n);this.containerManager.getContainer(t.gameObject.id).addChildAt(s,0),this.texts[t.gameObject.id]={text:s,component:e},o&&(yield this.waitForFontResource(s,t,o))}))}addHTMLTextComponent(t){return s(this,void 0,void 0,(function*(){const e=t.component,n=_extends({},e.style),o=n.fontFamily;delete n.fontFamily;const r=o?"":e.text,s=new i.HTMLText(_extends({text:r,style:n},e.textureStyle&&{textureStyle:e.textureStyle}));this.containerManager.getContainer(t.gameObject.id).addChildAt(s,0),this.texts[t.gameObject.id]={text:s,component:e},o&&(yield this.waitForFontResource(s,t,o))}))}addBitmapTextComponent(t){return s(this,void 0,void 0,(function*(){const e=t.component,n=_extends({},e.style),o=n.fontFamily;delete n.fontFamily;const r=o?"":e.text,s=new i.BitmapText(r,n);this.containerManager.getContainer(t.gameObject.id).addChildAt(s,0),this.texts[t.gameObject.id]={text:s,component:e},o&&(yield this.waitForFontResource(s,t,o))}))}waitForFontResource(t,n,o){return s(this,void 0,void 0,(function*(){if(o)try{const i=Array.isArray(o)?o[0]:o,r=this.increaseAsyncId(n.gameObject.id);if(yield e.resource.getResource(i),!this.validateAsyncId(n.gameObject.id,r))return;const s=this.texts[n.gameObject.id].component;t.style.fontFamily=o,t.text=s.text}catch(t){console.warn(`字体资源 ${o} 加载失败:`,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(e.dropShadow){const t={};null!=e.dropShadowColor&&(t.color=e.dropShadowColor),null!=e.dropShadowDistance&&(t.distance=e.dropShadowDistance),null!=e.dropShadowAngle&&(t.angle=e.dropShadowAngle),null!=e.dropShadowAlpha&&(t.alpha=e.dropShadowAlpha),null!=e.dropShadowBlur&&(t.blur=e.dropShadowBlur),e.dropShadow=t,delete e.dropShadowColor,delete e.dropShadowDistance,delete e.dropShadowAngle,delete e.dropShadowAlpha,delete e.dropShadowBlur}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 o=new n.FillGradient(0,0,0,1.7*t),i=e.fillGradientStops.map((t=>n.Color.shared.setValue(t).toNumber()));i.forEach(((t,e)=>{const n=e/(i.length-1);o.addColorStop(n,t)})),e.fill={fill:o},delete e.fillGradientStops}return e}change(t){const{text:e,component:n}=this.texts[t.gameObject.id],o="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]&&o){const o=n,r=this.containerManager.getContainer(t.gameObject.id),s=r.getChildIndex(e);r.removeChild(e),e.destroy({children:!0});const l=new i.HTMLText({text:o.text,style:o.style,textureStyle:o.textureStyle});r.addChildAt(l,s),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],o=n.getSize();e.size.width=o.width,e.size.height=o.height}};p.systemName="Text",p=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}]})],p);var h=p;return t.BitmapText=d,t.HTMLText=c,t.Text=a,t.TextSystem=h,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;
|
|
@@ -387,10 +387,11 @@ let Text = class Text extends pluginRenderer.Renderer {
|
|
|
387
387
|
});
|
|
388
388
|
}
|
|
389
389
|
/**
|
|
390
|
-
* 将 Eva.js
|
|
390
|
+
* 将 Eva.js 的样式格式转换为 PixiJS v8 格式
|
|
391
391
|
*/
|
|
392
|
-
|
|
392
|
+
processStyle(style) {
|
|
393
393
|
const processed = Object.assign({}, style);
|
|
394
|
+
// stroke + strokeThickness -> stroke: { color, width }
|
|
394
395
|
if (processed.strokeThickness) {
|
|
395
396
|
const color = processed.stroke;
|
|
396
397
|
processed.stroke = {
|
|
@@ -399,6 +400,56 @@ let Text = class Text extends pluginRenderer.Renderer {
|
|
|
399
400
|
};
|
|
400
401
|
delete processed.strokeThickness;
|
|
401
402
|
}
|
|
403
|
+
// dropShadow* -> dropShadow: { color, distance, angle, alpha, blur }
|
|
404
|
+
if (processed.dropShadow) {
|
|
405
|
+
const dropShadowConfig = {};
|
|
406
|
+
if (processed.dropShadowColor != null) {
|
|
407
|
+
dropShadowConfig.color = processed.dropShadowColor;
|
|
408
|
+
}
|
|
409
|
+
if (processed.dropShadowDistance != null) {
|
|
410
|
+
dropShadowConfig.distance = processed.dropShadowDistance;
|
|
411
|
+
}
|
|
412
|
+
if (processed.dropShadowAngle != null) {
|
|
413
|
+
dropShadowConfig.angle = processed.dropShadowAngle;
|
|
414
|
+
}
|
|
415
|
+
if (processed.dropShadowAlpha != null) {
|
|
416
|
+
dropShadowConfig.alpha = processed.dropShadowAlpha;
|
|
417
|
+
}
|
|
418
|
+
if (processed.dropShadowBlur != null) {
|
|
419
|
+
dropShadowConfig.blur = processed.dropShadowBlur;
|
|
420
|
+
}
|
|
421
|
+
processed.dropShadow = dropShadowConfig;
|
|
422
|
+
delete processed.dropShadowColor;
|
|
423
|
+
delete processed.dropShadowDistance;
|
|
424
|
+
delete processed.dropShadowAngle;
|
|
425
|
+
delete processed.dropShadowAlpha;
|
|
426
|
+
delete processed.dropShadowBlur;
|
|
427
|
+
}
|
|
428
|
+
// fill 数组 -> 取第一个值 (deprecated)
|
|
429
|
+
if (Array.isArray(processed.fill)) {
|
|
430
|
+
processed.fill = processed.fill[0];
|
|
431
|
+
}
|
|
432
|
+
// fillGradientStops -> FillGradient 对象
|
|
433
|
+
if (Array.isArray(processed.fillGradientStops)) {
|
|
434
|
+
let fontSize;
|
|
435
|
+
if (processed.fontSize == null) {
|
|
436
|
+
fontSize = pixi_js.TextStyle.defaultTextStyle.fontSize;
|
|
437
|
+
}
|
|
438
|
+
else if (typeof processed.fontSize === 'string') {
|
|
439
|
+
fontSize = parseInt(processed.fontSize, 10);
|
|
440
|
+
}
|
|
441
|
+
else {
|
|
442
|
+
fontSize = processed.fontSize;
|
|
443
|
+
}
|
|
444
|
+
const gradientFill = new pixi_js.FillGradient(0, 0, 0, fontSize * 1.7);
|
|
445
|
+
const fills = processed.fillGradientStops.map((color) => pixi_js.Color.shared.setValue(color).toNumber());
|
|
446
|
+
fills.forEach((number, index) => {
|
|
447
|
+
const ratio = index / (fills.length - 1);
|
|
448
|
+
gradientFill.addColorStop(ratio, number);
|
|
449
|
+
});
|
|
450
|
+
processed.fill = { fill: gradientFill };
|
|
451
|
+
delete processed.fillGradientStops;
|
|
452
|
+
}
|
|
402
453
|
return processed;
|
|
403
454
|
}
|
|
404
455
|
change(changed) {
|
|
@@ -408,7 +459,7 @@ let Text = class Text extends pluginRenderer.Renderer {
|
|
|
408
459
|
text.text = component.text;
|
|
409
460
|
}
|
|
410
461
|
else if (changed.prop.prop[0] === 'style') {
|
|
411
|
-
const processedStyle = this.
|
|
462
|
+
const processedStyle = this.processStyle(component.style);
|
|
412
463
|
Object.assign(text.style, processedStyle);
|
|
413
464
|
}
|
|
414
465
|
else if (changed.prop.prop[0] === 'textureStyle' && isHTMLText) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@eva/eva.js"),e=require("@eva/inspector-decorator"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@eva/eva.js"),e=require("@eva/inspector-decorator"),o=require("pixi.js"),n=require("@eva/plugin-renderer"),i=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 s(t,e,o,n){var i,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,o,n);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(r=(s<3?i(r):s>3?i(e,o,r):i(e,o))||r);return s>3&&r&&Object.defineProperty(e,o,r),r}function r(t,e,o,n){return new(o||(o=Promise))((function(i,s){function r(t){try{l(n.next(t))}catch(t){s(t)}}function a(t){try{l(n.throw(t))}catch(t){s(t)}}function l(t){t.done?i(t.value):new o((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",s([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 o.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",s([e.type("string")],l.prototype,"text",void 0);class d 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)}}d.componentName="HTMLText",s([e.type("string")],d.prototype,"text",void 0);let c=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 o="Text"===e.componentName,n="HTMLText"===e.componentName,i="BitmapText"===e.componentName;if(o||n||i)if(e.type===t.OBSERVER_TYPE.ADD)o?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:o}=this.texts[e.gameObject.id];yield this.waitForFontResource(o,e,t.style.fontFamily)}this.setSize(e)}}))}addTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,o=Object.assign({},e.style),n=o.fontFamily;delete o.fontFamily;const s=n?"":e.text,r=new i.Text(s,o);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,o=Object.assign({},e.style),n=o.fontFamily;delete o.fontFamily;const s=n?"":e.text,r=new i.HTMLText(Object.assign({text:s,style:o},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,o=Object.assign({},e.style),n=o.fontFamily;delete o.fontFamily;const s=n?"":e.text,r=new i.BitmapText(s,o);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,o,n){return r(this,void 0,void 0,(function*(){if(n)try{const i=Array.isArray(n)?n[0]:n,s=this.increaseAsyncId(o.gameObject.id);if(yield t.resource.getResource(i),!this.validateAsyncId(o.gameObject.id,s))return;const r=this.texts[o.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(e.dropShadow){const t={};null!=e.dropShadowColor&&(t.color=e.dropShadowColor),null!=e.dropShadowDistance&&(t.distance=e.dropShadowDistance),null!=e.dropShadowAngle&&(t.angle=e.dropShadowAngle),null!=e.dropShadowAlpha&&(t.alpha=e.dropShadowAlpha),null!=e.dropShadowBlur&&(t.blur=e.dropShadowBlur),e.dropShadow=t,delete e.dropShadowColor,delete e.dropShadowDistance,delete e.dropShadowAngle,delete e.dropShadowAlpha,delete e.dropShadowBlur}if(Array.isArray(e.fill)&&(e.fill=e.fill[0]),Array.isArray(e.fillGradientStops)){let t;t=null==e.fontSize?o.TextStyle.defaultTextStyle.fontSize:"string"==typeof e.fontSize?parseInt(e.fontSize,10):e.fontSize;const n=new o.FillGradient(0,0,0,1.7*t),i=e.fillGradientStops.map((t=>o.Color.shared.setValue(t).toNumber()));i.forEach(((t,e)=>{const o=e/(i.length-1);n.addColorStop(o,t)})),e.fill={fill:n},delete e.fillGradientStops}return e}change(t){const{text:e,component:o}=this.texts[t.gameObject.id],n="HTMLText"===t.componentName;if("text"===t.prop.prop[0])e.text=o.text;else if("style"===t.prop.prop[0]){const t=this.processStyle(o.style);Object.assign(e.style,t)}else if("textureStyle"===t.prop.prop[0]&&n){const n=o,s=this.containerManager.getContainer(t.gameObject.id),r=s.getChildIndex(e);s.removeChild(e),e.destroy({children:!0});const a=new i.HTMLText({text:n.text,style:n.style,textureStyle:n.textureStyle});s.addChildAt(a,r),this.texts[t.gameObject.id].text=a}}setSize(t){const{transform:e}=t.gameObject;if(!e)return;const{text:o}=this.texts[t.gameObject.id],n=o.getSize();e.size.width=n.width,e.size.height=n.height}};c.systemName="Text",c=s([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}]})],c);var p=c;exports.BitmapText=a,exports.HTMLText=d,exports.Text=l,exports.TextSystem=p;
|
|
@@ -297,9 +297,9 @@ export declare class TextSystem extends Renderer {
|
|
|
297
297
|
*/
|
|
298
298
|
private waitForFontResource;
|
|
299
299
|
/**
|
|
300
|
-
* 将 Eva.js
|
|
300
|
+
* 将 Eva.js 的样式格式转换为 PixiJS v8 格式
|
|
301
301
|
*/
|
|
302
|
-
private
|
|
302
|
+
private processStyle;
|
|
303
303
|
change(changed: ComponentChanged): void;
|
|
304
304
|
setSize(changed: ComponentChanged): void;
|
|
305
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
|
|
|
@@ -383,10 +383,11 @@ let Text = class Text extends Renderer {
|
|
|
383
383
|
});
|
|
384
384
|
}
|
|
385
385
|
/**
|
|
386
|
-
* 将 Eva.js
|
|
386
|
+
* 将 Eva.js 的样式格式转换为 PixiJS v8 格式
|
|
387
387
|
*/
|
|
388
|
-
|
|
388
|
+
processStyle(style) {
|
|
389
389
|
const processed = Object.assign({}, style);
|
|
390
|
+
// stroke + strokeThickness -> stroke: { color, width }
|
|
390
391
|
if (processed.strokeThickness) {
|
|
391
392
|
const color = processed.stroke;
|
|
392
393
|
processed.stroke = {
|
|
@@ -395,6 +396,56 @@ let Text = class Text extends Renderer {
|
|
|
395
396
|
};
|
|
396
397
|
delete processed.strokeThickness;
|
|
397
398
|
}
|
|
399
|
+
// dropShadow* -> dropShadow: { color, distance, angle, alpha, blur }
|
|
400
|
+
if (processed.dropShadow) {
|
|
401
|
+
const dropShadowConfig = {};
|
|
402
|
+
if (processed.dropShadowColor != null) {
|
|
403
|
+
dropShadowConfig.color = processed.dropShadowColor;
|
|
404
|
+
}
|
|
405
|
+
if (processed.dropShadowDistance != null) {
|
|
406
|
+
dropShadowConfig.distance = processed.dropShadowDistance;
|
|
407
|
+
}
|
|
408
|
+
if (processed.dropShadowAngle != null) {
|
|
409
|
+
dropShadowConfig.angle = processed.dropShadowAngle;
|
|
410
|
+
}
|
|
411
|
+
if (processed.dropShadowAlpha != null) {
|
|
412
|
+
dropShadowConfig.alpha = processed.dropShadowAlpha;
|
|
413
|
+
}
|
|
414
|
+
if (processed.dropShadowBlur != null) {
|
|
415
|
+
dropShadowConfig.blur = processed.dropShadowBlur;
|
|
416
|
+
}
|
|
417
|
+
processed.dropShadow = dropShadowConfig;
|
|
418
|
+
delete processed.dropShadowColor;
|
|
419
|
+
delete processed.dropShadowDistance;
|
|
420
|
+
delete processed.dropShadowAngle;
|
|
421
|
+
delete processed.dropShadowAlpha;
|
|
422
|
+
delete processed.dropShadowBlur;
|
|
423
|
+
}
|
|
424
|
+
// fill 数组 -> 取第一个值 (deprecated)
|
|
425
|
+
if (Array.isArray(processed.fill)) {
|
|
426
|
+
processed.fill = processed.fill[0];
|
|
427
|
+
}
|
|
428
|
+
// fillGradientStops -> FillGradient 对象
|
|
429
|
+
if (Array.isArray(processed.fillGradientStops)) {
|
|
430
|
+
let fontSize;
|
|
431
|
+
if (processed.fontSize == null) {
|
|
432
|
+
fontSize = TextStyle.defaultTextStyle.fontSize;
|
|
433
|
+
}
|
|
434
|
+
else if (typeof processed.fontSize === 'string') {
|
|
435
|
+
fontSize = parseInt(processed.fontSize, 10);
|
|
436
|
+
}
|
|
437
|
+
else {
|
|
438
|
+
fontSize = processed.fontSize;
|
|
439
|
+
}
|
|
440
|
+
const gradientFill = new FillGradient(0, 0, 0, fontSize * 1.7);
|
|
441
|
+
const fills = processed.fillGradientStops.map((color) => Color.shared.setValue(color).toNumber());
|
|
442
|
+
fills.forEach((number, index) => {
|
|
443
|
+
const ratio = index / (fills.length - 1);
|
|
444
|
+
gradientFill.addColorStop(ratio, number);
|
|
445
|
+
});
|
|
446
|
+
processed.fill = { fill: gradientFill };
|
|
447
|
+
delete processed.fillGradientStops;
|
|
448
|
+
}
|
|
398
449
|
return processed;
|
|
399
450
|
}
|
|
400
451
|
change(changed) {
|
|
@@ -404,7 +455,7 @@ let Text = class Text extends Renderer {
|
|
|
404
455
|
text.text = component.text;
|
|
405
456
|
}
|
|
406
457
|
else if (changed.prop.prop[0] === 'style') {
|
|
407
|
-
const processedStyle = this.
|
|
458
|
+
const processedStyle = this.processStyle(component.style);
|
|
408
459
|
Object.assign(text.style, processedStyle);
|
|
409
460
|
}
|
|
410
461
|
else if (changed.prop.prop[0] === 'textureStyle' && isHTMLText) {
|
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.38",
|
|
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.38",
|
|
23
|
+
"@eva/renderer-adapter": "2.0.1-beta.38",
|
|
24
|
+
"@eva/eva.js": "2.0.1-beta.38",
|
|
25
25
|
"pixi.js": "^8.17.0"
|
|
26
26
|
}
|
|
27
27
|
}
|