4

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

我：我以前从未使用过 Canvas 或 SVG，但在 javascript 和 jQuery 方面我非常胜任（我对 OO Javascript、anonymouse 函数、闭包、回调等很满意）并且我读过 Douglas Crockford 的“Javascript:好的部分”并理解其中的大部分内容；-)

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

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

帆布

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

SVG

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

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

任何有关前进方向的建议将不胜感激。

4

3 回答 3

5

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

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

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

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

于 2012-11-28T03:58:18.223 回答
2

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

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

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

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

和一个关于触摸事件的链接：Javascript Drag and drop for touch devices

于 2012-11-28T00:46:13.973 回答
2

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

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

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

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

于 2012-11-28T04:31:27.217 回答