Выбор правильной технологии / библиотеки для добавления указанного пользователем текста по пути в ранее определенных областях

Я создаю админ-зону, используя CodeIgniter 2, где у администратора есть возможность добавлять определенные изображения, которые являются «пустыми», когда дело доходит до наложения текста. Когда они загружают изображение, у них должен быть способ определения определенных путей, по которым обычные пользователи могут добавлять желаемый текст. В принципе, это можно использовать для рубашек, кружек … любого типа пользовательских печатных поверхностей.

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

Я использовал библиотеку Raphael JS и SVG.

Вот мой нынешний подход:

Я открываю базовое изображение в InkScape и рисую путь
Экспортировать путь как SVG
Используйте этот путь для создания пути Raphael JS
Поместите текст на этот путь

Проблема с этим подходом заключается в том, что некоторые буквы отображаются довольно странно, когда они помещаются на криволинейный / круговой путь, и я не могу разместить его точно там, где он должен быть, поэтому есть некоторые смещенные буквы, которые я просто не могу иметь.

Вот пример сайта, где этот вид материала был реализован с использованием .net. В принципе, вы вводите текст в строке 1, строке 2 и т. Д., И он отображается на значке справа. Он также сохраняет текст в определенном регионе, поэтому, если вы введете больше текста, чем может поместиться в регионе, он сжимает текст, чтобы он мог поместиться.

У кого-нибудь есть какие-то указания для меня относительно того, что я должен искать? Основные моменты: пути / регионы должны быть определены администратором (с использованием JS или стороннего приложения), и текст должен быть помещен на эти пути.

Этого не нужно делать с помощью HTML5, это можно сделать с помощью любой библиотеки PHP.

Правильно, если ваши пути могут быть определены администратором, а не пользователем, затем нарисуйте их в Inkscape и получите Inkscape для рендеринга на сервере. Это легко достичь в командной строке, хотя, конечно, для установки Inkscape вам понадобится доступ администратора к вашему серверу. Затем, когда путь должен поддерживать текст, дайте ему специальный id который вы можете распознать в своем приложении, затем перезапишите файл SVG с помощью одного из XML-писателей PHP и конвертируйте с использованием вывода Inkscape в PNG.

Если вы получаете текстовый ввод от пользователей, вам нужно будет выполнить определенную очистку (скопировать угловые скобки в свои htmlentities и т. Д.), Но в противном случае это довольно просто. Файлы занимают около 0,7 секунды для обработки на моей машине dev, и если вы ожидаете многого на пути загрузки, вы можете сделать это в очереди.

Изменить: это не так быстро, как Raphael, но он намного более надежный с точки зрения поддержки браузера. Я не очень много смотрел на Рафаэля, но я уверен, что поток текста, который я делаю, просто не имеет хорошей поддержки на стороне клиента (пока, во всяком случае).

Изменить 2: это то, как выглядит моя текущая работа. Элемент слева – это шаблон SVG, отображаемый в браузере как изображение PNG с низким разрешением, а поля ввода справа – это поля редактирования (последний, содержащий символы, использует синтаксис разметки для домашнего использования, в случае, если вы Интересно). Теперь красные контуры являются ограничивающими прямоугольниками , которые извлекаются с помощью Inkscape CLI. Итак, поскольку мы можем обнаружить контур, в вашем случае вы можете определить, в каком проценте какой-то текст переполнен, и соответственно уменьшить font-size внутри элемента tspan . (Когда вы говорите «трансформировать», я предполагаю, что вы имеете в виду «уменьшить размер»).

Это будет фактически функция автоматической установки бедных людей. Было бы неплохо, если бы в SVG была прямая поддержка для этого, но я не знаю, что есть. Но, похоже, что вышеупомянутое предложение будет работать для вашего дела.

Снимок моей визуализации Inkscape