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

关键步骤介绍:

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

basic_height为第一行文本的高度。

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

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

javascript 复制代码
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:返回rows数组。

javascript 复制代码
    get_canvas_rows(ctx,line,maxWidth){
      var chars = line.split('')
      var rows = []
      var t_line = ''
      for(var i=0;i<chars.length;++i){
        var line_w = ctx.measureText(t_line+chars[i]).width    
        if(line_w>maxWidth){
          rows.push(t_line)
          t_line = chars[i]
        }else{
          t_line += chars[i]
        }
      }
      rows.push(t_line)
      return rows
    },

更多内容欢迎关注、评论、私信博主。

有用的话欢迎打赏~~~

相关推荐
00后程序员张4 分钟前
iOS 26 兼容测试实战,机型兼容、SwiftUI 兼容性改动
android·ios·小程序·uni-app·swiftui·cocoa·iphone
OEC小胖胖36 分钟前
连接世界:网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台
mon_star°1 小时前
基于微信小程序高仿背单词消除游戏
游戏·微信小程序·小程序
jingling5551 小时前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
ZeroNews内网穿透1 小时前
新版发布!“零讯”微信小程序版本更新
运维·服务器·网络·python·安全·微信小程序·小程序
molong9311 小时前
Android 应用配置跳转微信小程序
android·微信小程序·小程序
尘似鹤1 小时前
微信小程序学习(二)
学习·微信小程序·小程序
杏花春雨江南1 小时前
微信小程序里 uni.navigateTo 用的多了, 容易报错,
微信小程序·小程序·notepad++
2501_915106321 小时前
iOS 可分发是已经上架了吗?深入解析应用分发状态、ipa 文件上传、TestFlight 测试与 App Store 审核流程
android·ios·小程序·https·uni-app·iphone·webview
2501_9160074710 小时前
HTTPS 抓包乱码怎么办?原因剖析、排查步骤与实战工具对策(HTTPS 抓包乱码、gzipbrotli、TLS 解密、iOS 抓包)
android·ios·小程序·https·uni-app·iphone·webview