У "столбика с пикселями" же есть левая и права сторона. Мы возьмем его из 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 для каждой буквы
То-есть я дам пользователю возможность задать сплайн из двух кривых безье и дам возможность ввести текст.
После этого текст нужно отобразить с вышеизложенным эффектом, учитывая заданный сплайн
Про обфускаторы я понял, да.
Но крупные компании, которые делают карты, редакторы и т.д. используют ts + gcc и не используют обфускаторы.
Хочется понять как они это делают.
Я не пробовал source map с обфускаторами, но в целом в каком- то виде должно помочь, да.
Но я до сих пор брезговал обфускаторами, так как не хочется превращать код в избыточный и неэффективный без гарантии, что его нельзя преобразовать назад и с сохранением названий функций и переменных.
Я как-то смотрел продакшн код больших фронтовых проектов и там везде код выглядел как после GCC. То-есть переименованы все функции и переменные и нету обфускации.
При этом там явно используется Typescript, значит точно есть нормальный способ использовать typescript + gcc.
Может есть смысл посмотреть на другие сборщики?
