@dmitry_pacification
Трудности рождают прорыв

Как сверстать текст по дуге?

Приблизительно вот так prntscr.com/gg4e8y.
Я хочу чтобы оно было более плавнее, чем на картинке.
Вставить картинкой - это самый детский способ, по этому я такое не рассматриваю. Только хардкор! \m/_
  • Вопрос задан
  • 6897 просмотров
Пригласить эксперта
Ответы на вопрос 4
Принципиальная особенность (достоинство) этого способа – в том, что геометрия самих букв тоже изменяется. Напр. в букве "H" параллельные вертикальные становятся непараллельными, получив перспективное искажение. Т.е. это 100% честное искажение всей картинки, а не разброс букв по отдельности.

Способ: отрисовать этот текст в SVG, из него сделать canvas в разрешении с запасом – в несколько раз больше нужного. В canvas применить нужные искажения (легкая фраза, за которой куча сложностей, в т.ч. математика и антиалиасинг).

Вставить как data-uri и просто новые canvas.

Сделал пример, в котором из такого:
<svg xmlns="http://www.w3.org/2000/svg"
     width="920" height="160" viewBox="0 0 230 40">
  <text text-anchor="middle" x="115" y="32" font-family="Times New Roman" font-size="35">
    Hello, Toster
  </text>
</svg>
получается такая картинка:
example.png
P.S. там всё сыро, надо ещё по краям области билиниар интерполяцию прозрачности, что ли, сделать..
Ответ написан
@kulaeff
Front-end developer
Поместить каждую букву в отдельный блок и повернуть все буквы с помощью transform: rotate и transform-origin.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы