小程序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); } } } },