UNPKG

3.33 kBJavaScriptView Raw
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3exports.getEllipsisText = exports.measureTextWidth = void 0;
4var tslib_1 = require("tslib");
5var util_1 = require("@antv/util");
6var context_1 = require("./context");
7/**
8 * 计算文本在画布中的宽度
9 */
10exports.measureTextWidth = (0, util_1.memoize)(function (text, font) {
11 if (font === void 0) { font = {}; }
12 var fontSize = font.fontSize, fontFamily = font.fontFamily, fontWeight = font.fontWeight, fontStyle = font.fontStyle, fontVariant = font.fontVariant;
13 var ctx = (0, context_1.getCanvasContext)();
14 ctx.font = [fontStyle, fontVariant, fontWeight, "".concat(fontSize, "px"), fontFamily].join(' ');
15 return ctx.measureText((0, util_1.isString)(text) ? text : '').width;
16}, function (text, font) {
17 if (font === void 0) { font = {}; }
18 return (0, tslib_1.__spreadArray)([text], (0, util_1.values)(font), true).join('');
19});
20/**
21 * 获取文本的 ... 文本。
22 * 算法(减少每次 measureText 的长度,measureText 的性能跟字符串时间相关):
23 * 1. 先通过 STEP 逐步计算,找到最后一个小于 maxWidth 的字符串
24 * 2. 然后对最后这个字符串二分计算
25 * @param text 需要计算的文本, 由于历史原因 除了支持string,还支持空值,number和数组等
26 * @param maxWidth
27 * @param font
28 */
29var getEllipsisText = function (text, maxWidth, font) {
30 var STEP = 16; // 每次 16,调参工程师
31 var DOT_WIDTH = (0, exports.measureTextWidth)('...', font);
32 var leftText;
33 if (!(0, util_1.isString)(text)) {
34 leftText = (0, util_1.toString)(text);
35 }
36 else {
37 leftText = text;
38 }
39 var leftWidth = maxWidth;
40 var r = []; // 最终的分段字符串
41 var currentText;
42 var currentWidth;
43 if ((0, exports.measureTextWidth)(text, font) <= maxWidth) {
44 return text;
45 }
46 // 首先通过 step 计算,找出最大的未超出长度的
47 while (true) {
48 // 更新字符串
49 currentText = leftText.substr(0, STEP);
50 // 计算宽度
51 currentWidth = (0, exports.measureTextWidth)(currentText, font);
52 // 超出剩余宽度,则停止
53 if (currentWidth + DOT_WIDTH > leftWidth) {
54 if (currentWidth > leftWidth) {
55 break;
56 }
57 }
58 r.push(currentText);
59 // 没有超出,则计算剩余宽度
60 leftWidth -= currentWidth;
61 leftText = leftText.substr(STEP);
62 // 字符串整体没有超出
63 if (!leftText) {
64 return r.join('');
65 }
66 }
67 // 最下的最后一个 STEP,使用 1 递增(用二分效果更高)
68 while (true) {
69 // 更新字符串
70 currentText = leftText.substr(0, 1);
71 // 计算宽度
72 currentWidth = (0, exports.measureTextWidth)(currentText, font);
73 // 超出剩余宽度,则停止
74 if (currentWidth + DOT_WIDTH > leftWidth) {
75 break;
76 }
77 r.push(currentText);
78 // 没有超出,则计算剩余宽度
79 leftWidth -= currentWidth;
80 leftText = leftText.substr(1);
81 if (!leftText) {
82 return r.join('');
83 }
84 }
85 return "".concat(r.join(''), "...");
86};
87exports.getEllipsisText = getEllipsisText;
88//# sourceMappingURL=text.js.map
\No newline at end of file