制作家具布局工具，需要一些建议[关闭]答案

【问题标题】：Making a furniture layout tool, need some advice [closed]制作家具布局工具，需要一些建议[关闭]
【发布时间】：2011-10-09 18:23:05
【问题描述】：

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

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

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

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

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

【问题讨论】：

就个人而言，我会研究 jQuery UI 和 draggable 功能，再加上可以用作家具的浮动 <div>s。从那里，您可以抓取所有放置的图层并获取它们的位置、大小等，并使用 AJAX 存储信息以供以后使用、保存等。
@BradChristie 我实际上只是想提出一个类似的方法。如果这个应用程序不需要比这里描述的更远，你可以使用可拖动的 div。您甚至可以使用 jQuery UI 强制对齐元素边缘，这对于布局工具来说非常方便。
那么你们是说摆脱使用 SVG 定义形状并使用 <div>s 中的图像吗？
我必须同意以前的 cmets。到目前为止的好想法。关于存储公式的问题：也许只是在 JS 中保存为简单的 JS 对象。您可以将 U 形和 L 形分解为两个/三个矩形，因此公式也很简单。
我选择使用 SVG 的原因是因为一些非基本的形状中有曲线，我需要一种方法来给一边颜色。有 4 种不同的颜色，一个形状最多可以有 8 个面。所以我需要一些简单的方法来绘制它并存储关于每一面的信息。

标签： php javascript raphael

【解决方案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 对象格式存储最后的维度和点，我相信公式可以存储在对象中创建并使用您传递正确的策略模式来应用。

【讨论】：

谢谢！策略模式是个好主意，从来没有想过。问题：所以这在客户端运行良好，但我将如何将它存储在服务器端？假设我有一个 L 形，它有 6 个边，我希望能够存储用户为给定边输入的任何尺寸。你如何在数据库中表示它？我会创建一个“形状”表和一个“边”表，并且一个形状有很多边吗？理想情况下，存储在数据库中的形状能够以每边的正确尺寸重新绘制。
好吧，我可能会想到两种方法。 1）也许更简单但不那么可扩展的是保存序列化的 JS 对象本身，因此您将只有一列来表示它，从而简化您的持久性。还通过层简化对话。 2）您确实以复杂的方式保留形状。这样，您可以通过连接到 x2,y2 的点边缘 x1,y1 来表示形状......希望我已经说清楚了。问候

【解决方案2】：

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

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

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

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

【讨论】：