Аргументы с текстом на холсте

Question

Я использую Processing.js, чтобы отобразить примерно 45 градусов повернутого текста на изображении.

Проблема заключается в том, что после ротации текст становится трудно читаемым, поскольку артефакты становятся видимыми, расстояние между буквами не является постоянным, или буквы не имеют одинаковой нижней строки.

Описание: demo.

Вы можете видеть, что второй «Hello World» имеет знак ‎Ø вместо e и o. Кроме того, в 8-й проблема разметки букв очевидна.

Есть ли способ исправить это? По крайней мере, для поворота на 45 градусов.

Вот скриншот. Я знаю, что здесь кажется, что это не имеет большого значения, но окончательный образ должен быть совершенным, и эта ошибка действительно выделяется.

Answer 1

Я не могу дать конкретное решение для обработки, но если вы нормально с общим ответом вы можете сделать следующее, а затем, возможно, интегрировать, что с обработкой:

текст способность Хрома в настоящее время бедный (я считаю, что оставленный от 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: