小程序canvas文本处理(截取和换行)


//字体截取
/**
    * 
    * @param {*} ctx  自定义画布名
    * @param {*} str  文本
    * @param {*} leftWidth x坐标
    * @param {*} initHeight y坐标
    * @param {*} canvasWidth 自定义文本宽度
    */
drawTexts: function(ctx, str, leftWidth, initHeight, canvasWidth) {
    let lineWidth = 0;
    let id = 0;
    for (let i = 0; i < str.length; i++) {
      let fontWidth = ctx.measureText(str[i]).width; //每个字的宽度
      lineWidth += fontWidth;
      if (lineWidth < canvasWidth) {
        id++;
      }
    }
    if (lineWidth > canvasWidth) {
      ctx.fillText(str.substring(0, id) + '...', leftWidth, initHeight); //绘制截取部分
    } else {
      ctx.fillText(str, leftWidth, initHeight);
    }
  },
//字体换行
/**
   * 
   * @param {*} ctx  自定义画布名
   * @param {*} str  文本
   * @param {*} leftWidth  x坐标
   * @param {*} initHeight y坐标
   * @param {*} Highline  文字上下距离
   * @param {*} canvasWidth  自定义文本宽度
   */
drawText: function(ctx, str, leftWidth, initHeight, Highline, canvasWidth) {
    let lineWidth = 0;
    let lineWidths = 0;
    let lineWidthss = 0;
    let lastSubStrIndex = 0; //每次开始截取的字符串的索引
    let index = 0;

    for (let i = 0; i < str.length; i++) {
      let fontWidth = ctx.measureText(str[i]).width;
      lineWidth += fontWidth;
      if (lineWidth > (canvasWidth * 3)) {
        index = i - 2;
        i = str.length;
        console.log(lineWidth)
        console.log(index)
      }
    }

    console.log(lineWidth)
    if (lineWidth > (canvasWidth * 3)) {
      let strs = str.substring(0, index)

      for (let l = 0; l < strs.length; l++) {
        let fontWidth = ctx.measureText(strs[l]).width;
        lineWidths += fontWidth;
        if (lineWidths > canvasWidth) {
          ctx.fillText(strs.substring(lastSubStrIndex, l), leftWidth, initHeight); //绘制截取部分
          initHeight += Highline; //16为字体的高度
          lineWidths = fontWidth;
          lastSubStrIndex = l;
        }
        if (l == strs.length - 1) { //绘制剩余部分
          ctx.fillText(str.substring(lastSubStrIndex, l + 1) + '...', leftWidth, initHeight);
        }
      }
    } else {
      for (let i = 0; i < str.length; i++) {
        var fontWidth = ctx.measureText(str[i]).width;
        lineWidthss += fontWidth;
        if (lineWidthss > canvasWidth) {
          ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
          initHeight += Highline; //16为字体的高度
          lineWidthss = fontWidth;
          lastSubStrIndex = i;
        }
        if (i == str.length - 1) { //绘制剩余部分
          ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
        }
      }
    }
  },

 

posted @ 2019-10-30 21:30  九月有清晨  阅读(1020)  评论(0编辑  收藏  举报