微信小程序 canvas 文字自动换行

Posted Cynthia娆墨旧染

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 canvas 文字自动换行相关的知识,希望对你有一定的参考价值。

Page({

    drawCanvas: function(ctx) {// 地址
        ctx.setFontSize(14)
        ctx.setFillStyle(#9E7240)
        ctx.textAlign="center";
        const txHash = this.data.info.txHash ? this.data.info.txHash : 暂无信息
        this.drawText(ctx,txHash,187, 517 , 232,232) // 自动换行
       
        ctx.draw()
        ctx.save()
    },// 文本自动换行
    drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
        var lineWidth = 0;
        var lastSubStrIndex = 0; //每次开始截取的字符串的索引
        for (let i = 0; i < str.length; i++) {
            lineWidth += ctx.measureText(str[i]).width;
            if (lineWidth > canvasWidth) {
                ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
                initHeight += 16; //16为字体的高度
                lineWidth = 0;
                lastSubStrIndex = i;
                titleHeight += 30;
            }
            if (i == str.length - 1) { //绘制剩余部分
                ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
            }
        }
        // 标题border-bottom 线距顶部距离
        titleHeight = titleHeight + 10;
        return titleHeight
    },

    
})

 

以上是关于微信小程序 canvas 文字自动换行的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序 文字换行

微信小程序 canvas绘制多行文本(文本换行)

微信小程序怎么设置文本换行(从后台拿的数据)

微信小程序怎么设置文本换行(从后台拿的数据)

微信小程序字体怎么换行?

微信小程序输出数组如何换行?