@galacean/effects-plugin-rich-text 2.8.8 → 2.8.10
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/alipay.js +1 -1
- package/dist/alipay.js.map +1 -1
- package/dist/alipay.mjs +1 -1
- package/dist/alipay.mjs.map +1 -1
- package/dist/douyin.js +1 -1
- package/dist/douyin.js.map +1 -1
- package/dist/douyin.mjs +1 -1
- package/dist/douyin.mjs.map +1 -1
- package/dist/index.js +331 -468
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +2 -2
- package/dist/index.min.js.map +1 -1
- package/dist/index.mjs +331 -468
- package/dist/index.mjs.map +1 -1
- package/dist/rich-text-component.d.ts +14 -6
- package/dist/rich-text-layout.d.ts +1 -1
- package/dist/strategies/align/rich-horizontal-align.d.ts +3 -3
- package/dist/strategies/align/rich-vertical-align.d.ts +8 -4
- package/dist/strategies/overflow/rich-clipped-overflow.d.ts +4 -5
- package/dist/strategies/overflow/rich-expanding-overflow.d.ts +15 -0
- package/dist/strategies/rich-text-factory.d.ts +5 -3
- package/dist/strategies/rich-text-interfaces.d.ts +22 -34
- package/dist/strategies/wrap/rich-wrap-disabled.d.ts +1 -1
- package/dist/strategies/wrap/rich-wrap-enabled.d.ts +1 -1
- package/dist/weapp.js +1 -1
- package/dist/weapp.js.map +1 -1
- package/dist/weapp.mjs +1 -1
- package/dist/weapp.mjs.map +1 -1
- package/package.json +2 -2
- package/dist/strategies/overflow/rich-display-overflow.d.ts +0 -10
- package/dist/strategies/overflow/rich-visible-overflow.d.ts +0 -10
package/dist/index.mjs
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Description: Galacean Effects player rich text plugin
|
|
4
4
|
* Author: Ant Group CO., Ltd.
|
|
5
5
|
* Contributors: 云垣
|
|
6
|
-
* Version: v2.8.
|
|
6
|
+
* Version: v2.8.10
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
import * as EFFECTS from '@galacean/effects';
|
|
@@ -403,7 +403,7 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
403
403
|
// TODO: width 和 height 新版富文本计算没有地方用到
|
|
404
404
|
this.width = 0;
|
|
405
405
|
this.height = 0;
|
|
406
|
-
var size = options.size, _options_textOverflow = options.textOverflow, textOverflow = _options_textOverflow === void 0 ? spec.TextOverflow.clip : _options_textOverflow, _options_textVerticalAlign = options.textVerticalAlign, textVerticalAlign = _options_textVerticalAlign === void 0 ? spec.TextVerticalAlign.middle : _options_textVerticalAlign, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? spec.TextAlignment.left : _options_textAlign, _options_letterSpace = options.letterSpace, letterSpace = _options_letterSpace === void 0 ? 0 : _options_letterSpace, _options_lineHeight = options.lineHeight, lineHeight = _options_lineHeight === void 0 ? 0.571 : _options_lineHeight, _options_wrapEnabled = options.wrapEnabled, wrapEnabled = _options_wrapEnabled === void 0 ? false : _options_wrapEnabled, _options_maxTextWidth = options.maxTextWidth, maxTextWidth = _options_maxTextWidth === void 0 ? 350 : _options_maxTextWidth, _options_maxTextHeight = options.maxTextHeight, maxTextHeight = _options_maxTextHeight === void 0 ? 1000 : _options_maxTextHeight,
|
|
406
|
+
var size = options.size, _options_textOverflow = options.textOverflow, textOverflow = _options_textOverflow === void 0 ? spec.TextOverflow.clip : _options_textOverflow, _options_textVerticalAlign = options.textVerticalAlign, textVerticalAlign = _options_textVerticalAlign === void 0 ? spec.TextVerticalAlign.middle : _options_textVerticalAlign, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? spec.TextAlignment.left : _options_textAlign, _options_letterSpace = options.letterSpace, letterSpace = _options_letterSpace === void 0 ? 0 : _options_letterSpace, _options_lineHeight = options.lineHeight, lineHeight = _options_lineHeight === void 0 ? 0.571 : _options_lineHeight, _options_wrapEnabled = options.wrapEnabled, wrapEnabled = _options_wrapEnabled === void 0 ? false : _options_wrapEnabled, _options_maxTextWidth = options.maxTextWidth, maxTextWidth = _options_maxTextWidth === void 0 ? 350 : _options_maxTextWidth, _options_maxTextHeight = options.maxTextHeight, maxTextHeight = _options_maxTextHeight === void 0 ? 1000 : _options_maxTextHeight, _options_autoResize = options.autoResize, autoResize = _options_autoResize === void 0 ? spec.TextSizeMode.autoWidth : _options_autoResize, _options_useLegacyRichText = options.// @ts-expect-error 兼容旧版
|
|
407
407
|
useLegacyRichText, useLegacyRichText = _options_useLegacyRichText === void 0 ? false : _options_useLegacyRichText;
|
|
408
408
|
this.letterSpace = letterSpace;
|
|
409
409
|
this.lineHeight = lineHeight;
|
|
@@ -416,7 +416,7 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
416
416
|
this.wrapEnabled = wrapEnabled;
|
|
417
417
|
this.maxTextWidth = maxTextWidth;
|
|
418
418
|
this.maxTextHeight = maxTextHeight;
|
|
419
|
-
this.
|
|
419
|
+
this.autoResize = autoResize;
|
|
420
420
|
}
|
|
421
421
|
var _proto = RichTextLayout.prototype;
|
|
422
422
|
_proto.getOffsetY = function getOffsetY(style, lineCount, lineHeight, fontSize, totalLineHeight) {
|
|
@@ -497,7 +497,7 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
497
497
|
*/ _proto.getOffsetXRich = function getOffsetXRich(style, maxWidth, contentW) {
|
|
498
498
|
switch(this.textAlign){
|
|
499
499
|
case spec.TextAlignment.left:
|
|
500
|
-
return style.outlineWidth
|
|
500
|
+
return style.outlineWidth;
|
|
501
501
|
case spec.TextAlignment.middle:
|
|
502
502
|
return (maxWidth - contentW) / 2;
|
|
503
503
|
case spec.TextAlignment.right:
|
|
@@ -596,11 +596,11 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
596
596
|
*/ var RichWrapDisabledStrategy = /*#__PURE__*/ function() {
|
|
597
597
|
function RichWrapDisabledStrategy() {}
|
|
598
598
|
var _proto = RichWrapDisabledStrategy.prototype;
|
|
599
|
-
_proto.computeLines = function computeLines(processedOptions, context, style, layout,
|
|
599
|
+
_proto.computeLines = function computeLines(processedOptions, context, style, layout, letterSpace) {
|
|
600
600
|
var _this = this;
|
|
601
601
|
var lines = [];
|
|
602
602
|
var baselines = [];
|
|
603
|
-
var gapPx =
|
|
603
|
+
var gapPx = layout.lineHeight || 0;
|
|
604
604
|
var scaleFactor = 1 / 10; // 1/10px, 后面 context.font 设置的字号为10px
|
|
605
605
|
var currentLine = this.createNewLine();
|
|
606
606
|
var maxLineWidth = 0;
|
|
@@ -609,8 +609,8 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
609
609
|
if (currentLine.chars.length === 0) {
|
|
610
610
|
return;
|
|
611
611
|
}
|
|
612
|
-
//
|
|
613
|
-
currentLine.lineHeight =
|
|
612
|
+
// 所有行都使用配置的行高(gapPx)
|
|
613
|
+
currentLine.lineHeight = gapPx;
|
|
614
614
|
// 记录本行基线
|
|
615
615
|
var baseline = lines.length === 0 ? 0 : baselines[baselines.length - 1] + gapPx;
|
|
616
616
|
baselines.push(baseline);
|
|
@@ -630,22 +630,20 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
630
630
|
context.font = fontStyle + " " + (options.fontWeight || style.textWeight) + " 10px " + (options.fontFamily || style.fontFamily);
|
|
631
631
|
// 记录段起始 x
|
|
632
632
|
currentLine.offsetX.push(currentLine.width);
|
|
633
|
-
//
|
|
633
|
+
// 预计算缩放因子:measureText 基于 10px,乘 fontSize/10 得到逻辑像素
|
|
634
|
+
var glyphScale = fontSize * scaleFactor;
|
|
635
|
+
// 使用字体级别度量(不随具体字符变化),保证基线位置稳定
|
|
636
|
+
var refMetrics = context.measureText("x");
|
|
637
|
+
var fontAsc = refMetrics.fontBoundingBoxAscent * glyphScale;
|
|
638
|
+
var fontDesc = refMetrics.fontBoundingBoxDescent * glyphScale;
|
|
639
|
+
// 逐字宽度测量
|
|
634
640
|
var segmentInnerX = 0;
|
|
635
641
|
var charArr = [];
|
|
636
|
-
var lineAscent = 0;
|
|
637
|
-
var lineDescent = 0;
|
|
638
642
|
for(var i = 0; i < text.length; i++){
|
|
639
643
|
var ch = text[i];
|
|
640
644
|
var m = context.measureText(ch);
|
|
641
645
|
var w = m.width;
|
|
642
|
-
var charWidth = (w <= 0 ? 0 : w) *
|
|
643
|
-
// 测量 asc/desc 并按目标字号缩放
|
|
644
|
-
var scale = fontSize * fontScale * scaleFactor;
|
|
645
|
-
var asc = m.actualBoundingBoxAscent * scale;
|
|
646
|
-
var desc = m.actualBoundingBoxDescent * scale;
|
|
647
|
-
lineAscent = Math.max(lineAscent, asc);
|
|
648
|
-
lineDescent = Math.max(lineDescent, desc);
|
|
646
|
+
var charWidth = (w <= 0 ? 0 : w) * glyphScale;
|
|
649
647
|
if (i > 0) {
|
|
650
648
|
segmentInnerX += letterSpace; // 先加"前一个字符与当前字符之间"的间距
|
|
651
649
|
}
|
|
@@ -658,13 +656,13 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
658
656
|
currentLine.chars.push(charArr);
|
|
659
657
|
currentLine.width += segmentInnerX;
|
|
660
658
|
currentLine.richOptions.push(options);
|
|
661
|
-
// 累计行级 asc/desc
|
|
662
|
-
currentLine.lineAscent = Math.max(currentLine.lineAscent || 0,
|
|
663
|
-
currentLine.lineDescent = Math.max(currentLine.lineDescent || 0,
|
|
659
|
+
// 累计行级 asc/desc(字体级别,不因字符形状改变)
|
|
660
|
+
currentLine.lineAscent = Math.max(currentLine.lineAscent || 0, fontAsc);
|
|
661
|
+
currentLine.lineDescent = Math.max(currentLine.lineDescent || 0, fontDesc);
|
|
664
662
|
});
|
|
665
663
|
// 结束最后一行
|
|
666
664
|
finishCurrentLine();
|
|
667
|
-
// 计算 bbox
|
|
665
|
+
// 计算 bbox(包含行高带来的上下边距)
|
|
668
666
|
var bboxTop = Infinity;
|
|
669
667
|
var bboxBottom = -Infinity;
|
|
670
668
|
if (lines.length === 0) {
|
|
@@ -678,8 +676,12 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
678
676
|
};
|
|
679
677
|
}
|
|
680
678
|
for(var i = 0; i < lines.length; i++){
|
|
681
|
-
|
|
682
|
-
|
|
679
|
+
var asc = lines[i].lineAscent || 0;
|
|
680
|
+
var desc = lines[i].lineDescent || 0;
|
|
681
|
+
var textHeight = asc + desc;
|
|
682
|
+
var margin = (gapPx - textHeight) / 2;
|
|
683
|
+
bboxTop = Math.min(bboxTop, baselines[i] - asc - margin);
|
|
684
|
+
bboxBottom = Math.max(bboxBottom, baselines[i] + desc + margin);
|
|
683
685
|
}
|
|
684
686
|
var bboxHeight = bboxBottom - bboxTop;
|
|
685
687
|
return {
|
|
@@ -714,12 +716,14 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
714
716
|
*/ var RichWrapEnabledStrategy = /*#__PURE__*/ function() {
|
|
715
717
|
function RichWrapEnabledStrategy() {}
|
|
716
718
|
var _proto = RichWrapEnabledStrategy.prototype;
|
|
717
|
-
_proto.computeLines = function computeLines(processedOptions, context, style, layout,
|
|
719
|
+
_proto.computeLines = function computeLines(processedOptions, context, style, layout, letterSpace) {
|
|
718
720
|
var _this = this;
|
|
719
721
|
var lines = [];
|
|
720
722
|
var baselines = [];
|
|
721
|
-
var gapPx =
|
|
723
|
+
var gapPx = layout.lineHeight || 0;
|
|
722
724
|
var scaleFactor = 1 / 10; // 1/10px, 后面 context.font 设置的字号为10px
|
|
725
|
+
// 换行阈值,预计算避免每字符重复读取
|
|
726
|
+
var wrapWidth = layout.maxTextWidth || Infinity;
|
|
723
727
|
var currentLine = this.createNewLine();
|
|
724
728
|
var maxLineWidth = 0;
|
|
725
729
|
var totalHeight = 0;
|
|
@@ -734,8 +738,8 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
734
738
|
if (currentLine.chars.length === 0) {
|
|
735
739
|
return;
|
|
736
740
|
}
|
|
737
|
-
//
|
|
738
|
-
currentLine.lineHeight =
|
|
741
|
+
// 所有行都使用配置的行高(gapPx)
|
|
742
|
+
currentLine.lineHeight = gapPx;
|
|
739
743
|
// 记录本行基线
|
|
740
744
|
var baseline = lines.length === 0 ? 0 : baselines[baselines.length - 1] + gapPx;
|
|
741
745
|
baselines.push(baseline);
|
|
@@ -777,22 +781,24 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
777
781
|
flushChunk();
|
|
778
782
|
finishCurrentLine();
|
|
779
783
|
}
|
|
784
|
+
// 预计算缩放因子:measureText 基于 10px,乘 fontSize/10 得到逻辑像素
|
|
785
|
+
var glyphScale = fontSize * scaleFactor;
|
|
786
|
+
// 使用字体级别度量(不随具体字符变化),保证基线位置稳定
|
|
787
|
+
var refMetrics = context.measureText("x");
|
|
788
|
+
var fontAsc = refMetrics.fontBoundingBoxAscent * glyphScale;
|
|
789
|
+
var fontDesc = refMetrics.fontBoundingBoxDescent * glyphScale;
|
|
780
790
|
// 逐字符处理
|
|
781
791
|
for(var i = 0; i < text.length; i++){
|
|
782
792
|
var ch = text[i];
|
|
783
793
|
// 获取基础宽度并计算实际宽度(动态缩放)
|
|
784
794
|
var m = context.measureText(ch);
|
|
785
795
|
var baseW = m.width;
|
|
786
|
-
var charWidth = (baseW <= 0 ? 0 : baseW) *
|
|
787
|
-
// 测量 asc/desc 并按目标字号缩放
|
|
788
|
-
var scale = fontSize * fontScale * scaleFactor;
|
|
789
|
-
var asc = m.actualBoundingBoxAscent * scale;
|
|
790
|
-
var desc = m.actualBoundingBoxDescent * scale;
|
|
796
|
+
var charWidth = (baseW <= 0 ? 0 : baseW) * glyphScale;
|
|
791
797
|
// 计算预期宽度(包含字符间距)
|
|
792
798
|
var spacing = chunkChars.length > 0 ? letterSpace : 0;
|
|
793
799
|
var willWidth = currentLine.width + spacing + charWidth;
|
|
794
800
|
// 自动换行判断
|
|
795
|
-
if (willWidth >
|
|
801
|
+
if (willWidth > wrapWidth) {
|
|
796
802
|
flushChunk();
|
|
797
803
|
finishCurrentLine();
|
|
798
804
|
}
|
|
@@ -811,9 +817,9 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
811
817
|
char: ch,
|
|
812
818
|
x: segmentInnerX
|
|
813
819
|
});
|
|
814
|
-
// 累计行级 asc/desc
|
|
815
|
-
currentLine.lineAscent = Math.max(currentLine.lineAscent || 0,
|
|
816
|
-
currentLine.lineDescent = Math.max(currentLine.lineDescent || 0,
|
|
820
|
+
// 累计行级 asc/desc(字体级别,不因字符形状改变)
|
|
821
|
+
currentLine.lineAscent = Math.max(currentLine.lineAscent || 0, fontAsc);
|
|
822
|
+
currentLine.lineDescent = Math.max(currentLine.lineDescent || 0, fontDesc);
|
|
817
823
|
// 更新位置和宽度
|
|
818
824
|
segmentInnerX += charWidth;
|
|
819
825
|
currentLine.width += charWidth;
|
|
@@ -823,12 +829,26 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
823
829
|
});
|
|
824
830
|
// 结束最后一行
|
|
825
831
|
finishCurrentLine();
|
|
826
|
-
// 计算 bbox
|
|
832
|
+
// 计算 bbox(包含行高带来的上下边距)
|
|
827
833
|
var bboxTop = Infinity;
|
|
828
834
|
var bboxBottom = -Infinity;
|
|
835
|
+
if (lines.length === 0) {
|
|
836
|
+
return {
|
|
837
|
+
lines: lines,
|
|
838
|
+
maxLineWidth: maxLineWidth,
|
|
839
|
+
totalHeight: totalHeight,
|
|
840
|
+
bboxTop: 0,
|
|
841
|
+
bboxBottom: 0,
|
|
842
|
+
bboxHeight: 0
|
|
843
|
+
};
|
|
844
|
+
}
|
|
829
845
|
for(var i = 0; i < lines.length; i++){
|
|
830
|
-
|
|
831
|
-
|
|
846
|
+
var asc = lines[i].lineAscent || 0;
|
|
847
|
+
var desc = lines[i].lineDescent || 0;
|
|
848
|
+
var textHeight = asc + desc;
|
|
849
|
+
var margin = (gapPx - textHeight) / 2;
|
|
850
|
+
bboxTop = Math.min(bboxTop, baselines[i] - asc - margin);
|
|
851
|
+
bboxBottom = Math.max(bboxBottom, baselines[i] + desc + margin);
|
|
832
852
|
}
|
|
833
853
|
var bboxHeight = bboxBottom - bboxTop;
|
|
834
854
|
return {
|
|
@@ -857,117 +877,117 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
857
877
|
return RichWrapEnabledStrategy;
|
|
858
878
|
}();
|
|
859
879
|
|
|
860
|
-
/**
|
|
861
|
-
* 富文本 Display 溢出策略
|
|
862
|
-
* 在溢出策略中对所有几何量进行一次性缩放
|
|
863
|
-
*/ var RichDisplayOverflowStrategy = /*#__PURE__*/ function() {
|
|
864
|
-
function RichDisplayOverflowStrategy() {}
|
|
865
|
-
var _proto = RichDisplayOverflowStrategy.prototype;
|
|
866
|
-
_proto.apply = function apply(lines, sizeResult, layout, style) {
|
|
867
|
-
// 安全处理除零情况
|
|
868
|
-
var safeDiv = function(a, b) {
|
|
869
|
-
return Math.abs(b) > 1e-5 ? a / b : 1;
|
|
870
|
-
};
|
|
871
|
-
// 用像素空间计算
|
|
872
|
-
var frameWpx = layout.maxTextWidth * style.fontScale;
|
|
873
|
-
var frameHpx = layout.maxTextHeight * style.fontScale;
|
|
874
|
-
var _sizeResult_contentWidth;
|
|
875
|
-
var contentWpx = Math.max(1, (_sizeResult_contentWidth = sizeResult.contentWidth) != null ? _sizeResult_contentWidth : sizeResult.canvasWidth);
|
|
876
|
-
var _sizeResult_bboxHeight;
|
|
877
|
-
var contentHpx = Math.max(1, (_sizeResult_bboxHeight = sizeResult.bboxHeight) != null ? _sizeResult_bboxHeight : sizeResult.canvasHeight);
|
|
878
|
-
// 只缩小不放大(基于像素空间计算)
|
|
879
|
-
var s = Math.min(1, safeDiv(frameWpx, contentWpx), safeDiv(frameHpx, contentHpx));
|
|
880
|
-
// 浮点精度处理
|
|
881
|
-
if (s > 0.9999) {
|
|
882
|
-
return {
|
|
883
|
-
globalScale: 1
|
|
884
|
-
};
|
|
885
|
-
}
|
|
886
|
-
// 统一缩放所有几何量
|
|
887
|
-
for(var _iterator = _create_for_of_iterator_helper_loose(lines), _step; !(_step = _iterator()).done;){
|
|
888
|
-
var line = _step.value;
|
|
889
|
-
line.width *= s;
|
|
890
|
-
line.lineHeight *= s; // 缩小行距(你的 gap-only 模式行高=gapPx)
|
|
891
|
-
if (line.offsetX) {
|
|
892
|
-
for(var i = 0; i < line.offsetX.length; i++){
|
|
893
|
-
line.offsetX[i] *= s;
|
|
894
|
-
}
|
|
895
|
-
}
|
|
896
|
-
for(var _iterator1 = _create_for_of_iterator_helper_loose(line.chars || []), _step1; !(_step1 = _iterator1()).done;){
|
|
897
|
-
var seg = _step1.value;
|
|
898
|
-
for(var _iterator2 = _create_for_of_iterator_helper_loose(seg), _step2; !(_step2 = _iterator2()).done;){
|
|
899
|
-
var ch = _step2.value;
|
|
900
|
-
ch.x *= s;
|
|
901
|
-
}
|
|
902
|
-
}
|
|
903
|
-
for(var _iterator3 = _create_for_of_iterator_helper_loose(line.richOptions || []), _step3; !(_step3 = _iterator3()).done;){
|
|
904
|
-
var opt = _step3.value;
|
|
905
|
-
opt.fontSize *= s; // 缩小字形
|
|
906
|
-
}
|
|
907
|
-
// 同步缩放 asc/desc
|
|
908
|
-
if (line.lineAscent != null) {
|
|
909
|
-
line.lineAscent *= s;
|
|
910
|
-
}
|
|
911
|
-
if (line.lineDescent != null) {
|
|
912
|
-
line.lineDescent *= s;
|
|
913
|
-
}
|
|
914
|
-
}
|
|
915
|
-
return {
|
|
916
|
-
globalScale: s
|
|
917
|
-
};
|
|
918
|
-
};
|
|
919
|
-
return RichDisplayOverflowStrategy;
|
|
920
|
-
}();
|
|
921
|
-
|
|
922
880
|
/**
|
|
923
881
|
* Clip 溢出策略
|
|
924
|
-
*
|
|
882
|
+
* 画布尺寸固定为帧尺寸,超出部分自然裁切
|
|
883
|
+
* 不依赖对齐模式
|
|
925
884
|
*/ var RichClippedOverflowStrategy = /*#__PURE__*/ function() {
|
|
926
885
|
function RichClippedOverflowStrategy() {}
|
|
927
886
|
var _proto = RichClippedOverflowStrategy.prototype;
|
|
928
|
-
_proto.
|
|
929
|
-
// 不进行任何缩放,直接返回单位缩放系数
|
|
887
|
+
_proto.resolveCanvas = function resolveCanvas(lines, frameWidth, frameHeight, horizontalResult, verticalResult) {
|
|
930
888
|
return {
|
|
931
|
-
|
|
889
|
+
canvasWidth: Math.max(1, Math.ceil(frameWidth)),
|
|
890
|
+
canvasHeight: Math.max(1, Math.ceil(frameHeight)),
|
|
891
|
+
renderOffsetX: 0,
|
|
892
|
+
renderOffsetY: 0
|
|
932
893
|
};
|
|
933
894
|
};
|
|
934
895
|
return RichClippedOverflowStrategy;
|
|
935
896
|
}();
|
|
936
897
|
|
|
937
898
|
/**
|
|
938
|
-
*
|
|
939
|
-
*
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
899
|
+
* 扩展画布溢出策略(visible / display 模式共用)
|
|
900
|
+
*
|
|
901
|
+
* 根据对齐后的内容位置检测溢出,对称扩展画布以容纳所有内容。
|
|
902
|
+
* 不依赖对齐模式(textAlign / textVerticalAlign)的枚举值,
|
|
903
|
+
* 仅使用对齐策略输出的位置和行的度量数据。
|
|
904
|
+
*
|
|
905
|
+
* 对称扩展的原因:元素定位以中心点为锚点,
|
|
906
|
+
* 单侧扩展会导致视觉偏移。使用 max(溢出左, 溢出右) 作为双侧扩展量
|
|
907
|
+
* 可以保持中心点稳定并兼容所有对齐模式。
|
|
908
|
+
*/ var RichExpandingOverflowStrategy = /*#__PURE__*/ function() {
|
|
909
|
+
function RichExpandingOverflowStrategy() {}
|
|
910
|
+
var _proto = RichExpandingOverflowStrategy.prototype;
|
|
911
|
+
_proto.resolveCanvas = function resolveCanvas(lines, frameWidth, frameHeight, horizontalResult, verticalResult) {
|
|
912
|
+
if (lines.length === 0) {
|
|
913
|
+
return {
|
|
914
|
+
canvasWidth: Math.max(1, frameWidth),
|
|
915
|
+
canvasHeight: Math.max(1, frameHeight),
|
|
916
|
+
renderOffsetX: 0,
|
|
917
|
+
renderOffsetY: 0
|
|
918
|
+
};
|
|
919
|
+
}
|
|
920
|
+
// ── 垂直溢出检测 ──
|
|
921
|
+
// 遍历每行基线,结合 ascent/descent 找出实际渲染范围
|
|
922
|
+
var contentTop = Infinity;
|
|
923
|
+
var contentBottom = -Infinity;
|
|
924
|
+
var currentY = verticalResult.baselineY;
|
|
925
|
+
for(var i = 0; i < lines.length; i++){
|
|
926
|
+
var _lines_i_lineAscent;
|
|
927
|
+
var asc = (_lines_i_lineAscent = lines[i].lineAscent) != null ? _lines_i_lineAscent : 0;
|
|
928
|
+
var _lines_i_lineDescent;
|
|
929
|
+
var desc = (_lines_i_lineDescent = lines[i].lineDescent) != null ? _lines_i_lineDescent : 0;
|
|
930
|
+
// 当 lineHeight >= textHeight 时,margin 为正,需要把行高边距纳入内容范围;
|
|
931
|
+
// 当 lineHeight < textHeight 时,margin 为负,此时字形超出行高框,
|
|
932
|
+
// 必须用原始字形边界(margin=0),否则负 margin 会把边界向内收缩,
|
|
933
|
+
// 导致检测不到溢出,最终首行顶部/末行底部被裁切。
|
|
934
|
+
var textHeight = asc + desc;
|
|
935
|
+
var margin = Math.max(0, (lines[i].lineHeight - textHeight) / 2);
|
|
936
|
+
contentTop = Math.min(contentTop, currentY - asc - margin);
|
|
937
|
+
contentBottom = Math.max(contentBottom, currentY + desc + margin);
|
|
938
|
+
if (i < lines.length - 1) {
|
|
939
|
+
currentY += lines[i + 1].lineHeight;
|
|
940
|
+
}
|
|
941
|
+
}
|
|
942
|
+
var overflowTop = Math.max(0, -contentTop);
|
|
943
|
+
var overflowBottom = Math.max(0, contentBottom - frameHeight);
|
|
944
|
+
// 对称扩展(保持中心点稳定)
|
|
945
|
+
var expandV = Math.max(overflowTop, overflowBottom);
|
|
946
|
+
// ── 水平溢出检测 ──
|
|
947
|
+
var contentLeft = Infinity;
|
|
948
|
+
var contentRight = -Infinity;
|
|
949
|
+
for(var i1 = 0; i1 < lines.length; i1++){
|
|
950
|
+
var _horizontalResult_lineOffsets_i;
|
|
951
|
+
var xOff = (_horizontalResult_lineOffsets_i = horizontalResult.lineOffsets[i1]) != null ? _horizontalResult_lineOffsets_i : 0;
|
|
952
|
+
var _lines_i_width;
|
|
953
|
+
var w = (_lines_i_width = lines[i1].width) != null ? _lines_i_width : 0;
|
|
954
|
+
contentLeft = Math.min(contentLeft, xOff);
|
|
955
|
+
contentRight = Math.max(contentRight, xOff + w);
|
|
956
|
+
}
|
|
957
|
+
if (!isFinite(contentLeft)) {
|
|
958
|
+
contentLeft = 0;
|
|
959
|
+
}
|
|
960
|
+
if (!isFinite(contentRight)) {
|
|
961
|
+
contentRight = 0;
|
|
962
|
+
}
|
|
963
|
+
var overflowLeft = Math.max(0, -contentLeft);
|
|
964
|
+
var overflowRight = Math.max(0, contentRight - frameWidth);
|
|
965
|
+
// 对称扩展
|
|
966
|
+
var expandH = Math.max(overflowLeft, overflowRight);
|
|
967
|
+
// ── 最终画布尺寸 ──
|
|
968
|
+
var canvasWidth = Math.ceil(frameWidth + expandH * 2);
|
|
969
|
+
var canvasHeight = Math.ceil(frameHeight + expandV * 2);
|
|
945
970
|
return {
|
|
946
|
-
|
|
971
|
+
canvasWidth: Math.max(1, canvasWidth),
|
|
972
|
+
canvasHeight: Math.max(1, canvasHeight),
|
|
973
|
+
renderOffsetX: expandH,
|
|
974
|
+
renderOffsetY: expandV
|
|
947
975
|
};
|
|
948
976
|
};
|
|
949
|
-
return
|
|
977
|
+
return RichExpandingOverflowStrategy;
|
|
950
978
|
}();
|
|
951
979
|
|
|
952
980
|
/**
|
|
953
981
|
* 富文本水平对齐策略
|
|
954
|
-
*
|
|
982
|
+
* 在帧坐标系中计算每行的水平偏移,不依赖溢出模式
|
|
955
983
|
*/ var RichHorizontalAlignStrategyImpl = /*#__PURE__*/ function() {
|
|
956
984
|
function RichHorizontalAlignStrategyImpl() {}
|
|
957
985
|
var _proto = RichHorizontalAlignStrategyImpl.prototype;
|
|
958
|
-
_proto.getHorizontalOffsets = function getHorizontalOffsets(lines,
|
|
959
|
-
|
|
960
|
-
var
|
|
961
|
-
|
|
962
|
-
var compX = (_sizeResult_baselineCompensationX = sizeResult.baselineCompensationX) != null ? _sizeResult_baselineCompensationX : 0;
|
|
963
|
-
// 使用像素单位的容器宽度
|
|
964
|
-
var baseOffsets = lines.map(function(line) {
|
|
965
|
-
return layout.getOffsetXRich(style, containerWidthPx, line.width);
|
|
986
|
+
_proto.getHorizontalOffsets = function getHorizontalOffsets(lines, frameWidth, layout, style) {
|
|
987
|
+
// 在帧坐标系 [0, frameWidth] 中计算对齐偏移
|
|
988
|
+
var lineOffsets = lines.map(function(line) {
|
|
989
|
+
return layout.getOffsetXRich(style, frameWidth, line.width);
|
|
966
990
|
});
|
|
967
|
-
// visible 模式下使用 baseOffset + baselineCompensationX
|
|
968
|
-
var lineOffsets = layout.overflow === spec.TextOverflow.visible ? baseOffsets.map(function(x) {
|
|
969
|
-
return x + compX;
|
|
970
|
-
}) : baseOffsets;
|
|
971
991
|
return {
|
|
972
992
|
lineOffsets: lineOffsets
|
|
973
993
|
};
|
|
@@ -977,147 +997,63 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
977
997
|
|
|
978
998
|
/**
|
|
979
999
|
* 富文本垂直对齐策略
|
|
980
|
-
*
|
|
1000
|
+
* 在帧坐标系中计算基线位置,不依赖溢出模式
|
|
1001
|
+
*
|
|
1002
|
+
* 算法:
|
|
1003
|
+
* 1. 从行数据重建各行基线(baseline[0]=0, baseline[i]=baseline[i-1]+lineHeight[i])
|
|
1004
|
+
* 2. 计算 bbox(包含行高边距)
|
|
1005
|
+
* 3. 根据 textVerticalAlign 将内容定位到帧中
|
|
981
1006
|
*/ var RichVerticalAlignStrategyImpl = /*#__PURE__*/ function() {
|
|
982
1007
|
function RichVerticalAlignStrategyImpl() {}
|
|
983
1008
|
var _proto = RichVerticalAlignStrategyImpl.prototype;
|
|
984
|
-
_proto.getVerticalOffsets = function getVerticalOffsets(lines,
|
|
985
|
-
var _sizeResult_baselineCompensationY;
|
|
986
|
-
var compY = (_sizeResult_baselineCompensationY = sizeResult.baselineCompensationY) != null ? _sizeResult_baselineCompensationY : 0;
|
|
987
|
-
var baselineY = 0;
|
|
1009
|
+
_proto.getVerticalOffsets = function getVerticalOffsets(lines, frameHeight, layout) {
|
|
988
1010
|
if (lines.length === 0) {
|
|
989
1011
|
return {
|
|
990
1012
|
baselineY: 0,
|
|
991
1013
|
lineYOffsets: []
|
|
992
1014
|
};
|
|
993
1015
|
}
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
var bboxTop = (_sizeResult_bboxTop = sizeResult.bboxTop) != null ? _sizeResult_bboxTop : 0;
|
|
1001
|
-
var _sizeResult_bboxHeight, _sizeResult_bboxBottom;
|
|
1002
|
-
var bboxBottom = (_sizeResult_bboxBottom = sizeResult.bboxBottom) != null ? _sizeResult_bboxBottom : bboxTop + ((_sizeResult_bboxHeight = sizeResult.bboxHeight) != null ? _sizeResult_bboxHeight : 0);
|
|
1003
|
-
var _sizeResult_bboxHeight1;
|
|
1004
|
-
var bboxHeight = (_sizeResult_bboxHeight1 = sizeResult.bboxHeight) != null ? _sizeResult_bboxHeight1 : bboxBottom - bboxTop;
|
|
1005
|
-
// 计算 frame 基线
|
|
1006
|
-
var baselineYFrame = 0;
|
|
1007
|
-
switch(layout.textVerticalAlign){
|
|
1008
|
-
case spec.TextVerticalAlign.top:
|
|
1009
|
-
baselineYFrame = -bboxTop;
|
|
1010
|
-
break;
|
|
1011
|
-
case spec.TextVerticalAlign.middle:
|
|
1012
|
-
baselineYFrame = (frameHpx - bboxHeight) / 2 - bboxTop;
|
|
1013
|
-
break;
|
|
1014
|
-
case spec.TextVerticalAlign.bottom:
|
|
1015
|
-
baselineYFrame = frameHpx - bboxHeight - bboxTop;
|
|
1016
|
-
break;
|
|
1017
|
-
}
|
|
1018
|
-
baselineY = baselineYFrame + compY; // 关键:叠加"向下移动 E"
|
|
1019
|
-
break;
|
|
1020
|
-
}
|
|
1021
|
-
case spec.TextOverflow.clip:
|
|
1022
|
-
{
|
|
1023
|
-
// 让 clip 垂直对齐逻辑与 display 保持一致(基于 bbox 的几何模型)
|
|
1024
|
-
var frameHpx1 = layout.maxTextHeight * style.fontScale;
|
|
1025
|
-
// 用缩放后的行数据重建 baselines 和 bbox
|
|
1026
|
-
var baselines = [
|
|
1027
|
-
0
|
|
1028
|
-
];
|
|
1029
|
-
for(var i = 1; i < lines.length; i++){
|
|
1030
|
-
baselines[i] = baselines[i - 1] + lines[i].lineHeight;
|
|
1031
|
-
}
|
|
1032
|
-
var bboxTop1 = Infinity;
|
|
1033
|
-
var bboxBottom1 = -Infinity;
|
|
1034
|
-
for(var i1 = 0; i1 < lines.length; i1++){
|
|
1035
|
-
var _lines_i_lineAscent;
|
|
1036
|
-
var asc = (_lines_i_lineAscent = lines[i1].lineAscent) != null ? _lines_i_lineAscent : 0;
|
|
1037
|
-
var _lines_i_lineDescent;
|
|
1038
|
-
var desc = (_lines_i_lineDescent = lines[i1].lineDescent) != null ? _lines_i_lineDescent : 0;
|
|
1039
|
-
bboxTop1 = Math.min(bboxTop1, baselines[i1] - asc);
|
|
1040
|
-
bboxBottom1 = Math.max(bboxBottom1, baselines[i1] + desc);
|
|
1041
|
-
}
|
|
1042
|
-
var bboxHeight1 = bboxBottom1 - bboxTop1;
|
|
1043
|
-
var baselineClipY = 0;
|
|
1044
|
-
switch(layout.textVerticalAlign){
|
|
1045
|
-
case spec.TextVerticalAlign.top:
|
|
1046
|
-
baselineClipY = -bboxTop1;
|
|
1047
|
-
break;
|
|
1048
|
-
case spec.TextVerticalAlign.middle:
|
|
1049
|
-
baselineClipY = (frameHpx1 - bboxHeight1) / 2 - bboxTop1;
|
|
1050
|
-
break;
|
|
1051
|
-
case spec.TextVerticalAlign.bottom:
|
|
1052
|
-
baselineClipY = frameHpx1 - bboxHeight1 - bboxTop1;
|
|
1053
|
-
break;
|
|
1054
|
-
}
|
|
1055
|
-
baselineY = baselineClipY + compY;
|
|
1056
|
-
break;
|
|
1057
|
-
}
|
|
1058
|
-
case spec.TextOverflow.display:
|
|
1059
|
-
{
|
|
1060
|
-
// display 垂直对齐改为基于 bbox,而不是 getOffsetYRich
|
|
1061
|
-
var frameHpx2 = layout.maxTextHeight * style.fontScale;
|
|
1062
|
-
// 用缩放后的行数据重建 baselines 和 bbox
|
|
1063
|
-
var baselines1 = [
|
|
1064
|
-
0
|
|
1065
|
-
];
|
|
1066
|
-
for(var i2 = 1; i2 < lines.length; i2++){
|
|
1067
|
-
baselines1[i2] = baselines1[i2 - 1] + lines[i2].lineHeight;
|
|
1068
|
-
}
|
|
1069
|
-
// 计算 bboxTop / bboxBottom(使用行的测量值 lineAscent/lineDescent)
|
|
1070
|
-
var bboxTop2 = Infinity;
|
|
1071
|
-
var bboxBottom2 = -Infinity;
|
|
1072
|
-
for(var i3 = 0; i3 < lines.length; i3++){
|
|
1073
|
-
var _lines_i_lineAscent1;
|
|
1074
|
-
var asc1 = (_lines_i_lineAscent1 = lines[i3].lineAscent) != null ? _lines_i_lineAscent1 : 0;
|
|
1075
|
-
var _lines_i_lineDescent1;
|
|
1076
|
-
var desc1 = (_lines_i_lineDescent1 = lines[i3].lineDescent) != null ? _lines_i_lineDescent1 : 0;
|
|
1077
|
-
bboxTop2 = Math.min(bboxTop2, baselines1[i3] - asc1);
|
|
1078
|
-
bboxBottom2 = Math.max(bboxBottom2, baselines1[i3] + desc1);
|
|
1079
|
-
}
|
|
1080
|
-
var bboxHeight2 = bboxBottom2 - bboxTop2;
|
|
1081
|
-
// 计算 display 模式的基线
|
|
1082
|
-
var baselineDisplayY = 0;
|
|
1083
|
-
switch(layout.textVerticalAlign){
|
|
1084
|
-
case spec.TextVerticalAlign.top:
|
|
1085
|
-
baselineDisplayY = -bboxTop2;
|
|
1086
|
-
break;
|
|
1087
|
-
case spec.TextVerticalAlign.middle:
|
|
1088
|
-
baselineDisplayY = (frameHpx2 - bboxHeight2) / 2 - bboxTop2;
|
|
1089
|
-
break;
|
|
1090
|
-
case spec.TextVerticalAlign.bottom:
|
|
1091
|
-
baselineDisplayY = frameHpx2 - bboxHeight2 - bboxTop2;
|
|
1092
|
-
break;
|
|
1093
|
-
}
|
|
1094
|
-
// 后续 lineYOffsets 保持按行高累计
|
|
1095
|
-
var lineYOffsets = [];
|
|
1096
|
-
var currentY = baselineDisplayY;
|
|
1097
|
-
for(var i4 = 0; i4 < lines.length; i4++){
|
|
1098
|
-
lineYOffsets.push(currentY);
|
|
1099
|
-
if (i4 < lines.length - 1) {
|
|
1100
|
-
currentY += lines[i4 + 1].lineHeight;
|
|
1101
|
-
}
|
|
1102
|
-
}
|
|
1103
|
-
return {
|
|
1104
|
-
baselineY: baselineDisplayY,
|
|
1105
|
-
lineYOffsets: lineYOffsets
|
|
1106
|
-
};
|
|
1107
|
-
}
|
|
1016
|
+
// 1. 重建各行基线(相对于第一行基线=0)
|
|
1017
|
+
var baselines = [
|
|
1018
|
+
0
|
|
1019
|
+
];
|
|
1020
|
+
for(var i = 1; i < lines.length; i++){
|
|
1021
|
+
baselines[i] = baselines[i - 1] + lines[i].lineHeight;
|
|
1108
1022
|
}
|
|
1109
|
-
//
|
|
1110
|
-
var
|
|
1111
|
-
var
|
|
1112
|
-
lines.
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1023
|
+
// 2. 计算内容 bbox(含行高边距)
|
|
1024
|
+
var bboxTop = Infinity;
|
|
1025
|
+
var bboxBottom = -Infinity;
|
|
1026
|
+
for(var i1 = 0; i1 < lines.length; i1++){
|
|
1027
|
+
var _lines_i_lineAscent;
|
|
1028
|
+
var asc = (_lines_i_lineAscent = lines[i1].lineAscent) != null ? _lines_i_lineAscent : 0;
|
|
1029
|
+
var _lines_i_lineDescent;
|
|
1030
|
+
var desc = (_lines_i_lineDescent = lines[i1].lineDescent) != null ? _lines_i_lineDescent : 0;
|
|
1031
|
+
var textHeight = asc + desc;
|
|
1032
|
+
var margin = (lines[i1].lineHeight - textHeight) / 2;
|
|
1033
|
+
bboxTop = Math.min(bboxTop, baselines[i1] - asc - margin);
|
|
1034
|
+
bboxBottom = Math.max(bboxBottom, baselines[i1] + desc + margin);
|
|
1035
|
+
}
|
|
1036
|
+
var bboxHeight = bboxBottom - bboxTop;
|
|
1037
|
+
// 3. 在帧坐标系 [0, frameHeight] 中定位第一行基线
|
|
1038
|
+
var baselineY = 0;
|
|
1039
|
+
switch(layout.textVerticalAlign){
|
|
1040
|
+
case spec.TextVerticalAlign.top:
|
|
1041
|
+
baselineY = -bboxTop;
|
|
1042
|
+
break;
|
|
1043
|
+
case spec.TextVerticalAlign.middle:
|
|
1044
|
+
baselineY = (frameHeight - bboxHeight) / 2 - bboxTop;
|
|
1045
|
+
break;
|
|
1046
|
+
case spec.TextVerticalAlign.bottom:
|
|
1047
|
+
baselineY = frameHeight - bboxHeight - bboxTop;
|
|
1048
|
+
break;
|
|
1049
|
+
}
|
|
1050
|
+
// 4. 各行 Y 坐标
|
|
1051
|
+
var lineYOffsets = baselines.map(function(b) {
|
|
1052
|
+
return baselineY + b;
|
|
1117
1053
|
});
|
|
1118
1054
|
return {
|
|
1119
1055
|
baselineY: baselineY,
|
|
1120
|
-
lineYOffsets:
|
|
1056
|
+
lineYOffsets: lineYOffsets
|
|
1121
1057
|
};
|
|
1122
1058
|
};
|
|
1123
1059
|
return RichVerticalAlignStrategyImpl;
|
|
@@ -1126,11 +1062,12 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
1126
1062
|
/**
|
|
1127
1063
|
* 富文本策略工厂
|
|
1128
1064
|
* 负责创建各种策略实例
|
|
1065
|
+
*
|
|
1066
|
+
* 管线顺序:Wrap → scaleLinesToFit(display)→ Align → Overflow.resolveCanvas
|
|
1129
1067
|
*/ var RichTextStrategyFactory = /*#__PURE__*/ function() {
|
|
1130
1068
|
function RichTextStrategyFactory() {}
|
|
1131
1069
|
/**
|
|
1132
1070
|
* 创建换行策略
|
|
1133
|
-
* 根据wrapEnabled参数决定使用哪种策略
|
|
1134
1071
|
*/ RichTextStrategyFactory.createWrapStrategy = function createWrapStrategy(wrapEnabled) {
|
|
1135
1072
|
if (wrapEnabled) {
|
|
1136
1073
|
return new RichWrapEnabledStrategy();
|
|
@@ -1139,17 +1076,17 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
1139
1076
|
}
|
|
1140
1077
|
};
|
|
1141
1078
|
/**
|
|
1142
|
-
*
|
|
1143
|
-
*
|
|
1079
|
+
* 创建溢出策略(画布解析)
|
|
1080
|
+
* clip:画布=帧,超出裁切
|
|
1081
|
+
* display/visible:检测溢出并对称扩展画布
|
|
1144
1082
|
*/ RichTextStrategyFactory.createOverflowStrategy = function createOverflowStrategy(mode) {
|
|
1145
1083
|
switch(mode){
|
|
1146
1084
|
case spec.TextOverflow.clip:
|
|
1147
1085
|
return new RichClippedOverflowStrategy();
|
|
1148
1086
|
case spec.TextOverflow.display:
|
|
1149
|
-
return new RichDisplayOverflowStrategy();
|
|
1150
1087
|
case spec.TextOverflow.visible:
|
|
1151
1088
|
default:
|
|
1152
|
-
return new
|
|
1089
|
+
return new RichExpandingOverflowStrategy();
|
|
1153
1090
|
}
|
|
1154
1091
|
};
|
|
1155
1092
|
/**
|
|
@@ -1165,6 +1102,66 @@ var RichTextLayout = /*#__PURE__*/ function() {
|
|
|
1165
1102
|
return RichTextStrategyFactory;
|
|
1166
1103
|
}();
|
|
1167
1104
|
|
|
1105
|
+
function _extends() {
|
|
1106
|
+
_extends = Object.assign || function assign(target) {
|
|
1107
|
+
for(var i = 1; i < arguments.length; i++){
|
|
1108
|
+
var source = arguments[i];
|
|
1109
|
+
for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
|
|
1110
|
+
}
|
|
1111
|
+
return target;
|
|
1112
|
+
};
|
|
1113
|
+
return _extends.apply(this, arguments);
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1116
|
+
/**
|
|
1117
|
+
* 将行数据等比缩小以适配帧尺寸(display 模式使用)
|
|
1118
|
+
* 只缩小不放大,就地修改行数据
|
|
1119
|
+
*/ function scaleLinesToFit(lines, contentWidth, contentHeight, frameWidth, frameHeight) {
|
|
1120
|
+
var safeDiv = function(a, b) {
|
|
1121
|
+
return Math.abs(b) > 1e-5 ? a / b : 1;
|
|
1122
|
+
};
|
|
1123
|
+
var safeContentW = Math.max(1, contentWidth);
|
|
1124
|
+
var safeContentH = Math.max(1, contentHeight);
|
|
1125
|
+
// 只缩小不放大
|
|
1126
|
+
var s = Math.min(1, safeDiv(frameWidth, safeContentW), safeDiv(frameHeight, safeContentH));
|
|
1127
|
+
// 浮点精度处理
|
|
1128
|
+
if (s > 0.9999) {
|
|
1129
|
+
return;
|
|
1130
|
+
}
|
|
1131
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(lines), _step; !(_step = _iterator()).done;){
|
|
1132
|
+
var line = _step.value;
|
|
1133
|
+
line.width *= s;
|
|
1134
|
+
line.lineHeight *= s;
|
|
1135
|
+
if (line.offsetX) {
|
|
1136
|
+
for(var i = 0; i < line.offsetX.length; i++){
|
|
1137
|
+
line.offsetX[i] *= s;
|
|
1138
|
+
}
|
|
1139
|
+
}
|
|
1140
|
+
for(var _iterator1 = _create_for_of_iterator_helper_loose(line.chars || []), _step1; !(_step1 = _iterator1()).done;){
|
|
1141
|
+
var seg = _step1.value;
|
|
1142
|
+
for(var _iterator2 = _create_for_of_iterator_helper_loose(seg), _step2; !(_step2 = _iterator2()).done;){
|
|
1143
|
+
var ch = _step2.value;
|
|
1144
|
+
ch.x *= s;
|
|
1145
|
+
}
|
|
1146
|
+
}
|
|
1147
|
+
// 创建新的 richOptions 数组,避免修改原始对象
|
|
1148
|
+
var originalOptions = line.richOptions || [];
|
|
1149
|
+
var newOptions = [];
|
|
1150
|
+
for(var i1 = 0; i1 < originalOptions.length; i1++){
|
|
1151
|
+
newOptions.push(_extends({}, originalOptions[i1], {
|
|
1152
|
+
fontSize: originalOptions[i1].fontSize * s
|
|
1153
|
+
}));
|
|
1154
|
+
}
|
|
1155
|
+
line.richOptions = newOptions;
|
|
1156
|
+
if (line.lineAscent != null) {
|
|
1157
|
+
line.lineAscent *= s;
|
|
1158
|
+
}
|
|
1159
|
+
if (line.lineDescent != null) {
|
|
1160
|
+
line.lineDescent *= s;
|
|
1161
|
+
}
|
|
1162
|
+
}
|
|
1163
|
+
}
|
|
1164
|
+
|
|
1168
1165
|
var seed = 0;
|
|
1169
1166
|
var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
|
|
1170
1167
|
_inherits(RichTextComponent, MaskableGraphic);
|
|
@@ -1174,10 +1171,10 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
|
|
|
1174
1171
|
_this.isDirty = true;
|
|
1175
1172
|
_this.text = "";
|
|
1176
1173
|
_this.processedTextOptions = [];
|
|
1177
|
-
_this.singleLineHeight = 1.571;
|
|
1178
|
-
_this.size = null;
|
|
1179
|
-
_this.initialized = false;
|
|
1180
|
-
_this.canvasSize = null;
|
|
1174
|
+
/** @deprecated Use for legacy mode*/ _this.singleLineHeight = 1.571;
|
|
1175
|
+
/** @deprecated Use for legacy mode*/ _this.size = null;
|
|
1176
|
+
/** @deprecated Use for legacy mode*/ _this.initialized = false;
|
|
1177
|
+
/** @deprecated Use for legacy mode*/ _this.canvasSize = null;
|
|
1181
1178
|
_this.SCALE_FACTOR = 0.11092565;
|
|
1182
1179
|
_this.ALPHA_FIX_VALUE = 1 / 255;
|
|
1183
1180
|
_this.name = "MRichText" + seed++;
|
|
@@ -1214,7 +1211,7 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
|
|
|
1214
1211
|
this.material.setColor("_Color", new math.Color(1, 1, 1, 1));
|
|
1215
1212
|
};
|
|
1216
1213
|
/**
|
|
1217
|
-
*
|
|
1214
|
+
* 根据布局配置更新策略实例
|
|
1218
1215
|
*/ _proto.updateStrategies = function updateStrategies() {
|
|
1219
1216
|
var layout = this.textLayout;
|
|
1220
1217
|
if (layout) {
|
|
@@ -1414,11 +1411,20 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
|
|
|
1414
1411
|
};
|
|
1415
1412
|
/**
|
|
1416
1413
|
* 使用策略管线路径的渲染方法
|
|
1414
|
+
*
|
|
1415
|
+
* 管线顺序:
|
|
1416
|
+
* 1. Wrap → 换行与度量
|
|
1417
|
+
* 2. SizeMode → 根据 autoResize 回写帧尺寸
|
|
1418
|
+
* 3. ContentScale → 内容缩放(仅 display 模式)
|
|
1419
|
+
* 4. Alignment → 在帧坐标系中对齐(不依赖 overflow)
|
|
1420
|
+
* 5. Overflow → 画布解析:确定最终画布尺寸与渲染偏移(不依赖对齐模式)
|
|
1421
|
+
* 6. Render → 绘制
|
|
1417
1422
|
*/ _proto.updateTextureWithStrategies = function updateTextureWithStrategies(flipY) {
|
|
1418
1423
|
var _this = this;
|
|
1419
1424
|
if (!this.isDirty || !this.context || !this.canvas) {
|
|
1420
1425
|
return;
|
|
1421
1426
|
}
|
|
1427
|
+
this.updateStrategies();
|
|
1422
1428
|
// 解析富文本
|
|
1423
1429
|
this.generateTextProgram(this.text);
|
|
1424
1430
|
var layout = this.textLayout;
|
|
@@ -1427,227 +1433,84 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
|
|
|
1427
1433
|
if (!context) {
|
|
1428
1434
|
return;
|
|
1429
1435
|
}
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
if (
|
|
1433
|
-
|
|
1434
|
-
return;
|
|
1436
|
+
var fontScale = this.textStyle.fontScale;
|
|
1437
|
+
// autoWidth 模式下先去掉宽度约束,避免内容被提前换行
|
|
1438
|
+
if (layout.autoResize === spec.TextSizeMode.autoWidth) {
|
|
1439
|
+
layout.maxTextWidth = Number.MAX_SAFE_INTEGER;
|
|
1435
1440
|
}
|
|
1436
|
-
// 步骤
|
|
1437
|
-
var
|
|
1438
|
-
//
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
var
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1441
|
+
// ── 步骤 1: 换行策略(逻辑坐标系,fontScale 不参与排版)──
|
|
1442
|
+
var wrapResult = this.richWrapStrategy.computeLines(this.processedTextOptions, context, this.textStyle, layout, letterSpace);
|
|
1443
|
+
// ── 步骤 2: SizeMode → 帧尺寸(逻辑单位)──
|
|
1444
|
+
// fontScale 不参与排版,全部在逻辑坐标系中完成。
|
|
1445
|
+
var frameW;
|
|
1446
|
+
var frameH;
|
|
1447
|
+
switch(layout.autoResize){
|
|
1448
|
+
case spec.TextSizeMode.autoWidth:
|
|
1449
|
+
frameW = Math.max(1, wrapResult.maxLineWidth || 0);
|
|
1450
|
+
frameH = Math.max(1, wrapResult.totalHeight || 0);
|
|
1451
|
+
break;
|
|
1452
|
+
case spec.TextSizeMode.autoHeight:
|
|
1453
|
+
frameW = layout.maxTextWidth;
|
|
1454
|
+
frameH = Math.max(1, wrapResult.totalHeight || 0);
|
|
1455
|
+
break;
|
|
1456
|
+
case spec.TextSizeMode.fixed:
|
|
1457
|
+
default:
|
|
1458
|
+
frameW = layout.maxTextWidth;
|
|
1459
|
+
frameH = layout.maxTextHeight;
|
|
1460
|
+
break;
|
|
1461
|
+
}
|
|
1462
|
+
// ── 步骤 3: 内容缩放(display 模式缩小以适配帧,其他模式跳过)──
|
|
1463
|
+
if (layout.overflow === spec.TextOverflow.display) {
|
|
1464
|
+
var contentW = Math.max(1, wrapResult.maxLineWidth || 0);
|
|
1465
|
+
var contentH = Math.max(1, wrapResult.totalHeight || 0);
|
|
1466
|
+
scaleLinesToFit(wrapResult.lines, contentW, contentH, frameW, frameH);
|
|
1467
|
+
}
|
|
1468
|
+
// ── 步骤 4: 对齐(在帧坐标系中,不依赖 overflow 模式)──
|
|
1469
|
+
var horizontalAlignResult = this.richHorizontalAlignStrategy.getHorizontalOffsets(wrapResult.lines, frameW, layout, this.textStyle);
|
|
1470
|
+
var verticalAlignResult = this.richVerticalAlignStrategy.getVerticalOffsets(wrapResult.lines, frameH, layout);
|
|
1471
|
+
// ── 步骤 5: 溢出 / 画布解析(不依赖对齐模式枚举)──
|
|
1472
|
+
var overflowResult = this.richOverflowStrategy.resolveCanvas(wrapResult.lines, frameW, frameH, horizontalAlignResult, verticalAlignResult);
|
|
1473
|
+
// 排版结果(逻辑单位)→ 物理像素画布
|
|
1474
|
+
var physicalW = Math.max(1, Math.ceil(overflowResult.canvasWidth * fontScale));
|
|
1475
|
+
var physicalH = Math.max(1, Math.ceil(overflowResult.canvasHeight * fontScale));
|
|
1476
|
+
// 渲染尺寸不随 fontScale 改变
|
|
1477
|
+
this.item.transform.size.set(overflowResult.canvasWidth * this.SCALE_FACTOR * this.SCALE_FACTOR, overflowResult.canvasHeight * this.SCALE_FACTOR * this.SCALE_FACTOR);
|
|
1478
|
+
// 统一回写布局属性(逻辑单位)
|
|
1479
|
+
layout.maxTextWidth = frameW;
|
|
1480
|
+
layout.maxTextHeight = frameH;
|
|
1481
|
+
layout.width = overflowResult.canvasWidth;
|
|
1482
|
+
layout.height = overflowResult.canvasHeight;
|
|
1483
|
+
this.renderToTexture(physicalW, physicalH, flipY, function(context) {
|
|
1484
|
+
// fontScale 仅作为渲染分辨率倍率,排版坐标全部为逻辑单位
|
|
1485
|
+
context.scale(fontScale, fontScale);
|
|
1486
|
+
// ── 步骤 6: 绘制 ──
|
|
1487
|
+
_this.drawTextWithStrategies(context, wrapResult.lines, horizontalAlignResult, verticalAlignResult, overflowResult, _this.textStyle);
|
|
1457
1488
|
}, {
|
|
1458
1489
|
disposeOld: false
|
|
1459
1490
|
});
|
|
1460
1491
|
this.isDirty = false;
|
|
1461
1492
|
};
|
|
1462
|
-
_proto.setCanvasSize = function setCanvasSize(sizeResult) {
|
|
1463
|
-
var _this = this;
|
|
1464
|
-
if (this.size === undefined || this.size === null) {
|
|
1465
|
-
this.size = this.item.transform.size.clone();
|
|
1466
|
-
}
|
|
1467
|
-
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;
|
|
1468
|
-
var layout = this.textLayout;
|
|
1469
|
-
var fontScale = this.textStyle.fontScale || 1;
|
|
1470
|
-
// 防止 frameW / frameH 为 0
|
|
1471
|
-
var frameW = Math.max(1, layout.maxTextWidth || 0);
|
|
1472
|
-
var frameH = Math.max(1, layout.maxTextHeight || 0);
|
|
1473
|
-
switch(layout.overflow){
|
|
1474
|
-
case spec.TextOverflow.visible:
|
|
1475
|
-
{
|
|
1476
|
-
var frameWpx = frameW * fontScale;
|
|
1477
|
-
var frameHpx = frameH * fontScale;
|
|
1478
|
-
var _sizeResult_bboxTop;
|
|
1479
|
-
var bboxTop = (_sizeResult_bboxTop = sizeResult.bboxTop) != null ? _sizeResult_bboxTop : 0;
|
|
1480
|
-
var _sizeResult_bboxHeight, _sizeResult_bboxBottom;
|
|
1481
|
-
var bboxBottom = (_sizeResult_bboxBottom = sizeResult.bboxBottom) != null ? _sizeResult_bboxBottom : bboxTop + ((_sizeResult_bboxHeight = sizeResult.bboxHeight) != null ? _sizeResult_bboxHeight : 0);
|
|
1482
|
-
var _sizeResult_bboxHeight1;
|
|
1483
|
-
var bboxHeight = (_sizeResult_bboxHeight1 = sizeResult.bboxHeight) != null ? _sizeResult_bboxHeight1 : bboxBottom - bboxTop;
|
|
1484
|
-
// 计算 frame 基线
|
|
1485
|
-
var baselineYFrame = 0;
|
|
1486
|
-
switch(layout.textVerticalAlign){
|
|
1487
|
-
case spec.TextVerticalAlign.top:
|
|
1488
|
-
baselineYFrame = -bboxTop;
|
|
1489
|
-
break;
|
|
1490
|
-
case spec.TextVerticalAlign.middle:
|
|
1491
|
-
baselineYFrame = (frameHpx - bboxHeight) / 2 - bboxTop;
|
|
1492
|
-
break;
|
|
1493
|
-
case spec.TextVerticalAlign.bottom:
|
|
1494
|
-
baselineYFrame = frameHpx - bboxHeight - bboxTop;
|
|
1495
|
-
break;
|
|
1496
|
-
}
|
|
1497
|
-
// 上下溢出检测
|
|
1498
|
-
var contentTopInFrame = baselineYFrame + bboxTop;
|
|
1499
|
-
var contentBottomInFrame = baselineYFrame + bboxBottom;
|
|
1500
|
-
var overflowTop = Math.max(0, -contentTopInFrame);
|
|
1501
|
-
var overflowBottom = Math.max(0, contentBottomInFrame - frameHpx);
|
|
1502
|
-
// 垂直扩张
|
|
1503
|
-
var expandTop = overflowTop;
|
|
1504
|
-
var expandBottom = overflowBottom;
|
|
1505
|
-
switch(layout.textVerticalAlign){
|
|
1506
|
-
case spec.TextVerticalAlign.top:
|
|
1507
|
-
{
|
|
1508
|
-
var E = overflowBottom;
|
|
1509
|
-
expandTop = E;
|
|
1510
|
-
expandBottom = E;
|
|
1511
|
-
break;
|
|
1512
|
-
}
|
|
1513
|
-
case spec.TextVerticalAlign.bottom:
|
|
1514
|
-
{
|
|
1515
|
-
var E1 = overflowTop;
|
|
1516
|
-
expandTop = E1;
|
|
1517
|
-
expandBottom = E1;
|
|
1518
|
-
break;
|
|
1519
|
-
}
|
|
1520
|
-
case spec.TextVerticalAlign.middle:
|
|
1521
|
-
{
|
|
1522
|
-
// 保持非对称:上扩 overflowTop,下扩 overflowBottom
|
|
1523
|
-
expandTop = overflowTop;
|
|
1524
|
-
expandBottom = overflowBottom;
|
|
1525
|
-
break;
|
|
1526
|
-
}
|
|
1527
|
-
}
|
|
1528
|
-
// 位移补偿:始终使用 expandTop
|
|
1529
|
-
var compY = expandTop;
|
|
1530
|
-
// 水平扩张
|
|
1531
|
-
var lines = sizeResult.lines || [];
|
|
1532
|
-
// 1. 先按 frameWpx 计算每行的对齐起点(逻辑对齐)
|
|
1533
|
-
var xOffsetsFrame = lines.map(function(line) {
|
|
1534
|
-
return layout.getOffsetXRich(_this.textStyle, frameWpx, line.width);
|
|
1535
|
-
});
|
|
1536
|
-
// 2. 用对齐后的偏移 + 行宽算出内容的左右边界
|
|
1537
|
-
var contentMinX = Infinity;
|
|
1538
|
-
var contentMaxX = -Infinity;
|
|
1539
|
-
for(var i = 0; i < lines.length; i++){
|
|
1540
|
-
var _xOffsetsFrame_i;
|
|
1541
|
-
var off = (_xOffsetsFrame_i = xOffsetsFrame[i]) != null ? _xOffsetsFrame_i : 0;
|
|
1542
|
-
var _lines_i_width;
|
|
1543
|
-
var w = (_lines_i_width = lines[i].width) != null ? _lines_i_width : 0; // 像素宽
|
|
1544
|
-
contentMinX = Math.min(contentMinX, off);
|
|
1545
|
-
contentMaxX = Math.max(contentMaxX, off + w);
|
|
1546
|
-
}
|
|
1547
|
-
if (!isFinite(contentMinX)) {
|
|
1548
|
-
contentMinX = 0;
|
|
1549
|
-
}
|
|
1550
|
-
if (!isFinite(contentMaxX)) {
|
|
1551
|
-
contentMaxX = 0;
|
|
1552
|
-
}
|
|
1553
|
-
// 3. 计算内容相对于 frame 的越界量
|
|
1554
|
-
var overflowLeft = Math.max(0, -contentMinX); // 内容左边 < 0
|
|
1555
|
-
var overflowRight = Math.max(0, contentMaxX - frameWpx); // 内容右边 > frameWpx?
|
|
1556
|
-
// 4. 让 canvas 左右都扩张到能容下整个内容 bbox
|
|
1557
|
-
var expandLeft = overflowLeft;
|
|
1558
|
-
var expandRight = overflowRight;
|
|
1559
|
-
// 5. 最终 canvas 宽高
|
|
1560
|
-
var finalWpx = Math.ceil(frameWpx + expandLeft + expandRight);
|
|
1561
|
-
var finalHpx = Math.ceil(frameHpx + expandTop + expandBottom);
|
|
1562
|
-
// 记录补偿,供垂直对齐策略叠加
|
|
1563
|
-
sizeResult.baselineCompensationX = expandLeft;
|
|
1564
|
-
sizeResult.baselineCompensationY = compY;
|
|
1565
|
-
// containerWidth 用 frameWpx,而不是 finalWpx
|
|
1566
|
-
sizeResult.containerWidth = frameWpx;
|
|
1567
|
-
sizeResult.canvasWidth = finalWpx;
|
|
1568
|
-
sizeResult.canvasHeight = finalHpx;
|
|
1569
|
-
this.canvasSize = new math.Vector2(finalWpx, finalHpx);
|
|
1570
|
-
var _this_size1;
|
|
1571
|
-
var _ref = (_this_size1 = this.size) != null ? _this_size1 : this.item.transform.size, _ref_x = _ref.x, x1 = _ref_x === void 0 ? 1 : _ref_x, _ref_y = _ref.y, y1 = _ref_y === void 0 ? 1 : _ref_y;
|
|
1572
|
-
// 实际元素渲染尺寸不随着 fontScale 改变
|
|
1573
|
-
this.item.transform.size.set(x1 * finalWpx / fontScale * this.SCALE_FACTOR * this.SCALE_FACTOR, y1 * finalHpx / fontScale * this.SCALE_FACTOR * this.SCALE_FACTOR);
|
|
1574
|
-
this.initialized = true;
|
|
1575
|
-
break;
|
|
1576
|
-
}
|
|
1577
|
-
case spec.TextOverflow.clip:
|
|
1578
|
-
{
|
|
1579
|
-
var frameWpx1 = frameW * fontScale;
|
|
1580
|
-
var frameHpx1 = frameH * fontScale;
|
|
1581
|
-
// 直接使用 frame 尺寸作为画布尺寸
|
|
1582
|
-
sizeResult.canvasWidth = frameWpx1;
|
|
1583
|
-
sizeResult.canvasHeight = frameHpx1;
|
|
1584
|
-
// clip 模式不需要任何补偿
|
|
1585
|
-
sizeResult.baselineCompensationX = 0;
|
|
1586
|
-
sizeResult.baselineCompensationY = 0;
|
|
1587
|
-
// 设置 canvas 和节点变换
|
|
1588
|
-
this.canvasSize = new math.Vector2(frameWpx1, frameHpx1);
|
|
1589
|
-
// 把 layout 的尺寸更新为 frame 尺寸
|
|
1590
|
-
layout.width = frameW;
|
|
1591
|
-
layout.height = frameH;
|
|
1592
|
-
var _this_size2;
|
|
1593
|
-
var _ref1 = (_this_size2 = this.size) != null ? _this_size2 : this.item.transform.size, _ref_x1 = _ref1.x, x2 = _ref_x1 === void 0 ? 1 : _ref_x1, _ref_y1 = _ref1.y, y2 = _ref_y1 === void 0 ? 1 : _ref_y1;
|
|
1594
|
-
this.item.transform.size.set(x2 * frameWpx1 / fontScale * this.SCALE_FACTOR * this.SCALE_FACTOR, y2 * frameHpx1 / fontScale * this.SCALE_FACTOR * this.SCALE_FACTOR);
|
|
1595
|
-
this.initialized = true;
|
|
1596
|
-
break;
|
|
1597
|
-
}
|
|
1598
|
-
case spec.TextOverflow.display:
|
|
1599
|
-
{
|
|
1600
|
-
if (!this.initialized) {
|
|
1601
|
-
var frameWpx2 = frameW * fontScale;
|
|
1602
|
-
var frameHpx2 = frameH * fontScale;
|
|
1603
|
-
this.canvasSize = new math.Vector2(frameWpx2, frameHpx2);
|
|
1604
|
-
this.item.transform.size.set(x * frameWpx2 / fontScale * this.SCALE_FACTOR * this.SCALE_FACTOR, y * frameHpx2 / fontScale * this.SCALE_FACTOR * this.SCALE_FACTOR);
|
|
1605
|
-
this.initialized = true;
|
|
1606
|
-
}
|
|
1607
|
-
break;
|
|
1608
|
-
}
|
|
1609
|
-
}
|
|
1610
|
-
};
|
|
1611
|
-
/**
|
|
1612
|
-
* 尺寸处理
|
|
1613
|
-
*/ _proto.resolveCanvasSize = function resolveCanvasSize(wrapResult, layout, style, singleLineHeight) {
|
|
1614
|
-
var canvasWidth = Math.max(1, wrapResult.maxLineWidth || 0);
|
|
1615
|
-
var canvasHeight = Math.max(1, wrapResult.totalHeight || 0); // stepTotalHeight
|
|
1616
|
-
layout.width = canvasWidth / style.fontScale;
|
|
1617
|
-
layout.height = canvasHeight / style.fontScale;
|
|
1618
|
-
return {
|
|
1619
|
-
canvasWidth: canvasWidth,
|
|
1620
|
-
canvasHeight: canvasHeight,
|
|
1621
|
-
contentWidth: wrapResult.maxLineWidth,
|
|
1622
|
-
bboxTop: wrapResult.bboxTop,
|
|
1623
|
-
bboxBottom: wrapResult.bboxBottom,
|
|
1624
|
-
bboxHeight: wrapResult.bboxHeight,
|
|
1625
|
-
// 为 visible 模式的画布尺寸计算保留行信息
|
|
1626
|
-
lines: wrapResult.lines
|
|
1627
|
-
};
|
|
1628
|
-
};
|
|
1629
1493
|
/**
|
|
1630
1494
|
* 使用策略结果绘制文本
|
|
1631
|
-
|
|
1632
|
-
|
|
1495
|
+
* 坐标 = 帧坐标(对齐结果) + 渲染偏移(溢出结果)
|
|
1496
|
+
*/ _proto.drawTextWithStrategies = function drawTextWithStrategies(context, lines, horizontalAlignResult, verticalAlignResult, overflowResult, textStyle) {
|
|
1497
|
+
var renderOffsetX = overflowResult.renderOffsetX, renderOffsetY = overflowResult.renderOffsetY;
|
|
1498
|
+
var currentBaselineY = verticalAlignResult.baselineY + renderOffsetY;
|
|
1633
1499
|
var lineOffsets = horizontalAlignResult.lineOffsets;
|
|
1634
1500
|
lines.forEach(function(line, index) {
|
|
1635
1501
|
var richOptions = line.richOptions, chars = line.chars;
|
|
1636
|
-
var xOffset = lineOffsets[index];
|
|
1502
|
+
var xOffset = lineOffsets[index] + renderOffsetX;
|
|
1637
1503
|
var yOffset = currentBaselineY;
|
|
1638
1504
|
richOptions.forEach(function(options, segIndex) {
|
|
1639
|
-
var
|
|
1505
|
+
var textColor = textStyle.textColor, textFamily = textStyle.fontFamily, textWeight = textStyle.textWeight, richStyle = textStyle.fontStyle;
|
|
1640
1506
|
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;
|
|
1641
|
-
// 直接使用原始字体大小(已在行数据中预缩放)
|
|
1642
1507
|
var textSize = fontSize;
|
|
1643
|
-
context.font = fontStyle + " " + fontWeight + " " + textSize
|
|
1508
|
+
context.font = fontStyle + " " + fontWeight + " " + textSize + "px " + fontFamily;
|
|
1644
1509
|
var r = fontColor[0], g = fontColor[1], b = fontColor[2], a = fontColor[3];
|
|
1645
1510
|
context.fillStyle = "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
|
|
1646
|
-
// 逐字绘制
|
|
1647
1511
|
var segStartX = line.offsetX && line.offsetX[segIndex] ? line.offsetX[segIndex] : 0;
|
|
1648
1512
|
var charArr = chars[segIndex];
|
|
1649
1513
|
charArr.forEach(function(charDetail) {
|
|
1650
|
-
// 直接使用缩放后的字符位置
|
|
1651
1514
|
context.fillText(charDetail.char, xOffset + segStartX + charDetail.x, yOffset);
|
|
1652
1515
|
});
|
|
1653
1516
|
});
|
|
@@ -1720,7 +1583,7 @@ applyMixins(RichTextComponent, [
|
|
|
1720
1583
|
|
|
1721
1584
|
/**
|
|
1722
1585
|
* 插件版本号
|
|
1723
|
-
*/ var version = "2.8.
|
|
1586
|
+
*/ var version = "2.8.10";
|
|
1724
1587
|
registerPlugin("rich-text", RichTextLoader);
|
|
1725
1588
|
logger.info("Plugin rich text version: " + version + ".");
|
|
1726
1589
|
if (version !== EFFECTS.version) {
|