如何在画布上垂直居中对齐多行文本（在 NodeJS 中）

Question

我正在尝试在 npm 模块 canvas 顶部使用 canvas-multiline-text 在画布上垂直居中对齐多行文本。我不知道如何（以编程方式/自动）垂直居中文本。

文本可能是 1 个单词，也可能是一个包含 10 个以上单词的句子。有没有办法计算出它的高度并相应地计算y 的位置？

注意：我不在浏览器中，我使用的是 node.js。

const fs = require('fs')
const { registerFont, createCanvas, loadImage } = require('canvas')
const drawMultilineText = require('canvas-multiline-text')

const width = 2000;
const height = 2000;
let fontSize = 250;

const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

//Filling the square
context.fillStyle = '#fff'
context.fillRect(0, 0, width, height)

//Text Styles
context.font =  "normal 700 250px Arial";
context.textAlign = 'center'
context.textBaseline = 'middle';
context.fillStyle = '#000' 

//Drawing Multi Line Text
const fontSizeUsed = drawMultilineText(
    context,
    "Hello World, this is a test",
    {
        rect: {
            x: 1000,
            y: 1000, // <-- not sure what to put here / how to calculate this?
            width: context.canvas.width - 20,
            height: context.canvas.height - 20
        },
        font: 'Arial',
        verbose: true,
        lineHeight: 1.4,
        minFontSize: 100,
        maxFontSize: 250
      }
)

Answer 1

我把这个作为答案，因为我还不能发表评论，但你使用的模块不支持这个。您可以做的是修改模块（或者只是将函数复制到您自己的代码中）。该函数有一个变量 y 存储文本的高度。您可以在 for 循环之外初始化变量，以便在绘制文本时可以使用它。然后，您可以从新的 y 变量中减去 opts.rect.height 并除以 2 以获得正确的偏移量，现在文本将位于调用函数时指定的 y 变量的中心。哦，最后得到“context.textBaseline = 'middle';”因为您使用的模块会在假设底部基线的情况下进行计算。这是drawMultiLineText函数的最终代码

...
const words = require('words-array')(text)
if (opts.verbose) opts.logFunction('Text contains ' + words.length + ' words')
var lines = []
let y;  //New Line
...
var x = opts.rect.x;
y = fontSize; //modified line
lines = []
...
if (opts.verbose) opts.logFunction("Font used: " + ctx.font);
const offset = opts.rect.y + (opts.rect.height - y) / 2; //New line, calculates offset
for (var line of lines)
    // Fill or stroke
    if (opts.stroke)
        ctx.strokeText(line.text.trim(), line.x, line.y + offset) //modified line
    else
        ctx.fillText(line.text.trim(), line.x, line.y + offset) //modified line

...

您使用的这个模块并不是最干净的代码（使用 var 而不是 let，具有将字符串拆分为单词的依赖项），因此我强烈建议您自己重写此函数。但这些应该是必要的更改，以使其居中文本。

编辑：仔细查看此依赖项的代码后，似乎有比我最初认为的更多的错误，代码将高度视为矩形的底部，而不是高度。要解决此问题，请从分配 y 的行中删除 opts.rect.y，并将其添加到偏移变量（我已经对代码进行了这些更改）