室内设计师项目的画布或SVG

Question

我即将开始一个房间设计师项目的工作,这个项目允许你将墙/门/家具等拖放到网格上来设计一个房间.我已经决定拖放透明PNG并绝对定位它们不会起作用,我不想使用flash,所以它是Canvas或SVG.

我:我之前从未使用过Canvas或SVG,但是我非常能胜任javascript和jQuery(我很好用OO Javascript,匿名函数,闭包,回调等)而且我读过Douglas Crockford的"Javascript:好的部分"并且大部分理解;-)

项目 - 需要从组件窗口拖放到设计器窗口,需要在平板电脑(而不是手机)上工作,因此触摸事件是一个问题.还需要工具提示,对象的分层等.如果我使用矢量图形,那么他们无论如何都需要有位图纹理(例如墙面板可能有墙纸纹理)

到目前为止,我已经阅读了一本关于Canvas的书,并得出以下结论......

帆布

• 快速
• 让你的头围在画布上重绘对象相当简单
• 不知道还有鼠标事件
• 像EaselJS,FabricJS和KinectJS这样的图书馆看起来很不错.

SVG

• 可扩展(更容易构建缩放功能)
• 易于从插图画家导入图形.
• 绘图库看起来不够丰富/好.
• 不知道回合鼠标/触摸事件.

所以,我需要很快解决如何做到这一点.现在我倾向于Canvas和一个好的库,因为我相信他们中的一些人可以导入SVG以获得可扩展性.

任何关于哪个方向的建议都将非常感谢.

Answer 1

对于我的钱,我肯定会选择SVG(但我确实有更多的SVG经验).它似乎是为3D渲染应用程序而制作的.首先,它是一个完整的DOM - 因此它为您处理渲染和z排序(无需任何重新绘制等),最重要的是 - 提供了大部分对象模型本身.使用canvas,您必须创建更多的内存模型来处理所有内容的呈现.使用SVG,您无需担心屏蔽,移动,变换,缩放或渲染任何内容.显然,如果物体在3D空间中相交/重叠,它会变得更加复杂 - 但这两种方法都是如此.至少SVG承担了你的大部分负担.

但在性能方面,我无法肯定地说.这取决于你的应用程序在做什么.我不认为触摸事件应该是决定因素 - 你会找到一种方法,即使它意味着覆盖透明画布.SVG是否支持触摸事件也可能取决于设备/浏览器 - 但我没有探究过这一点.

但帆布 - 这对你有什么影响？这是一个位图,就是这样.任何一天,给我一个非常强大的DOM而不是一块记忆.

但这只是我的意见!:-)