Я скачал Playwrite India шрифт из Google Fonts и архив выглядит так:
Тут видно разные .ttf для разных весов, но остается вопрос, как связаны PlaywriteIN-VariableFont_wght и файлы для каждого веса. Но это более минорный вопрос.
Основной вопрос, почему google fonts предлагает мне тот же family подключить по ссылке и там перечисляет только один .ttf ссылка на FontFace
Кажется тут тоже должны быть отдельные .ttf для отдельных весов
Я прочитал спецификацию TrueType.
Не уверен, что я правильно понял, но кажется, что .ttf однозначно задает шрифт, а программа чтения шрифта в операционной системе (AAT) уже выбирает нужный наиболее подходящий font из семейства docs
При формировании строки font в css есть набор параметров
Я хочу давать возможность выбирать щрифт + задавать жирность и выставлять italic/normal если это поддерживается шрифтом.
Допустим я беру семейтво Roboto. У него есть разные шрифты (файлы woff2).
Правильно ли я понимаю, что, не учитывая самодеятельность браузера, шрифт, заданный woff2, поддерживает только те font-weight, font-style, которые указаны в его FontFace?
И еще такой вопрос:
Сам файл шрифта, судя по всему, не однозначно задает очертания глифов, а условно принимает параметры (weight например), так? Как понять что задает файл шрифта и какое множество параметров он поддерживает?
Нет
Мне было нужно написать текст по окружности - это я смог сделать.
Теперь, в дополнение к этому, мне нужно посчитать точки, в которых были написаны буквы.
Кажется, что координаты должны считаться так
let x = Math.cos(currentAngle + angle) * (this.data.diameter / 2 - textHeight / 2);
let y = -Math.sin(currentAngle + angle) * (this.data.diameter / 2 - textHeight / 2);
Но на картинке видно, что это не верные точки, так как верные располагались бы на нарисованных буквах.
Вопрос: где ошибка при расчете x и y
Основной вопрос - как посчитать точки в которых написаны буквы, чтобы потом посчитать прямоугольник, который их ограничивает.
В моем понимании эти точки рассчитываются как у меня рассчитываются drawPoints, но они смещены по окружности и не совпадают с положением букв
У "столбика с пикселями" же есть левая и права сторона. Мы возьмем его из mock канваса, где текст написан слево направо и попытаемся поставить на рабочий канвас, пытаясь написать flip text
Добрый день!
Если я правильно понял, алгоритм заключается в том, чтобы попереносить срезы (столбики пикселей) из mock канваса на рабочий в точки на кривой, верно?
Мы же не получим flip text в случае смены направления кривой в таком случае?
По искажению получается так:
Разбиваем на rectangles, для каждого rectangle ставим искажение по касательной к кривой, чтобы буква шла вдоль нее.
Далее итерируемся по rectangles, вызываем clip для этого rectangle и вызываем условный drawChar(text[i], x, y)
Вот тут есть проблема посчитать x, y для char. Получается нужно сделать отдельный итератор (который состоит из i и drawnWidth) для букв и на каждом rectangle считать какую часть реальной ширины буквы мы уже нарисовали, чтобы на следующем rectangle нарисовать ту же букву, но расположить ее так, чтобы, учитывая skew мы продолжили нарисованную в предыдущем rectangle часть этой же буквы
Вот этот код работает.
Он пишет в console это
Но если взять то, что он пишет в console.log и поставить в JSON.parse, то уже не работает
Хотя строка должна быть такой же