Jquery 衬衫设计师 - 如何？答案

【问题标题】：Jquery Shirt Designer - HOW?Jquery 衬衫设计师 - 如何？
【发布时间】：2012-09-19 01:50:27
【问题描述】：

我有一个客户要求我制作类似于您在主流 T 恤网站上看到的衬衫设计师的东西。

它需要用户能够在文本输入中输入文本，然后在图像周围拖动文本。我有两个主要问题，如果我能解决它们，我将能够完成这个项目......

问题 1：如何让文本在图像周围拖动？我的想法是使用可拖动的 Jquery UI 在页面周围拖动文本。我只会使用 jquery 来获取文本输入的值并将其放入可拖动的 div 中。这听起来像是一个好计划吗？

问题 2：我如何拍摄具有他的衬衫图像的主 div 的快照以及他想要的位置的文本，以便我可以将图像传递给网站所有者？是否有某种脚本可以拍摄 div 的快照？我四处寻找这个问题的答案，但找不到太多。

非常感谢任何帮助

【问题讨论】：

请查看product.herobo.com，我已经开发了它，如果您需要此插件的代码，请在此处联系 jain.raju0@gmail.com

标签： jquery jquery-ui codeigniter jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

看看 FabricJS：http://fabricjs.com/，尤其是厨房水槽演示：http://fabricjs.com/kitchensink/

您可以进行所需的文本修改，然后将其导出为 SVG。

【讨论】：

【解决方案2】：

您可能需要考虑使用 HTML5 画布（如果您需要支持的浏览器支持它）。然后，您就可以使用像这样的库：http://www.nihilogic.dk/labs/canvas2image/ 对于拖放，请查看此链接：http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/

如果你必须使用 jQuery 来支持客户端浏览器，我不相信有一个简单的方法来捕获图像。但是，您可以做的是将 T 恤上文本的坐标、宽度、字体、字体大小和字体颜色发送到服务器，并在那里渲染图片。然后，您可以在客户完成订单之前，在确认对话框中将该图片加载回客户浏览器中。如果这听起来很合理，并且您可以访问服务器环境，那么您使用什么语言进行编程？ php？其他？

您可能还想考虑网站所有者实际上是如何创建在网站上制作的 T 恤的。他/她可能只需要文本的坐标以及字体等来制作衬衫，而不仅仅是最终版本应该是什么样子的图片。

【讨论】：

我确实需要能够支持大多数浏览器。至少 Firefox 和 IE10、9 和 8。网站所有者拥有一家纺织公司，因此他或多或少地在寻找图像以了解客户想要文本的方式。然后他会让项目尽可能接近图像。我认为您在结账时为客户重新渲染图像的想法以及在他下订单时为管理员重新渲染图像可能是最好的想法。我将使用 codeigniter 框架用 jquery 和 php 编写代码。还有什么想法。我喜欢你现在的轨道。
好吧，在你放弃 IE8 支持之前，canvas 解决方案肯定行不通。但是，既然您已经知道字体的 x/y 坐标，以及文本的大小和颜色，那么我建议您使用类似 php ImageTTFText 库之类的东西：php.net/manual/en/function.imagettftext.php。您将首先加载基本衬衫图像，然后使用上述库插入文本。您可能还需要做一些数学运算，看看是否所有字符都适合一行。我不知道这是否会包装。如果您需要更多帮助，我可以编辑我的答案。
所以你是说让客户端使用可拖动/可放置的 jquery ui 将文本拖动到他们想要的位置，然后根据他们点击提交按钮时的坐标，使用 imagettftext 函数基本上制作衬衫的静态图像，顶部有文字。这实际上听起来完全可行。
就是这样。您还需要获取框的宽度以及文本占用的行数等信息。此外，如果您需要支持诸如居中之类的功能，我建议您计算出客户端每行文本的宽度，然后将其发送到服务器，因为很难弄清楚一块文本占用了多少空间带有字距调整等的某种字体……总而言之，一点数学和少量的 JS 技巧，这应该不会那么糟糕。