用于房间设计师项目的画布或 SVG答案

【问题标题】：Canvas or SVG for room designer project用于房间设计师项目的画布或 SVG
【发布时间】：2012-11-15 18:14:08
【问题描述】：

我即将开始一个房间设计师项目，它允许您将墙壁/门/家具等拖放到网格上来设计房间。我已经决定拖放透明 PNG 并绝对定位它们是行不通的，我不想使用 flash，所以它是 Canvas 或 SVG。

我：我以前从未使用过 Canvas 或 SVG，但在 javascript 和 jQuery 方面我非常胜任（我对 OO Javascript、匿名函数、闭包、回调等都很好）而且我已经阅读了 Douglas Crockford 的“Javascript: The Good Parts”并理解了大部分内容；-)

项目 - 需要从组件窗口拖放到设计器窗口，需要在平板电脑（而不是手机）上工作，因此需要考虑触摸事件。还需要工具提示、对象分层等。如果我确实使用矢量图形，那么它们无论如何都需要有位图纹理（例如，墙板可能有壁纸纹理）

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

画布

快速
在画布上重绘对象非常简单
还不知道鼠标事件
EaselJS、FabricJS 和 KinectJS 等库看起来不错。

SVG

可扩展（更容易构建缩放功能）
易于从 Illustrator 等工具导入图形。
绘图库看起来不那么丰富/好。
不知道鼠标/触摸事件。

所以，我需要尽快弄清楚如何做到这一点。现在我倾向于 Canvas 和一个好的库，因为我相信它们中的一些无论如何都可以导入 SVG 以实现可扩展性。

非常感谢任何有关前进方向的建议。

【问题讨论】：

为什么不能使用组合？
@Marty - 通过将 SVG 导入画布，这将如何工作？
您可以简单地将 svg 覆盖在画布上
正如你所说的 SVG 库并不丰富，我只是想让你知道raphaeljs.com，以防你还不知道。
也许我在这里感到困惑，但是将 svg 分层到画布上会有什么帮助？我认为您的意思是绝对定位它们并通过放置在它们后面的画布使它们可拖动。如果是这样，那么画布是用来做什么的，只是画一个背景？

标签： javascript html canvas svg

【解决方案1】：

我认为最好的解决方案是使用画布来表示网格和房间。然后对于房间里的物品，在画布上使用 svg。如果您使用透明的 png 文件制作家具，那么您根本不需要 svg，但如果您使用 svg，那么您可以缩放到更大，而不仅仅是稍微大一点。

您将在移动设备上遇到的一个问题是内存问题，如果您的页面上有很多项目，而且它们是 png，这可能是个问题。

如果您在画布上执行“拖放”操作，那么您实际上不需要 javascript 拖放库，只需处理触摸事件即可。

触摸事件的链接：http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/

以及有关触摸事件的链接：Javascript Drag and drop for touch devices

【讨论】：

嗨 nycynik，我不想使用 PNGS 的原因是因为使用简单的 javascript 拖放 PNG 的透明区域是可点击/可拖动的，并且它可能与用户的另一个对象重叠可能想拖，就是乱七八糟。
是的，画布很好，因为未点击不会突出显示页面，并显示它是图像顶部的图像/div。我同意，不将 DnD 与 png 一起使用，而是在画布上使用触摸事件。 100%。但正如 Mike P 上面所说，您还必须编写用于打印的渲染...

【解决方案2】：

为了我的钱，如果可能的话，我肯定会选择 SVG（但我确实有更多的 SVG 经验）。它似乎是为 3D 渲染应用程序而设计的。一方面，它是一个完整的 DOM - 因此它为您处理渲染和 z 排序（无需任何重新绘制等），最重要的是 - 提供了大部分对象模型本身。使用画布，您必须创建更多的内存模型来处理所有内容的渲染。使用 SVG，您无需担心遮罩、移动、转换、缩放或渲染任何内容。显然，如果对象在 3D 空间中相交/重叠，它会变得更加复杂 - 但无论哪种方法都是如此。至少 SVG 为您承担了大部分负担。

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

但是画布——它对你有什么用？这是一个位图，仅此而已。随时给我一个漂亮而强大的 DOM，而不是一团内存。

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

【讨论】：

另一个优点：SVG 非常适合打印。如果要打印房间平面图，可能会引起争论。

【解决方案3】：

我不知道您的项目有多复杂，但您应该担心平板电脑的性能，因为正如我在 iPad 2 上所做的一些测试中看到的那样，使用一些 svg 与 css 和 javascript 触摸事件混合它变成不要那么负责任，而且是一个明显的滞后。

Canvas 可能有更好的性能，但是，您需要为几乎所有内容编写管理脚本，例如存储位置以处理鼠标坐标和地图对象，并且您必须手动重绘每个更改。所以性能主要取决于你对画布管理脚本的优化程度，我不确定是否已经有任何库，答案可能是肯定的。

SGV 正如其他人所说，它通常较慢，但这是因为它不是作为普通位图渲染的，它是矢量元素的 DOM。它也很容易处理事件，您可以将事件附加到任何元素（取决于浏览器实现），您可以将 css 应用于样式，并且可以轻松更改位置、大小、描边、填充等属性。

到平板电脑：如果你选择 svg，我会避免使用高分辨率纹理，不要使用 css3 box-shadow 到 svg 元素（使 ipad 非常滞后），我会避免使用 jquery 来操作 DOM 并拖动和放弃，而是在平板电脑上使用带有非常优化代码的纯 JavaScript。

【讨论】：