uniapp 使用canvas画布，实现文字换行

最新推荐文章于 2025-04-30 20:36:32 发布

原创最新推荐文章于 2025-04-30 20:36:32 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue

该博客介绍了如何在canvas中实现文本超出指定宽度时的自动换行功能。通过在common.js中定义一个名为canvasTextAutoLine的函数，利用uni.createCanvasContext的方法创建画布上下文，并在视图/组件内部调用该函数，实现了在限制最大宽度的情况下，正确绘制多行文本的功能。这在前端开发中对于文本布局和展示非常实用。

1、新建一个工具类文件夹`utils`（已有忽略）

2、新建文件`common.js`

3、在`common.js`，新增内容：

/**
 * canvas文本超出范围时，自动换行
 * @param {*} ctx
 * @param {*} text
 * @param {*} x
 * @param {*} y
 * @param {*} maxWidth
 * @param {*} lineHeight
 */
export function canvasTextAutoLine(ctx, text, x, y, maxWidth, lineHeight) {
  let lineWidth = 0
  let lastSubStrIndex = 0
  for (let i = 0; i < text.length; i++) {
    lineWidth += ctx.measureText(text[i]).width
    if (lineWidth > maxWidth) {
      ctx.fillText(text.substring(lastSubStrIndex, i), x, y)
      y += lineHeight
      lineWidth = 0
      lastSubStrIndex = i
    }
    if (i === text.length - 1) {
      ctx.fillText(text.substring(lastSubStrIndex, i + 1), x, y)
    }
  }
}

4、在视图/组件内使用

<script>
import { canvasTextAutoLine } from '@/utils/common'
export default {
	methods:{
		handleInitCanvas(){
			const ctx = uni.createCanvasContext('canvas', this) // 创建画布
			...
			canvasTextAutoLine(
            ctx,
            '测试换行文字文字文字文字',
            x, // x轴坐标位置（视实际情况而定）
            y, // y轴坐标位置（视实际情况而定）
            500, // 文字显示最大宽度（视实际情况而定）
            30 // 文字行高（视实际情况而定）
          )
			...
		}
	}
}
</script>