一、带省略号:
export function fittingString(str, maxWidth, fontSize) {
const ellipsis = "...";
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
let currentWidth = 0;
let res = str;
const pattern = new RegExp("[\u4E00-\u9FA5]+"); // distinguish the Chinese charactors and letters
str.split("").forEach((letter, i) => {
if (currentWidth > maxWidth - ellipsisLength) return;
if (pattern.test(letter)) {
currentWidth += fontSize;
} else {
currentWidth += G6.Util.getLetterWidth(letter, fontSize);
}
if (currentWidth > maxWidth - ellipsisLength) {
res = `${str.substr(0, i)}${ellipsis}`;
}
});
return res;
}
处理数据时在节点处使用:
return {
...el,
label: fittingString(el.label, 80, 16),
size: size,
style: {
fill: fill,
},
};
二、不带省略号:
superLongTextHandle(str, maxWidth, fontSize) {
let currentWidth = 0;
let res = str;
// 区分汉字和字母
const pattern = new RegExp("[\u4E00-\u9FA5]+");
str.split("").forEach((letter, i) => {
if (currentWidth > maxWidth) return;
if (pattern.test(letter)) {
// 中文字符
currentWidth += fontSize;
} else {
// 根据字体大小获取单个字母的宽度
currentWidth += G6.Util.getLetterWidth(letter, fontSize);
}
if (currentWidth > maxWidth) {
res = `${str.substr(0, i)}\n${this.superLongTextHandle(
str.substr(i),
maxWidth,
fontSize
)}`;
}
});
return res;
},
项目中使用:
return {
...el,
label: superLongTextHandle(el.label, 80, 16),
size: size,
style: {
fill: fill,
},
};