Нет
Мне было нужно написать текст по окружности - это я смог сделать.
Теперь, в дополнение к этому, мне нужно посчитать точки, в которых были написаны буквы.
Кажется, что координаты должны считаться так
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 часть этой же буквы
Про аффинное преобразование понял.
Кажется можно выставлять transforms не для каждой буквы, а кусочно, и делать clip, чтобы в нужном rectagle нарисовался кусок буквы с нужными искажениями
Про саму кривую - это две плавно соединенные cubiс bezier curves. Соответственно я могу посчитать точки на суммарном сплайне бегая t [0, ....,1] по кривым и получая x и y.
С кривой все понятно.
В html canvas есть возможность менять transforms канваса https://developer.mozilla.org/en-US/docs/Web/API/C...
И писать текст по координатам.https://developer.mozilla.org/en-US/docs/Web/API/C...
С помощью этих двух api я должен для каждой буквы сделать примерно следующее:
canvas.ctx.save()
canvas.ctx.setTransform() - задаем искажения контекста для вытягивания и flip быквы
canvas.ctx.fillText(char, charX, charY) - пишем одну букву
canvas.ctx.restore()
Вопрос как посчитать tranforms и charX, charY для каждой буквы