Switch language
zh
Switch theme
Light
  • 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 方法调整一行的宽度(字体大小不同, 宽度不同), 获取每一行应该出现的文本 分行按高度输出 对于纯英文, 要考虑单词被分到两行
🍀