制作一个家具布局工具,需要一些建议
Making a furniture layout tool, need some advice
我正在制作一个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,因为它允许您在查询中使用对象的公式。
- 访问布局信息是否也会导致浏览器重排
- 使用agility.js进行页面布局和合成
- Chrome开发工具(如何知道我在调用哪个javascript对象)
- Google/html5语音识别JavaScript SDK Chrome网络工具包SpeechRecognition
- 同位素库错误:未捕获错误无布局模式包装生产线8
- 如何实现此布局
- 有没有一个javascript图形绘制库可以进行气球树布局
- 如何在GoogleWeb工具包(GWT)中从JSNI调用接口(实例化)
- 删除CKEditor工具栏按钮,但不删除功能
- d3.js Chord图的动态工具提示
- jQuery工具验证器自定义效果-添加&消除影响
- vaadin:使用自定义布局集成angular js
- Graphiti中是否有任何工具提示功能
- "工具提示"jQuery插件坏了
- 单元格的工具提示或标题不显示超过2000个字符
- 用于高级文本的格式化工具
- D3 圆包布局中嵌套圆圈的工具提示
- D3(具有引导程序网格布局)-工具提示位置关闭
- 如何在d3强制定向布局节点上显示工具提示
- 制作一个家具布局工具,需要一些建议