@galacean/effects-plugin-rich-text 2.7.0-alpha.2 → 2.7.0

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects player rich text plugin
  * Author: Ant Group CO., Ltd.
  * Contributors: 云垣
- * Version: v2.7.0-alpha.2
+ * Version: v2.7.0
  */
 
 'use strict';
@@ -433,7 +433,7 @@ exports.RichTextComponent = /*#__PURE__*/ function(TextComponent) {
         _this = TextComponent.call(this, engine) || this;
         _this.processedTextOptions = [];
         // 字体高度的倍数（字体高度上下多出来的部分就是行间距）
-        _this.singleLineHeight = 1.0;
+        _this.singleLineHeight = 1.571;
         _this.size = null;
         /**
    * 获取第一次渲染的 size
@@ -481,17 +481,31 @@ exports.RichTextComponent = /*#__PURE__*/ function(TextComponent) {
         program(text);
     };
     _proto.updateTexture = function updateTexture(flipY) {
-        var _this = this;
         if (flipY === void 0) flipY = true;
         if (!this.isDirty || !this.context || !this.canvas) {
             return;
         }
+        // 根据 useLegacyRichText 字段来判断使用哪种渲染模式
+        var useLegacy = this.textLayout.useLegacyRichText === true;
+        this.singleLineHeight = useLegacy ? 1.571 : 1.0;
+        if (useLegacy) {
+            this.updateTextureLegacy(flipY);
+        } else {
+            this.updateTextureModern(flipY);
+        }
+    };
+    _proto.updateTextureLegacy = function updateTextureLegacy(flipY) {
+        var _this = this;
+        if (!this.isDirty || !this.context || !this.canvas) {
+            return;
+        }
         // 解析富文本
         this.generateTextProgram(this.text);
-        var width = 0, height = 0;
         var _this1 = this, textLayout = _this1.textLayout, textStyle = _this1.textStyle;
         var overflow = textLayout.overflow, _textLayout_letterSpace = textLayout.letterSpace, letterSpace = _textLayout_letterSpace === void 0 ? 0 : _textLayout_letterSpace;
         var context = this.context;
+        var width = 0;
+        var height = 0;
         context.save();
         var charsInfo = [];
         var fontHeight = textStyle.fontSize * this.textStyle.fontScale;
@@ -500,15 +514,14 @@ exports.RichTextComponent = /*#__PURE__*/ function(TextComponent) {
             offsetX: [],
             width: 0,
             // 包括字体和上下行间距的高度
-            lineHeight: fontHeight * (this.singleLineHeight + (this.textLayout.lineGap || 0)),
+            lineHeight: fontHeight * this.singleLineHeight,
             // 字体偏移高度（也就是行间距）
-            offsetY: fontHeight * (this.singleLineHeight + (this.textLayout.lineGap || 0) - 1) / 2,
-            chars: []
+            offsetY: fontHeight * (this.singleLineHeight - 1) / 2
         };
         // 遍历解析后的文本选项
         this.processedTextOptions.forEach(function(options) {
             var text = options.text, isNewLine = options.isNewLine, fontSize = options.fontSize;
-            // 如果是新行，则将之前行的信息存入charsInfo并且初始化新行的charInfo
+            // 如果是新行，则将之前行的信息存入 charsInfo 并且初始化新行的 charInfo
             if (isNewLine) {
                 charsInfo.push(charInfo);
                 width = Math.max(width, charInfo.width);
@@ -516,23 +529,181 @@ exports.RichTextComponent = /*#__PURE__*/ function(TextComponent) {
                     richOptions: [],
                     offsetX: [],
                     width: 0,
-                    lineHeight: fontHeight * (_this.singleLineHeight + (_this.textLayout.lineGap || 0)),
-                    offsetY: fontHeight * (_this.singleLineHeight + (_this.textLayout.lineGap || 0) - 1) / 2,
-                    chars: []
+                    lineHeight: fontHeight * _this.singleLineHeight,
+                    offsetY: fontHeight * (_this.singleLineHeight - 1) / 2
                 };
-                // 管理行的总高度调整canvas尺寸
+                // 管理行的总高度调整 canvas 尺寸
                 height += charInfo.lineHeight;
             }
             // 恢复默认设置
             context.font = (options.fontWeight || textStyle.textWeight) + " 10px " + (options.fontFamily || textStyle.fontFamily);
-            var textHeight = fontSize * (_this.singleLineHeight + (_this.textLayout.lineGap || 0)) * _this.textStyle.fontScale;
+            // 计算得到每个字段的宽度 textWidth
+            var textMetrics = context.measureText(text);
+            var textWidth = textMetrics.width;
+            if (textMetrics.actualBoundingBoxLeft !== undefined && textMetrics.actualBoundingBoxRight !== undefined) {
+                var actualWidth = textMetrics.actualBoundingBoxLeft + textMetrics.actualBoundingBoxRight;
+                if (actualWidth > 0) {
+                    textWidth = Math.max(textWidth, actualWidth);
+                }
+            }
+            var textHeight = fontSize * _this.singleLineHeight * _this.textStyle.fontScale;
             if (textHeight > charInfo.lineHeight) {
                 height += textHeight - charInfo.lineHeight;
                 charInfo.lineHeight = textHeight;
-                charInfo.offsetY = fontSize * _this.textStyle.fontScale * (_this.singleLineHeight + (_this.textLayout.lineGap || 0) - 1) / 2;
+                charInfo.offsetY = fontSize * _this.textStyle.fontScale * (_this.singleLineHeight - 1) / 2;
             }
             charInfo.offsetX.push(charInfo.width);
-            //逐字计算宽度以实现字符间距
+            // 计算字段宽度*富文本字体大小*缩放因子*整体文本大小+每个字符的间距（每个字符间距存疑，因为实际测量的宽度已经包含了间距）
+            charInfo.width += (textWidth <= 0 ? 0 : textWidth) * fontSize * _this.SCALE_FACTOR * _this.textStyle.fontScale + text.length * letterSpace;
+            // 将富文本数据存入 charInfo
+            charInfo.richOptions.push(options);
+        });
+        // 存储最后一行的字符信息，并且更新最终的宽度和高度用于确定 canvas 尺寸
+        charsInfo.push(charInfo);
+        width = Math.max(width, charInfo.width);
+        height += charInfo.lineHeight;
+        if (width === 0 || height === 0) {
+            this.isDirty = false;
+            context.restore();
+            return;
+        }
+        if (this.size === undefined || this.size === null) {
+            this.size = this.item.transform.size.clone();
+        }
+        var _this_size = this.size, _this_size_x = _this_size.x, x = _this_size_x === void 0 ? 1 : _this_size_x, _this_size_y = _this_size.y, y = _this_size_y === void 0 ? 1 : _this_size_y;
+        // 首次渲染时初始化 canvas 尺寸和组件变换
+        if (!this.initialized) {
+            this.canvasSize = !this.canvasSize ? new EFFECTS.math.Vector2(width, height) : this.canvasSize;
+            var _this_canvasSize = this.canvasSize, canvasWidth = _this_canvasSize.x, canvasHeight = _this_canvasSize.y;
+            this.item.transform.size.set(x * canvasWidth * this.SCALE_FACTOR * this.SCALE_FACTOR, y * canvasHeight * this.SCALE_FACTOR * this.SCALE_FACTOR);
+            this.size = this.item.transform.size.clone();
+            this.initialized = true;
+        }
+        EFFECTS.assertExist(this.canvasSize);
+        var _this_canvasSize1 = this.canvasSize, canvasWidth1 = _this_canvasSize1.x, canvasHeight1 = _this_canvasSize1.y;
+        this.textLayout.width = canvasWidth1 / textStyle.fontScale;
+        this.textLayout.height = canvasHeight1 / textStyle.fontScale;
+        this.canvas.width = canvasWidth1;
+        this.canvas.height = canvasHeight1;
+        context.clearRect(0, 0, canvasWidth1, canvasHeight1);
+        // fix bug 1/255
+        context.fillStyle = "rgba(255, 255, 255, " + this.ALPHA_FIX_VALUE + ")";
+        if (!flipY) {
+            context.translate(0, canvasHeight1);
+            context.scale(1, -1);
+        }
+        if (charsInfo.length === 0) {
+            context.restore();
+            return;
+        }
+        var charsLineHeight = textLayout.getOffsetY(textStyle, charsInfo.length, fontHeight * this.singleLineHeight, textStyle.fontSize);
+        charsInfo.forEach(function(charInfo, index) {
+            var richOptions = charInfo.richOptions, offsetX = charInfo.offsetX, width = charInfo.width;
+            var charWidth = width;
+            var offset = offsetX;
+            if (overflow === EFFECTS.spec.TextOverflow.display) {
+                if (width > canvasWidth1) {
+                    var canvasScale = canvasWidth1 / width;
+                    charWidth *= canvasScale;
+                    offset = offsetX.map(function(x) {
+                        return x * canvasScale;
+                    });
+                }
+            }
+            var x = _this.textLayout.getOffsetX(textStyle, charWidth);
+            if (index > 0) {
+                charsLineHeight += charInfo.lineHeight - charInfo.offsetY;
+            }
+            richOptions.forEach(function(options, index) {
+                var fontScale = textStyle.fontScale, textColor = textStyle.textColor, textFamily = textStyle.fontFamily, textWeight = textStyle.textWeight, richStyle = textStyle.fontStyle;
+                var text = options.text, fontSize = options.fontSize, _options_fontColor = options.fontColor, fontColor = _options_fontColor === void 0 ? textColor : _options_fontColor, _options_fontFamily = options.fontFamily, fontFamily = _options_fontFamily === void 0 ? textFamily : _options_fontFamily, _options_fontWeight = options.fontWeight, fontWeight = _options_fontWeight === void 0 ? textWeight : _options_fontWeight, _options_fontStyle = options.fontStyle, fontStyle = _options_fontStyle === void 0 ? richStyle : _options_fontStyle;
+                var textSize = fontSize;
+                if (overflow === EFFECTS.spec.TextOverflow.display) {
+                    if (width > canvasWidth1) {
+                        textSize /= width / canvasWidth1;
+                    }
+                }
+                var strOffsetX = offset[index] + x;
+                context.font = fontStyle + " " + fontWeight + " " + textSize * fontScale + "px " + fontFamily;
+                context.fillStyle = "rgba(" + fontColor[0] + ", " + fontColor[1] + ", " + fontColor[2] + ", " + fontColor[3] + ")";
+                context.fillText(text, strOffsetX, charsLineHeight);
+            });
+        });
+        // 与 toDataURL() 两种方式都需要像素读取操作
+        var imageData = context.getImageData(0, 0, this.canvas.width, this.canvas.height);
+        var texture = EFFECTS.Texture.createWithData(this.engine, {
+            data: new Uint8Array(imageData.data),
+            width: imageData.width,
+            height: imageData.height
+        }, {
+            flipY: flipY,
+            magFilter: EFFECTS.glContext.LINEAR,
+            minFilter: EFFECTS.glContext.LINEAR,
+            wrapS: EFFECTS.glContext.CLAMP_TO_EDGE,
+            wrapT: EFFECTS.glContext.CLAMP_TO_EDGE
+        });
+        this.disposeTextTexture();
+        this.renderer.texture = texture;
+        this.material.setTexture("_MainTex", texture);
+        this.isDirty = false;
+        context.restore();
+    };
+    _proto.updateTextureModern = function updateTextureModern(flipY) {
+        var _this = this;
+        var _Math;
+        var _firstLine_richOptions;
+        // 解析富文本
+        this.generateTextProgram(this.text);
+        var _this1 = this, textLayout = _this1.textLayout, textStyle = _this1.textStyle;
+        var overflow = textLayout.overflow, _textLayout_letterSpace = textLayout.letterSpace, letterSpace = _textLayout_letterSpace === void 0 ? 0 : _textLayout_letterSpace;
+        var context = this.context;
+        var width = 0;
+        var height = 0;
+        if (!context) {
+            return;
+        }
+        context.save();
+        var charsInfo = [];
+        var fontHeight = textStyle.fontSize * this.textStyle.fontScale;
+        var charInfo = {
+            richOptions: [],
+            offsetX: [],
+            width: 0,
+            // 包括字体和上下行间距的高度
+            lineHeight: fontHeight * this.singleLineHeight + (this.textLayout.lineGap || 0) * this.textStyle.fontScale,
+            // 字体偏移高度（也就是行间距）
+            offsetY: (this.textLayout.lineGap || 0) * this.textStyle.fontScale / 2,
+            chars: []
+        };
+        // 遍历解析后的文本选项
+        this.processedTextOptions.forEach(function(options) {
+            var text = options.text, isNewLine = options.isNewLine, fontSize = options.fontSize;
+            // 如果是新行，则结束上一行并开始新行
+            if (isNewLine) {
+                // 结束上一行：累加行高并重置charInfo
+                height += charInfo.lineHeight;
+                charsInfo.push(charInfo);
+                width = Math.max(width, charInfo.width);
+                // 初始化新行
+                charInfo = {
+                    richOptions: [],
+                    offsetX: [],
+                    width: 0,
+                    lineHeight: fontHeight * _this.singleLineHeight + (_this.textLayout.lineGap || 0) * _this.textStyle.fontScale,
+                    offsetY: (_this.textLayout.lineGap || 0) * _this.textStyle.fontScale / 2,
+                    chars: []
+                };
+            }
+            // 恢复默认设置
+            context.font = (options.fontWeight || textStyle.textWeight) + " 10px " + (options.fontFamily || textStyle.fontFamily);
+            var textHeight = fontSize * _this.singleLineHeight * _this.textStyle.fontScale + (_this.textLayout.lineGap || 0) * _this.textStyle.fontScale;
+            // 更新当前行的最大行高
+            if (textHeight > charInfo.lineHeight) {
+                charInfo.lineHeight = textHeight;
+                charInfo.offsetY = (_this.textLayout.lineGap || 0) * _this.textStyle.fontScale / 2;
+            }
+            charInfo.offsetX.push(charInfo.width);
+            // 逐字计算宽度以实现字符间距
             var segmentInnerX = 0;
             var charArr = [];
             for(var i = 0; i < text.length; i++){
@@ -546,23 +717,24 @@ exports.RichTextComponent = /*#__PURE__*/ function(TextComponent) {
                 });
                 segmentInnerX += charWidth + letterSpace;
             }
-            charInfo.chars.push(charArr); // 每个片段一个字符数组
+            charInfo.chars.push(charArr);
             charInfo.width += segmentInnerX;
             charInfo.richOptions.push(options);
         });
-        // 存储最后一行的字符信息，并且更新最终的宽度和高度用于确定canvas尺寸
+        // 结束最后一行
+        height += charInfo.lineHeight;
         charsInfo.push(charInfo);
         width = Math.max(width, charInfo.width);
-        height += charInfo.lineHeight;
         if (width === 0 || height === 0) {
             this.isDirty = false;
+            context.restore();
             return;
         }
         if (this.size === undefined || this.size === null) {
             this.size = this.item.transform.size.clone();
         }
         var _this_size = this.size, _this_size_x = _this_size.x, x = _this_size_x === void 0 ? 1 : _this_size_x, _this_size_y = _this_size.y, y = _this_size_y === void 0 ? 1 : _this_size_y;
-        // 首次渲染时初始化canvas尺寸和组件变换
+        // 首次渲染时初始化 canvas 尺寸和组件变换
         if (!this.initialized) {
             this.canvasSize = !this.canvasSize ? new EFFECTS.math.Vector2(width, height) : this.canvasSize;
             var _this_canvasSize = this.canvasSize, canvasWidth = _this_canvasSize.x, canvasHeight = _this_canvasSize.y;
@@ -584,14 +756,29 @@ exports.RichTextComponent = /*#__PURE__*/ function(TextComponent) {
             context.scale(1, -1);
         }
         if (charsInfo.length === 0) {
+            context.restore();
             return;
         }
-        var charsLineHeight = textLayout.getOffsetY(textStyle, charsInfo.length, fontHeight * (this.singleLineHeight + (this.textLayout.lineGap || 0)), textStyle.fontSize);
+        // 行高数组
+        var lineHeights = charsInfo.map(function(l) {
+            return l.lineHeight;
+        });
+        // 计算第一行基线Y坐标
+        var firstLine = charsInfo[0];
+        var _firstLine_richOptions_map;
+        var firstLineMaxFontSize = (_Math = Math).max.apply(_Math, [].concat((_firstLine_richOptions_map = firstLine == null ? void 0 : (_firstLine_richOptions = firstLine.richOptions) == null ? void 0 : _firstLine_richOptions.map(function(opt) {
+            return opt.fontSize;
+        })) != null ? _firstLine_richOptions_map : [
+            this.textStyle.fontSize
+        ]));
+        var fontSizeForOffset = firstLineMaxFontSize * this.textStyle.fontScale * this.singleLineHeight;
+        var baselineY = textLayout.getOffsetYRich(this.textStyle, lineHeights, fontSizeForOffset);
+        // 逐行绘制
         charsInfo.forEach(function(charInfo, index) {
             var richOptions = charInfo.richOptions, offsetX = charInfo.offsetX, width = charInfo.width, chars = charInfo.chars;
+            var charsArr = chars;
             var charWidth = width;
             var offset = offsetX;
-            var charsArr = chars;
             if (overflow === EFFECTS.spec.TextOverflow.display) {
                 if (width > canvasWidth1) {
                     var canvasScale = canvasWidth1 / width;
@@ -608,29 +795,27 @@ exports.RichTextComponent = /*#__PURE__*/ function(TextComponent) {
                 }
             }
             var x = _this.textLayout.getOffsetX(textStyle, charWidth);
-            if (index > 0) {
-                charsLineHeight += charsInfo[index - 1].lineHeight;
-            }
-            richOptions.forEach(function(options, index) {
+            richOptions.forEach(function(options, segIndex) {
                 var fontScale = textStyle.fontScale, textColor = textStyle.textColor, textFamily = textStyle.fontFamily, textWeight = textStyle.textWeight, richStyle = textStyle.fontStyle;
                 var fontSize = options.fontSize, _options_fontColor = options.fontColor, fontColor = _options_fontColor === void 0 ? textColor : _options_fontColor, _options_fontFamily = options.fontFamily, fontFamily = _options_fontFamily === void 0 ? textFamily : _options_fontFamily, _options_fontWeight = options.fontWeight, fontWeight = _options_fontWeight === void 0 ? textWeight : _options_fontWeight, _options_fontStyle = options.fontStyle, fontStyle = _options_fontStyle === void 0 ? richStyle : _options_fontStyle;
                 var textSize = fontSize;
-                if (overflow === EFFECTS.spec.TextOverflow.display) {
-                    if (width > canvasWidth1) {
-                        textSize /= width / canvasWidth1;
-                    }
+                if (overflow === EFFECTS.spec.TextOverflow.display && width > canvasWidth1) {
+                    textSize /= width / canvasWidth1;
                 }
-                var strOffsetX = offset[index] + x;
+                var strOffsetX = offset[segIndex] + x;
                 context.font = fontStyle + " " + fontWeight + " " + textSize * fontScale + "px " + fontFamily;
                 context.fillStyle = "rgba(" + fontColor[0] + ", " + fontColor[1] + ", " + fontColor[2] + ", " + fontColor[3] + ")";
-                // 遍历当前行的 chars 逐字绘制
-                var charArr = charInfo.chars[index]; // 只取当前片段的字符数组
+                // 逐字绘制
+                var charArr = charInfo.chars[segIndex];
                 charArr.forEach(function(charDetail) {
-                    context.fillText(charDetail.char, strOffsetX + charDetail.x, charsLineHeight);
+                    context.fillText(charDetail.char, strOffsetX + charDetail.x, baselineY);
                 });
             });
+            // 推进到下一行
+            if (index < charsInfo.length - 1) {
+                baselineY += lineHeights[index + 1];
+            }
         });
-        // 与 toDataURL() 两种方式都需要像素读取操作
         var imageData = context.getImageData(0, 0, this.canvas.width, this.canvas.height);
         var texture = EFFECTS.Texture.createWithData(this.engine, {
             data: new Uint8Array(imageData.data),
@@ -707,7 +892,7 @@ exports.RichTextComponent = __decorate([
 
 /**
  * 插件版本号
- */ var version = "2.7.0-alpha.2";
+ */ var version = "2.7.0";
 EFFECTS.registerPlugin("rich-text", RichTextLoader, EFFECTS.VFXItem);
 EFFECTS.logger.info("Plugin rich text version: " + version + ".");
 if (version !== EFFECTS__namespace.version) {