美文网首页微信小程序踩坑记录
微信小程序实现多行文本溢出,iOS出现文本重叠

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

作者: 飞鱼YE | 来源:发表于2019-04-04 14:13 被阅读0次

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

    英文单词截断显示 英文单词完整显示

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/okifiqtx.html