@galacean/effects-core 1.6.0-beta.2 → 1.6.1
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/index.js +44 -8
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +44 -8
- package/dist/index.mjs.map +1 -1
- package/dist/plugins/text/text-item.d.ts +5 -0
- package/dist/plugins/text/text-layout.d.ts +9 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Description: Galacean Effects runtime core for the web
|
|
4
4
|
* Author: Ant Group CO., Ltd.
|
|
5
5
|
* Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
|
|
6
|
-
* Version: v1.6.
|
|
6
|
+
* Version: v1.6.1
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
/******************************************************************************
|
|
@@ -20280,13 +20280,21 @@ var TextLayout = /** @class */ (function () {
|
|
|
20280
20280
|
this.textAlign = textAlign;
|
|
20281
20281
|
this.lineHeight = lineHeight;
|
|
20282
20282
|
}
|
|
20283
|
-
|
|
20283
|
+
/**
|
|
20284
|
+
* 获取初始的行高偏移值
|
|
20285
|
+
* @param style - 字体基础数据
|
|
20286
|
+
* @param lineCount - 渲染行数
|
|
20287
|
+
* @param lineHeight - 渲染时的字体行高
|
|
20288
|
+
* @param fontSize - 渲染时的字体大小
|
|
20289
|
+
* @returns - 行高偏移值
|
|
20290
|
+
*/
|
|
20291
|
+
TextLayout.prototype.getOffsetY = function (style, lineCount, lineHeight, fontSize) {
|
|
20284
20292
|
var offsetResult = 0;
|
|
20285
|
-
var
|
|
20286
|
-
// 计算基础偏移量
|
|
20287
|
-
var baseOffset = (fontSize + outlineWidth) * fontScale;
|
|
20293
|
+
var outlineWidth = style.outlineWidth, fontScale = style.fontScale;
|
|
20288
20294
|
// /3 计算Y轴偏移量,以匹配编辑器行为
|
|
20289
20295
|
var offsetY = (lineHeight - fontSize) / 3;
|
|
20296
|
+
// 计算基础偏移量
|
|
20297
|
+
var baseOffset = fontSize + outlineWidth * fontScale;
|
|
20290
20298
|
var commonCalculation = lineHeight * (lineCount - 1);
|
|
20291
20299
|
switch (this.textBaseline) {
|
|
20292
20300
|
case TextBaseline$1.top:
|
|
@@ -20333,6 +20341,10 @@ var TextItem = /** @class */ (function (_super) {
|
|
|
20333
20341
|
function TextItem(props, opts, vfxItem) {
|
|
20334
20342
|
var _this = _super.call(this, props, opts, vfxItem) || this;
|
|
20335
20343
|
_this.isDirty = true;
|
|
20344
|
+
/**
|
|
20345
|
+
* 文本行数
|
|
20346
|
+
*/
|
|
20347
|
+
_this.lineCount = 0;
|
|
20336
20348
|
var options = props.options;
|
|
20337
20349
|
_this.canvas = canvasPool.getCanvas();
|
|
20338
20350
|
canvasPool.saveCanvas(_this.canvas);
|
|
@@ -20341,10 +20353,34 @@ var TextItem = /** @class */ (function (_super) {
|
|
|
20341
20353
|
_this.textStyle = new TextStyle(options);
|
|
20342
20354
|
_this.textLayout = new TextLayout(options);
|
|
20343
20355
|
_this.text = options.text;
|
|
20356
|
+
_this.lineCount = _this.getLineCount(options.text, true);
|
|
20344
20357
|
// Text
|
|
20345
20358
|
_this.mesh = new TextMesh(_this.engine, _this.renderInfo, vfxItem.composition);
|
|
20346
20359
|
return _this;
|
|
20347
20360
|
}
|
|
20361
|
+
TextItem.prototype.getLineCount = function (text, init) {
|
|
20362
|
+
var _a, _b;
|
|
20363
|
+
var context = this.context;
|
|
20364
|
+
var letterSpace = this.textLayout.letterSpace;
|
|
20365
|
+
var fontScale = init ? this.textStyle.fontSize / 10 : 1 / this.textStyle.fontScale;
|
|
20366
|
+
var width = (this.textLayout.width + this.textStyle.fontOffset);
|
|
20367
|
+
var lineCount = 1;
|
|
20368
|
+
var x = 0;
|
|
20369
|
+
for (var i = 0; i < text.length; i++) {
|
|
20370
|
+
var str = text[i];
|
|
20371
|
+
var textMetrics = ((_b = (_a = context === null || context === void 0 ? void 0 : context.measureText(str)) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0) * fontScale;
|
|
20372
|
+
// 和浏览器行为保持一致
|
|
20373
|
+
x += letterSpace;
|
|
20374
|
+
if (((x + textMetrics) > width && i > 0) || str === '\n') {
|
|
20375
|
+
lineCount++;
|
|
20376
|
+
x = 0;
|
|
20377
|
+
}
|
|
20378
|
+
if (str !== '\n') {
|
|
20379
|
+
x += textMetrics;
|
|
20380
|
+
}
|
|
20381
|
+
}
|
|
20382
|
+
return lineCount;
|
|
20383
|
+
};
|
|
20348
20384
|
/**
|
|
20349
20385
|
* 设置字号大小
|
|
20350
20386
|
* @param value - 字号
|
|
@@ -20394,6 +20430,7 @@ var TextItem = /** @class */ (function (_super) {
|
|
|
20394
20430
|
return;
|
|
20395
20431
|
}
|
|
20396
20432
|
this.text = value;
|
|
20433
|
+
this.lineCount = this.getLineCount(value, false);
|
|
20397
20434
|
this.isDirty = true;
|
|
20398
20435
|
};
|
|
20399
20436
|
/**
|
|
@@ -20544,7 +20581,7 @@ var TextItem = /** @class */ (function (_super) {
|
|
|
20544
20581
|
var fontScale = style.fontScale;
|
|
20545
20582
|
var width = (layout.width + style.fontOffset) * fontScale;
|
|
20546
20583
|
var height = layout.height * fontScale;
|
|
20547
|
-
style.fontSize * fontScale;
|
|
20584
|
+
var fontSize = style.fontSize * fontScale;
|
|
20548
20585
|
var lineHeight = layout.lineHeight * fontScale;
|
|
20549
20586
|
this.char = (this.text || '').split('');
|
|
20550
20587
|
this.canvas.width = width;
|
|
@@ -20565,8 +20602,7 @@ var TextItem = /** @class */ (function (_super) {
|
|
|
20565
20602
|
context.fillStyle = "rgba(".concat(style.textColor[0], ", ").concat(style.textColor[1], ", ").concat(style.textColor[2], ", ").concat(style.textColor[3], ")");
|
|
20566
20603
|
var charsInfo = [];
|
|
20567
20604
|
var x = 0;
|
|
20568
|
-
var
|
|
20569
|
-
var y = layout.getOffsetY(style, lineCount, lineHeight);
|
|
20605
|
+
var y = layout.getOffsetY(style, this.lineCount, lineHeight, fontSize);
|
|
20570
20606
|
var charsArray = [];
|
|
20571
20607
|
var charOffsetX = [];
|
|
20572
20608
|
for (var i = 0; i < this.char.length; i++) {
|