canvas绘图文字內容全自动换行的完成编码

2020-10-13 11:41 jianzhan

原形规定:

规定制做1个邀约卡网页页面,在其中题目篇幅是动态性的,数最多可显示信息2行,假如超过2行则第2行內容末尾加上省略号。依据商品妹子的性情,4行这个设定到时很大机遇改,因此这里1定不可以写死,結果前几日真的规定改为了数最多可显示信息4行 ,别的依旧。商品妹子too young :)!

空话不说,下面贴编码,献丑了!上编码以前先看1下必须传的主要参数!!

图文并茂的主要参数表明,谅解我捉急的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; // 当今绘图內容的数据库索引

    // 分辨內容是不是能够1行绘图结束
    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) {
                    // 最终1行加上省略号
                    ctx.fillText(content.substring(drawIndex, i) + '...', drawX, drawY);
                    break;
                } else {
                    // 并不是最终1行的状况
                    ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
                    drawIndex = i + 1;  // 纪录当今行最终1个标识符串的下1个idnex,用于绘图下行第1个字
                    drawLine += 1;  // 行数+1
                    drawY += lineHeight; // 绘图內容的y座标对应提升行高
                    drawTxt = ''; // 重设绘图的內容
                }
            }
        }
    }
}

出现意外发现

在绘图文本的全过程中发现,绘图文本的y座标是并不是以文本上方做规范,1图胜多言,上图!

访问器自然环境: chrome 71.0.3578.98(宣布版本号)(64 位)

字体样式尺寸为40px

绘图的y座标为0时,能够看到文字再左上角只漏了1点点出来

绘图的y座标为40时,能够看到文字能够彻底显示信息

续篇

这是1个较为冷门的编码实际效果,可是也期待能够帮到有必须的盆友,也期待大伙儿多多适用脚本制作之家。