缩放时在Canvas上正确放置文本

Question

我正在缩放上下文并将文本放置在画布上。但是，缩放比例会影响文本在画布上的位置，因为X值是缩放比例的，我不确定如何使它居中。这是我的代码：

ctx.textAlign = 'center';
let scaleX = 0.5;
const metrics = ctx.measureText(txt);
if (metrics.width > canvas.width) {
  scaleX = canvas.width / metrics.width;
}
const scaleY = this.dimension / lineHeight;
ctx.scale(scaleX, scaleY);
ctx.fillStyle = 'black';
ctx.fillText(txt, canvas.width / 2, 0);

如果要放置的文本足够长，则scaleX可能类似于0.2369378483。在那种情况下，即使ctx.fillText将文本放置在canvas.width / 2的x值处，它也不会居中，因为它是按0.2369378483缩放的。

在放置文本时如何解决这种差异？

Answer 1

我最终通过计算反比例值来使x位置相等：

let xPos = canvas.width / 2;
ctx.textAlign = 'center';
const posScale = 1 / scaleX;
xPos = xPos * posScale;
...
ctx.fillText(txt, xPos, 0);

这会反转x位置的比例，就好像没有应用比例。