制作家具布局工具，需要一些建议

Question

我正在制作一个Web应用程序，主要用于客户端，并在服务器端（PHP / MySQL）处理和存储数据。该应用程序可让您将不同的家具添加到房间。这些家具主要由简单的形状（矩形，方形等等）代表，除了一些独特的形状，如“L”形和“U”形（没有曲线，所有直边）。我需要能够根据用户放入的尺寸来计算任何这些部件的平方英尺。用每个部件存储“公式”的最佳方法是什么？

另一部分是我计划有一个拖放式界面，用户可以将家具放在房间里。我一直在研究使用<canvas>元素，但后来遇到了Raphael。这似乎是更好的方法，因为它支持更多的浏览器。我将从这个界面需要的主要内容是：

• 能够控制每一面（形状中的任何直边）并改变它的颜色。
• 保存每个形状的位置，以便我可以随时重建布局。

Raphael的语法看起来相当简单，对于我制作的每个形状存储SVG的最佳方法是什么，这样当用户点击“添加”时，形状已经计算好并且可以添加？

基本上，Raphael是这种界面/需求的好选择吗？而且，我如何在数据库中存储信息，例如我制作的形状，以及每个布局（每个形状的形状，尺寸和位置的组合），以便我可以加载任何已保存的布局？

Answer 1

我相信你的方向正确，请与SVG和Raphael保持联系，或者你可以使用其中一个库：

• jsPlumb ：http://code.google.com/p/jsplumb/ - 为开发人员提供了一种可视化连接其网页上元素的方法。它在现代浏览器中使用SVG或Canvas，在石器时代的浏览器中使用VML。最新版本 - 1.3.3 - 可与jQuery，MooTools和YUI3一起使用。包含完全透明的拖动支持，API非常简单。
• JointJS ：www（dot）jointjs（dot）com / - 是用于创建图表的JavaScript库。图表可以完全互动。联合库既适用于实现图表工具，也适用于发布图表。特点：
  连接矢量对象与各种类型的箭头; 与连接和对象交互; 各种活动的自定义处理程序; 弯曲的线条平滑; 知名图表的即用型元素（ERD，组织结构图，FSA，UML，PN，DEVS，LDM）; 层次图; 序列化（来自/来自JSON格式，仅在支持它的浏览器中导出SVG）; 扩展; 定制;
• Cajal ：http://dotsunited.github.com/cajal/ - cajal提供了面向对象的功能，可以在canvas元素上绘制和动画形状。您可以轻松地在其他项目中重复使用动画或复杂的形状对象，因为每个形状都可以根据您的喜好分配到您网站上的任意数量的画布元素。

关于公式，我会以JS对象格式存储最后的维度和点，我相信公式可以存储在对象中创建，并使用策略模式传递正确的公式。

希望这对你有用。

问候！

Answer 2

我认为存储对象和用户创建的布局的最简单的解决方案是json＆amp; svg分别。

每件家具都可以是json对象，具有大小，颜色等属性，使用这些属性生成svg片段的方法，基于属性获取平方英尺的方法，对它表示的svg元素，以及同时更新属性和svg的setter方法。

可以在Raphael中进行布局，并将Raphael画布的svg保存为布局状态。 要在Mysql中存储这些，我会为svg状态创建一列，为包含svg中表示的所有对象的大型json创建一列。

缺点是json不是很容易查询。如果需要，您可能需要考虑本机JSON数据库，例如MongoDB，因为它允许您使用查询中对象的公式。