Line Breaks for Strings on Canvas
canvas 绘制文本时, 换行如何解决 背景 微信小程序中使用 canvas 绘制分享海报长文本不能自动换行 题外: Taro 小程序中 canvas 的宽高设置 // poster.jsx export default () => { useLoad(() => { ... const dpr = Taro.getWindowInfo().pixelRatio // canvas对象 通过 createSelectorQuery 获取 canvas.width = renderWidth * dpr canvas.height = renderHeight * dpr ctx.scale(dpr, dpr) ... }) return ( ... <Canvas id='poster' type='2d' style='width:320px;height:400px' /> ... ) } 思路 对于纯中文, 不用考虑单词被分到两行 先将文本按每个 字符 分成数组 按 canvas 的 measureText 方法调整一行的宽度(字体大小不同, 宽度不同), 获取每一行应该出现的文本 分行按高度输出 对于纯英文, 要考虑单词被分到两行
Recent Posts
Tags
- apache 4
- axios 1
- benchmark 1
- c 1
- canvas 1
- centos 3
- channel 1
- crontab 1
- css 2
- docker 4
- fail2ban 1
- frp 1
- gin 1
- github 1
- go 26
- goaccess 1
- goroutine 1
- http 1
- https 1
- jetbrains 1
- jquery 1
- js 2
- linux 20
- mermaid 1
- mysql 10
- nginx 3
- node 1
- php 43
- prisma 1
- react 8
- server 1
- ssh 2
- tarojs 1
- tcp/ip 1
- token 1
- ubuntu 1
- ufw 1
- unit-test 1
- vmware 1
- vscode 1
- vue 12
- yum 1
- 域名 3
- 安全 2
- 微信 3
- 算法 3