微信小程序canvas画布绘制文字自动换行

发布时间:2024年01月16日

关键步骤介绍:

text为需要绘制的文本,通过换行符将text分割为words数组。

basic_height为第一行文本的高度。

get_canvas_row函数根据行宽限制将输入文本转化为不同的行,实现见下文。

text_size为设置的文本高度,h+text_size*j为每行待绘制文本的高度,绘制完成后更新h。

var words = text.split('\n')
var h = basic_height
for(var i=0;i<words.length;++i){
    var rows = this.get_canvas_rows(ctx,words[i],canvas.width-10)
    for(var j=0;j<rows.length;++j){
        ctx.fillText(rows[j],10,h+text_size*j)
    }
    h += rows.length*text_size
}

get_canvas_rows函数参数介绍:

参数1:绘制的画布对象

参数2:绘制的文本

参数3:限制的文本宽度

关键步骤介绍:

步骤1:将输入文本拆分为单个字符数组。

步骤2:将字符数组依次赋予t_line,不断扩大t_line长度,直到达到文本宽度限制,将t_line作为一行文本赋予rows数组,t_line重新计数,直到字符数组最后一个字符。

步骤3&

文章来源:https://blog.csdn.net/tl437002770/article/details/135634495
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。