Canvas自定义文字旋转缩放渲染

Posted 2022-12-01 ㄏ、Forgetˊ

最近遇到一个新需求，需要以给定的参数，在Canvas画板上渲染还原文字。

参数如下：

translateX（X轴方向上的偏移量）：0

translateY（Y轴方向上的偏移量）：92

scaleX（X轴上的缩放量）：1

scaleY（Y轴上的缩放量）：1

rotate（旋转角度）：25

fontSize（字体大小）：16

fontFamily（字体集）：‘微软雅黑’

color（字体颜色）：‘rgb(229,80,80)’

txt（带换行的文本，换行标识为 \\n）：‘我不行了\\n快扶我去喝酒’

要求：

文字可能存在多行，最长的一行文字必须能铺满画板的宽度，从画布的左上角（0，0）开始渲染。

实现代码如下：

let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
let ratio = window.devicePixelRatio * 2 // 防止画出的图模糊，定义倍数
// 画板宽高为120*160
canvas.width = 120 * ratio
canvas.height = 160 * ratio
canvas.style.width = 120
canvas.style.height = 160

let x = 0 + translateX
let y = 0 + translateY
// X方向上缩放
if (scaleX > 1) 
  x = x - 120 / 2
 else 
  x = x + 120 / 2

// Y方向上缩放
if (scaleY > 1) 
  y = y - (fontSize * ratio * (scaleY - 1)) / 2
 else 
  y = y + (fontSize * ratio * (1 - scaleY)) / 2

// 确定旋转的圆心
let cx = x + w / 2
let cy = y + (fontSize * ratio) / 2
ctx.save()
// 旋转
ctx.translate(cx, cy)
ctx.rotate(rotate)
ctx.translate(-cx, -cy)

ctx.fillStyle = color // 设置颜色
ctx.font = fontSize * ratio + 'px ' + fontFamily // 设置字体，字体大小需乘以缩放倍数
ctx.textBaseline = 'top' // 调整文字基线
let txtList = txt.split('\\n')
// 一次循环找最长的文字段
let maxWid = 0
txtList.forEach((text) => 
  let wid = ctx.measureText(text).width // 利用canvas的API取当前文本的宽度
  maxWid < wid ? (maxWid = wid) : ''
)
let sX = (120 * ratio) / maxWid // 该缩放值用于设置文本最长行铺满画板宽度
ctx.scale(sX, 1) // 设置文本最长行铺满画板宽度
ctx.scale(scaleX, scaleY)
txtList.forEach((text, index) => 
  // 绘制文字（参数：要写的字，x坐标，y坐标）
  ctx.fillText(
    text,
    x / sX / scaleX, // X轴上进行缩放后，对应坐标需除以sX以及scaleX
    (y + fontSize * ratio * index) / scaleY // Y轴上则只需要除以scaleY
  )
)
ctx.restore()

实现效果