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

Making a furniture layout tool, need some advice

本文关键字：工具 布局 一个      更新时间：2023-09-26

我正在制作一个web应用程序，它将主要发生在客户端，并将数据处理和存储在服务器端(PHP/MySQL)。这个应用程序可以让你在房间里添加不同的家具。这些家具将主要由简单的形状(矩形，方形等)来表示，除了一些独特的形状，如"L"形和"U"形(没有曲线，都是直边)。我需要能够根据用户输入的尺寸计算出任何这些部件的平方英尺。什么是最好的方式来存储"公式"与每件?

另一部分是我计划有一个拖放类型的界面，用户可以把家具放在房间里。我一直在考虑使用<canvas>元素，但后来我遇到了拉斐尔。这似乎是更好的方法，因为它支持更多的浏览器。我需要这个接口的主要内容是:

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

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

那么基本上，Raphael是这种类型的接口/需求的好选择吗?而且，如何在数据库中存储诸如我制作的形状以及每个布局(形状、尺寸和每个形状的位置的组合)之类的信息，以便我可以加载任何保存的布局?

我相信你是在正确的方向，继续使用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对象格式中，我相信公式可以存储在对象中创建，并使用您传递正确的策略模式来应用

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

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

布局可以在拉斐尔和拉斐尔画布的svg保存为布局状态。为了将这些存储在Mysql中，我将为svg状态创建一列，为包含svg中表示的所有对象的大型json创建一列。

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

相关文章：