微信小程序 canvas绘制多行文本（文本换行）

最新推荐文章于 2024-08-11 23:28:33 发布

阿昕_

最新推荐文章于 2024-08-11 23:28:33 发布

阅读量1.9k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/believeXin/article/details/88741107

版权

效果图

https://www.jianshu.com/p/4d2711cd104b

代码实现

/**
 *【drawTxt】canvas 绘制多行文本
 *【TODO: 中英混排且考虑单词截断...】
 * 
 * @param {*} context 绘制上下文环境 【必传】
 * @param {*} scale 缩放比  windowWidth / 750
 * @param {*} text 文本内容
 * @param {*} broken 单词是否截断显示  【true  如果不考虑英文单词的完整性 适用于所有情况】 【false  考虑英文单词的完整性 仅适用于纯英文】
 * @param {*} fillStyle 文本颜色
 * @param {*} fontSize 文本大小
 * @param {*} x 文本左上角x坐标
 * @param {*} y 文本左上角y坐标
 * @param {*} lineHeight 行高
 * @param {*} maxWidth 最大宽度
 * @returns  此次绘制文本的高度 单位: px
 */

function drawTxt({context, scale = 0.5, text = 'test text', fillStyle = '#000', broken = true, ...rest}) {
  if (!context) throw Error('请传入绘制上下文环境context')
  // 默认设置
  let origin = {x: 0, y: 0, lineHeight: 30, maxWidth: 630 , fontSize: 28}

  // 比例计算正确的尺寸
  for (let item in rest)