微信小程序踩坑记录

微信小程序实现多行文本溢出,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:新增英文多行文本换行

英文单词截断显示 英文单词完整显示
上一篇下一篇

猜你喜欢

热点阅读