选择正确的技术/库，以便在先前定义的区域中的路径上添加用户指定的文本

Question

我正在使用CodeIgniter 2构建一个管理区域，管理员可以在文本叠加时添加“空白”的特定图像。当他们上传图像时，他们应该有一种方法来定义常规用户可以添加所需文本的特定路径。基本上，这可以用于衬衫，马克杯......任何类型的定制可印刷表面。

路径需要支持直线，贝塞尔曲线和圆。一个基本图像需要支持多个路径。

我使用了Raphael JS库和SVG。

这是我目前的做法：

• 我在InkScape中打开基本图像并绘制路径
• 将路径导出为SVG
• 使用该路径创建Raphael JS路径
• 将文字放在该路径上

这种方法的问题在于，当放置在弯曲/圆形路径上时，某些字母显示相当奇怪，我无法将其准确放置在需要的位置，因此有一些偏移字母，我不能有

这是使用.net实现此类内容的sample site。基本上，您在第1行，第2行等输入文本，它显示在右侧的徽章上。它还会在定义的区域中保留文本，因此如果您输入的文本多于区域中可以容纳的文本，它会挤压文本以使其适合。

对于我应该寻找的东西，有没有人有任何指示？要点是：路径/区域需要由管理员（使用JS或第三方应用程序）定义，文本必须放在这些路径上。

这不一定要使用HTML5，也可以使用任何类型的PHP库来完成。

Answer 1

是的，如果你的路径可以由管理员而不是用户定义，那么在Inkscape中绘制它们并让Inkscape在服务器上进行渲染。这很容易在命令行上实现，但当然您需要管理员访问您的服务器才能安装Inkscape。然后，路径需要支持文本，给它一个特殊的id，你可以在应用程序中识别，然后使用PHP的XML编写器之一重写SVG文件，并使用Inkscape转换为PNG输出。

如果您从用户那里获得文本输入，那么您需要进行一定程度的清洁（将角括号替换为他们的htmlentities等），否则它很容易。文件大约需要0.7秒才能在我的开发机器上进行处理，如果您对加载方式有很多期望，可以在队列中进行处理。

编辑：它没有Raphael那么快，但在浏览器支持方面更可靠。我没有太多关注拉斐尔，但我很确定我正在做的文本流程并没有得到客户端的良好支持（无论如何）。

编辑2：这就是我目前的工作。左边的项目是一个SVG模板，在浏览器中呈现为低分辨率的PNG图像，右边的输入框是编辑框（包含符号的最后一个是使用自制的标记语法，如果你'想知道）。现在，红色轮廓是使用Inkscape CLI检索的边界框。因此，由于我们可以检测到轮廓，在您的情况下，您可以确定某些文本超出的百分比，并相应地减少font-size元素内的tspan。 （当你说“变换”时，我认为你的意思是“减小尺寸”）。

这实际上是一个穷人的自动适应功能。如果在SVG中有直接支持，那会很好，但我不知道有。但是，听起来上述建议对您的案例有效。