Choisir la bonne technologie / bibliothèque pour ajouter du texte spécifié par l'utilisateur sur un chemin dans des régions définies précédemment

Je crée une zone d'administration à l'aide de CodeIgniter 2, où l'administrateur a la possibilité d'ajouter des images spécifiques «vierges», lorsqu'il s'agit de superposition de texte. Lorsqu'ils téléchargent l'image, ils devraient avoir une façon de définir certains chemins sur lesquels les utilisateurs réguliers peuvent ajouter le texte désiré. Fondamentalement, cela peut être utilisé pour des chemises, des tasses … tout type de surfaces imprimables personnalisées.

Les chemins doivent supporter les lignes droites, les courbes et les cercles de Bézier. Et une image de base doit supporter plusieurs chemins.

J'ai utilisé la bibliothèque Raphael JS et SVG.

Voici mon approche actuelle:

  • J'ouvre l'image de base dans InkScape et trace un chemin
  • Exportez le chemin sous SVG
  • Utilisez ce chemin pour créer un chemin Raphael JS
  • Placez le texte sur ce chemin

Le problème avec cette approche est que certaines lettres affichent plutôt étrange lorsqu'elles sont placées sur un chemin courbe / circulaire et je ne peux pas la placer exactement où elle doit être, il y a donc des lettres décalées que je ne peux pas avoir.

Voici un exemple de site où ce genre de choses a été implémenté en utilisant .net. Fondamentalement, vous entrez le texte dans la ligne 1, la ligne 2 etc. et il s'affiche sur le badge sur le côté droit. Il conserve également le texte dans la région définie, donc, si vous entrez plus de texte que ce que vous pouvez utiliser dans la région, il presse le texte afin qu'il puisse correspondre.

Quelqu'un at-il des indications pour moi sur ce que je devrais rechercher? Principaux points étant: les chemins / régions doivent être définis par l'administrateur (utilisant JS ou une application tierce) et le texte doit être placé sur ces chemins.

Cela ne doit pas être fait en utilisant HTML5, il peut être fait en utilisant n'importe quel type de bibliothèque PHP aussi.

Bien, si vos chemins peuvent être définis par un administrateur, plutôt que par l'utilisateur, puis les dessiner dans Inkscape et obtenir Inkscape pour effectuer votre rendu sur le serveur. Ceci est facile à réaliser sur la ligne de commande, bien sûr, vous aurez besoin d'un accès administrateur à votre serveur pour installer Inkscape. Puis, où un chemin d'accès doit prendre en charge le texte, donnez-lui un id spécial que vous pouvez reconnaître dans votre application, puis réécrivez le fichier SVG à l'aide de l'un des rédacteurs XML de PHP et convertissez en utilisant Inkscape en sortie PNG.

Si vous obtenez une entrée de texte des utilisateurs, vous devrez effectuer une certaine quantité de nettoyage (échange entre parenthèses à leurs htmlentities, etc.), mais sinon c'est assez facile. Les fichiers prennent environ 0,7 seconde pour traiter sur ma machine dev, et si vous attendez beaucoup de chargement, vous pouvez le faire sur une file d'attente.

Edit: ce n'est pas aussi rapide que Raphael, mais il est beaucoup plus fiable en termes de support du navigateur. Je n'ai pas trop regardé Raphael, mais je suis très sûr que les flux de texte que je fais n'ont tout simplement pas de bon côté du client (pour le cas échéant).

Edit 2: c'est à quoi ressemble mon travail actuel. L'élément à gauche est un modèle SVG, rendu dans le navigateur sous forme d'image PNG à faible résolution, et les boîtes de saisie à droite sont des boîtes d'édition (la dernière contenant les symboles utilise une syntaxe de balisage faite à la maison, au cas où vous Se demande-t-il). Maintenant, les contours rouges limitent les cases qui sont récupérées à l'aide de la CLI Inkscape. Donc, puisque nous pouvons détecter un aperçu, dans votre cas, vous pouvez déterminer par quel pourcentage de texte a été dépassé et réduire la font-size la font-size dans un élément tspan conséquence. (Lorsque vous dites "transformer", je suppose que vous voulez dire "réduire la taille").

Ce serait en fait une fonction d' auto-ajustement de l'homme pauvre. Ce serait bien s'il y avait un soutien direct dans SVG pour cela, mais je ne suis pas au courant qu'il existe. Mais, il semble que la suggestion ci-dessus fonctionnerait pour votre cas.

Instantané de mon rendu Inkscape