微信小程序 canvas文字超出自动换行 显示省略号

canvas文字超出几行 显示省略

/**
 * canvas文字超出显示省略号处理
 * ctx => canvas对象
 * str => 文本内容
 * axisX => X轴距离
 * axisY => Y轴距离
 * titleHeight => 单行行高
 * maxWidth => 文本的宽度
 * textLength => 文字最多展示几行
 */
export function drawText(ctx, str, axisX, axisY, titleHeight, maxWidth, textLength) {
    // 文本处理
    let strArr = str.split("");
    let row = [];
    let temp = "";
    for (let i = 0; i < strArr.length; i++) {
        if (ctx.measureText(temp).width < maxWidth) {
            temp += strArr[i];
        } else {
            i--; //这里添加了i-- 是为了防止字符丢失，效果图中有对比
            row.push(temp);
            temp = "";
        }
    }
    row.push(temp); // row有多少项则就有多少行

    //如果数组长度大于{textLength}，现在只需要显示{textLength}行则只截取前{textLength}项,把第{textLength}行结尾设置成'...'
    if (row.length > textLength) {
        let rowCut = row.slice(0, textLength);
        let rowPart = rowCut[textLength - 1];
        let test = "";
        let empty = [];
        for (let i = 0; i < rowPart.length; i++) {
            if (ctx.measureText(test).width < maxWidth) {
                test += rowPart[i];
            }
            else {
                break;
            }
        }
        empty.push(test);
        let group = empty[0] + "..." //这里只显示{textLength}行，超出的用...表示
        rowCut.splice(textLength - 1, 1, group);
        row = rowCut;
    }
    // 把文本绘制到画布中
    for (let i = 0; i < row.length; i++) {
        // 一次渲染一行
        ctx.fillText(row[i], axisX, axisY + i * titleHeight, maxWidth);
    }
}