I use Processing.js
在图像上显示一些 45 度旋转的文本。
问题是,旋转后,文本变得难以阅读,因为伪影变得可见,字母间距不恒定或字母没有相同的底线。
这里有一个demo.
你可以看到第二个“Hello World”有Ø
签名而不是e
and o
。
另外,在第8处,字母间距问题也很明显。
有没有办法来解决这个问题?至少对于 45 度旋转的文本。
这是一个屏幕截图。我知道这看起来没什么大不了的,但最终的图像必须是完美的,这个错误确实很突出。
![enter image description here](https://i.stack.imgur.com/S8MSg.jpg)
我无法给出具体的处理解决方案,但如果您可以接受通用答案,您可以执行以下操作,然后可能将其与处理集成:
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);
在线演示在这里
这将导致相同的文本看起来像这样:
![Chrome cached image](https://i.stack.imgur.com/Va8om.png)
与绘制的直接作为文本:
![Chrome direct text](https://i.stack.imgur.com/M1EhA.png)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)