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

Question

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

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

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

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 提供面向对象的功能来在画布元素上绘制和动画形状。您可以在其他项目中轻松重用动画或复杂的形状对象，因为每个形状都可以分配给您网站上任意数量的画布元素。

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