canvas繪製文本內容自動換行

時間 2019-11-07

標籤 canvas 繪製文本內容自動換行简体版

原文原文鏈接

原型要求:

要求製做一個邀請卡頁面，其中標題字數是動態的，最多可顯示2行，若是超出2行則第2行內容結尾添加省略號。根據產品妹子的性格，四行這個設置到時很大機會改，因此這裏必定不能寫死，結果前幾天真的要求改爲了最多可顯示4行，其餘照舊。產品妹子too young ：）！chrome

廢話不說，下面貼代碼，獻醜了！上代碼以前先看一下須要傳的參數！！瀏覽器

圖文並茂的參數說明，原諒我捉急的PS技術和設計

ctx：畫布的上下文環境
content：須要繪製的文本內容
drawX：繪製文本的x座標
drawY：繪製文本的y座標
lineHeight：文本之間的行高
lineMaxWidth：每行文本的最大寬度
lineNum：最多繪製的行數

// 文字自動換行
function textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
    var drawTxt = ''; // 當前繪製的內容
    var drawLine = 1; // 第幾行開始繪製
    var drawIndex = 0; // 當前繪製內容的索引

    // 判斷內容是否能夠一行繪製完畢
    if(ctx.measureText(content).width <= lineMaxWidth) {
        ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
    } else {
        for (var i = 0; i < content.length; i++) {
                drawTxt += content[i];
                if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
                    if (drawLine >= lineNum) {
                        ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
                        break;
                    } else {
                        ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
                        drawIndex = i + 1;
                        drawLine += 1;
                        drawY += lineHeight;
                        drawTxt = '';
                    }
                } else {
                    // 內容繪製完畢，可是剩下的內容寬度不到lineMaxWidth
                    if (i === content.length - 1) {
                        ctx.fillText(content.substring(drawIndex), drawX, drawY);
                    }
                }
            }
    }
}