选择正确的技术/库，以便在先前定义的区域中的路径上添加用户指定的文本 [英] Choosing the right technology/library for adding user specified text on a path in previously defined regions

问题描述

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

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

我使用了Raphael JS库和SVG。

是我目前的做法：

• 我在InkScape中打开基础图像并绘制路径
  
• 将路径导出为SVG


• 使用该路径创建Raphael JS路径
  
• 将文本放置在该路径中

这种方法的问题在于，当放置在弯曲/圆形路径上时，一些字母显示出相当奇怪的现象，而我无法完全将它放在需要的地方，所以有一些我不能拥有的偏移字母。

这是示例网站使用.net实现此类内容的地方。基本上，您在第1行，第2行等中输入文本，并在右侧的徽章上显示。它还保留了定义区域中的文本，所以如果输入的文本超出了该区域的范围，则会挤压文本以适应该区域。

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

不必使用HTML5，它也可以使用任何类型的PHP库来完成。

解决方案

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

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

编辑：不是与Raphael一样快，但在浏览器支持方面更可靠。我没有深入研究Raphael，但我很确定我正在做的文本流动的东西没有良好的客户端支持（不过，无论如何）。

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

这实际上是一个穷人的 auto-fit 功能。如果SVG对此有直接的支持会很好，但我不知道它有。但是，听起来上述建议对您的情况有效。

I am building an admin area using CodeIgniter 2, where the admin has the ability to add specific images that are "blank", when it comes to text overlay. When they upload the image, they should have a way of defining certain paths on which regular users can add desired text. Basically, this can be used for shirts, mugs...any type of custom printable surfaces.

The paths need to support straight lines, bezier curves and circles. And one base image needs to support multiple paths.

I used the Raphael JS library and SVG.

Here is my current approach:

• I open up the base image in InkScape and draw a path
• Export the path as SVG
• Use that path for creating a Raphael JS path
• Place the text on that path

The problem with this approach is that some letters display rather strange when placed on a curved/circular path and I can't quite place it exactly where it needs to be, so there is some offset letters that I just can't have.

Here is a sample site of where this kind of stuff has been implemented using .net. Basically, you enter the text in Line 1, Line 2 etc. and it displays on the badge on the right hand side. It also retains the text in the defined region, so if you enter more text than can fit in the region, it squeezes the text so it could fit.

Does anyone have any pointers for me as to what I should be looking for? Main points being: the paths/regions need to be defined by the admin (using JS or a third party application) and the text must be placed on those paths.

This does not have to be done using HTML5, it can be done using any kind of PHP library as well.

解决方案

Right, if your paths can be defined by an admin, rather than by the user, then draw them in Inkscape and get Inkscape to do your rendering on the server. This is easy to achieve on the command line, though of course you'll need admin access to your server to install Inkscape. Then, where a path needs to support text, give it a special id that you can recognise in your application, then rewrite the SVG file using one of PHP's XML writers, and convert using Inkscape to PNG output.

If you get text input from users then you'll need to do a certain amount of cleaning (swapping angle-brackets to their htmlentities etc) but otherwise it's quite easy. Files take around 0.7 sec to process on my dev machine, and if you expect much in the way of load, you can do it on a queue.

Edit: it's not as quick as Raphael, but it's much more reliable in terms of browser support. I've not looked into Raphael much, but I'm pretty sure the text flow stuff I'm doing just doesn't have good support client-side (yet, anyway).

Edit 2: this is what my current work looks like. The item on the left is an SVG template, rendered in-browser as a low-res PNG image, and the input boxes on the right are editing boxes (the last one containing symbols is using a home-made markup syntax, in case you're wondering). Now, the red outlines are bounding boxes that are retrieved using the Inkscape CLI. So, since we can detect an outline, in your case, you could determine by what percentage some text has overrun, and reduce the font-size inside a tspan element accordingly. (When you say "transform", I presume you mean "reduce in size").

That would be in effect a poor man's auto-fit feature. It would be nice if there was direct support in SVG for that, but I am not aware that there is. But, it does sound like the above suggestion would work for your case.

这篇关于选择正确的技术/库，以便在先前定义的区域中的路径上添加用户指定的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！