微信小程序实现多行文本溢出,iOS出现文本重叠
2019-04-04 本文已影响0人
飞鱼YE
问题:在微信小程序使用canvas绘制多行文本(文本内容含回车换行符)时,Android正常,iOS出现文本重叠问题。
解决方案:去除回车换行符 text.replace(/[\r\n]/g, '')
/**
* 多行文本溢出
* @param {Object} context - canvas组件的绘图上下文
* @param {String} text - 文本内容
* @param {Number} maxWidth - 文本最大宽度
* @param {Number} maxRow - 文本最多显示行数
* @param {String} font - 字体样式
* @param {String} color - 文本颜色
* @param {Number} lineHeight - 文本行高
* @param {Number} x - 文本的x坐标
* @param {Number} y - 文本的y坐标
* @param {Boolean} broken - 单词是否截断显示【true → 单词截断显示,适用于:纯中文、中英混排、纯英文(不考虑英文单词的完整性)】【false → 单词完整显示,考虑英文单词的完整性,仅适用于纯英文】
*/
const drawTextOverflow = (context, text, maxWidth, maxRow, font, color, lineHeight, x, y, broken = true) => {
let arr = [];
let temp = '';
let row = [];
let separator = broken ? '' : ' ';
text = text.replace(/[\r\n]/g, ''); // 去除回车换行符
arr = text.split(separator);
context.font = font; // 注意:一定要先设置字号,否则会出现文本变形
context.fillStyle = color;
if (context.measureText(text).width <= maxWidth) {
row.push(text);
} else {
for (let i = 0; i < arr.length; i++) {
// 超出最大行数且字符有剩余,添加...
if (row.length == maxRow && i < arr.length - 1) {
row[row.length - 1] += '...';
break;
}
// 字符换行计算
if (context.measureText(temp).width < maxWidth) {
temp += arr[i] + separator;
// 遍历到最后一位字符
if (i === arr.length - 1) {
row.push(temp);
}
} else {
i--; // 防止字符丢失
row.push(temp);
temp = '';
}
}
}
// 绘制文本
for (let i = 0; i < row.length; i++) {
context.fillText(row[i], x, y + i * lineHeight, maxWidth);
}
return row.length * lineHeight; // 返回文本高度
};
ps:新增英文多行文本换行
英文单词截断显示 英文单词完整显示