微信小程序实现多行文本溢出,iOS出现文本重叠

问题:在微信小程序使用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:新增英文多行文本换行

英文单词截断显示
英文单词完整显示
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,772评论 0 17
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,955评论 1 45
  • 忘了从哪收集的资料了,放这儿,以备不时之需。 只能输入数字:"^[0-9]*$"。 只能输入n位的数字:"^\d{...
    study_monkey阅读 1,438评论 0 7
  • 这个世界属于爱冒险的人,它的运行规律是撑死胆大的饿死胆小的。 运气,本来就是成功的必要条件。 有水平是一回事,遇到...
    喵皇后阅读 221评论 0 0
  • 那年她升初中 2013年九月是安珍嫣第一次升上初中。她有点忐忑同时有点不安和好奇,她在步入初中第...
    钟离佑希阅读 203评论 0 3