javascript – Canvas旋转文本工件
作者:互联网
我使用Processing.js在图像上显示一些45度旋转的文本.
问题是,在旋转之后,文本变得难以阅读,因为工件变得可见,字母间距不恒定或字母不具有相同的底线.
这是一个demo.
您可以看到第二个“Hello World”具有Ø符号而不是e和o.
而且,在第8个字母间距问题是显而易见的.
有没有办法来解决这个问题?至少45度旋转文字.
这是一个截图.我知道这似乎没什么大不了的,但最终的形象必须是完美的,这个bug真的很突出.
解决方法:
我不能给出一个特定的处理解决方案,但如果您对通用答案没问题,您可以执行以下操作,然后可能将其与处理集成:
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);
这将导致相同的文本看起来像这样:
与绘制的directly as text:
标签:javascript,canvas,processing-js 来源: https://codeday.me/bug/20190517/1121519.html