画布旋转的文本工件

Question

我使用Processing.js 在图像上显示一些旋转 45 度的文本。

问题在于，旋转后文本变得难以阅读，因为伪影变得可见，字母间距不是恒定的或字母没有相同的底线。

这是demo。

您可以看到第二个“Hello World”有‎Ø 符号，而不是e 和o。 另外，第 8 位的字母间距问题也很明显。

有没有办法解决这个问题？至少对于旋转 45 度的文本。

这是一个屏幕截图。我知道这里看起来没什么大不了的，但最终的图像必须是完美的，这个错误真的很突出。

Answer 1

我无法给出具体的处理解决方案，但如果您对通用答案表示满意，您可以执行以下操作，然后可能将其与处理集成：

Chrome 的文本功能目前很差（我相信是 WebKit 的遗留问题），不仅是画布，而且总体而言。当应用旋转时，这一点变得特别明显。您看到的（向后）“ø”实际上是e，但由于文本引擎不佳和舍入错误，细节融合在一起，在这种情况下最终看起来像北欧字符。

解决方法是将要旋转的文本绘制到未应用旋转的屏幕外画布上，然后将该画布用作您绘制到应用旋转的主画布上的图像。

这将产生更好的结果，并且在使用普通图像插值而不是文本引擎时性能也更好。

一个例子可以是：

/// draw text to off-screen canvas
osCtx.font = '12px arial';
osCtx.textBaseline = 'top';
osCtx.fillText(txt, 0, 0);

/// draw off-screen canvas rotated to main canvas
ctx.translate(w * 0.5, h * 0.5);
ctx.rotate(0.5);
ctx.drawImage(osCanvas, 0, 0);

Online demo here

这将导致相同的文本看起来像这样：

相对于directly as text：