0

我正在使用 CodeIgniter 2 构建一个管理区域,当涉及到文本覆盖时,管理员可以在其中添加“空白”的特定图像。当他们上传图片时,他们应该有一种方法来定义某些路径,普通用户可以在这些路径上添加所需的文本。基本上,这可用于衬衫、杯子……任何类型的定制可打印表面。

路径需要支持直线、贝塞尔曲线和圆。并且一个基础镜像需要支持多条路径。

我使用了 Raphael JS 库和 SVG。

这是我目前的方法:

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

这种方法的问题是,当放置在弯曲/圆形路径上时,一些字母显示相当奇怪,我无法将它准确地放置在需要的位置,所以有些偏移字母是我无法拥有的。

这是使用 .net 实现此类内容的示例站点。基本上,您在第 1 行、第 2 行等中输入文本,它会显示在右侧的徽章上。它还将文本保留在定义的区域中,因此如果您输入的文本超出该区域的容量,它会压缩文本以使其适合。

有人对我应该寻找什么有任何指示吗?要点是:路径/区域需要由管理员定义(使用 JS 或第三方应用程序),并且文本必须放在这些路径上。

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

4

1 回答 1

0

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.

Snapshot of my Inkscape rendering

于 2012-04-24T14:55:01.310 回答