Canvas文本换行处理2.0

原处理方法：

https://blog.csdn.net/qq_16494241/article/details/52174342

原处理方法中canvas写入的多行文本无论多少行数据，都是顶部在一条水平线上，
但我们在日常开发中，需要根据需求不同，
如：列表中的多行文本数据，需要设置无论多少行数据，都需要统一的基准Y轴居中的展示效果，

如图：名称一列数据显示在当前行内上下居中展示效果

2.0处理方法：

处理方法中加代码：

// 设置了同一Y轴数值的多行文本保持整体高度Y轴中心点在一条基准线上：根据行数的增加数据向上移动数值
let lineNum = Math.ceil(getTrueLength(text) / bytelength);
if(lineNum > 1){
  starttop = starttop - (lineheight / 2 * (lineNum - 1))
}

注：加的代码最好根据配置参数的方式来判断是否需要这样设置，这样就能兼容不同的效果需求了

最终处理方法代码：

//多行文本写入设置
//ctx_2dgetContext("2d") 对象
//lineheight段落文本行高
//bytelength设置单字节文字一行内的数量
//text写入画面的段落文本
//startleft开始绘制文本的 x 坐标位置（相对于画布）
//starttop开始绘制文本的 y 坐标位置（相对于画布）
//maxLine       显示的行数，超出则截取掉
function writeTextOnCanvas(ctx_2d, lineheight, bytelength, text, startleft, starttop, maxLine) {
  // 设置了同一Y轴数值的多行文本保持整体高度Y轴中心点在一条基准线上：根据行数的增加数据向上移动数值
  let lineNum = Math.ceil(getTrueLength(text) / bytelength);
  if(lineNum > 1){
    starttop = starttop - (lineheight / 2 * (lineNum - 1))
  }
  
  function getTrueLength(str) {
    var len = str.length,
      truelen = 0;
    for (var x = 0; x < len; x++) {
      if (str.charCodeAt(x) > 128) {
        truelen += 2;
      } else {
        truelen += 1;
      }
    }
    return truelen;
  }

  function cutString(str, leng) {
    var len = str.length,
      tlen = len,
      nlen = 0;
    for (var x = 0; x < len; x++) {
      if (str.charCodeAt(x) > 128) {
        if (nlen + 2 < leng) {
          nlen += 2;
        } else {
          tlen = x;
          break;
        }
      } else {
        if (nlen + 1 < leng) {
          nlen += 1;
        } else {
          tlen = x;
          break;
        }
      }
    }
    return tlen;
  }
  for (var i = 1; getTrueLength(text) > 0; i++) {
    if (i > maxLine) {
      break;
    }
    var tl = cutString(text, bytelength);
    //ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop);
    ctx_2d.fillText(text.substr(0, tl), startleft, (i - 1) * lineheight + starttop);
    text = text.substr(tl);
  }
}

原文地址：https://blog.csdn.net/qq_16494241/article/details/140557084

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！