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

小鱼儿 2022-12-13 04:34 562阅读 0赞

最近遇到一个新需求，需要以给定的参数，在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()

## 实现效果 ##

![效果图][2020101011292019.png_pic_left]

[2020101011292019.png_pic_left]: /images/20221123/7b075af83cce43a49d873db1e243d3e2.png