用于自定义产品编辑器的 HTML5 框架

Question

我正在为一个在某些方面类似于iMakeMyCase 编辑器的项目研究几个 html5 框架。

必须实现的主要功能：

• 选择预定义的背景
• 通过拖放放置多个预定义元素
• 元素必须可调整大小、可旋转
• 撤消/重做
• 元素必须能够将它们向前/向后移动（如层）
• 缩放整个画布（这可能很棘手......有什么建议吗？）
• 能够保存元素放置
• 获得成品的 .png 预览（您能以某种方式将画布捕获为常规图像吗）

到目前为止我一直在寻找的框架：

卡布奇诺

看起来很有前途，用它完成的项目涵盖了我需要的 90% 的功能。不过，我不确定 ObjectiveJ ...

sproutcore

我没有看到很多例子，但如果苹果用它制作了整个 iCloud，那么它肯定会很强大。但我有一种感觉，需要大量的实现才能涵盖所需的功能。如果我错了，请纠正我。

easeljs

这些示例看起来很酷，如果将它们结合起来，几乎可以涵盖所有内容。可能是我目前最喜欢的。

您对这些框架有何看法？它们是否适合该项目？还有什么我错过的吗？非常欢迎任何建议来帮助我为工作选择合适的工具。

谢谢。

Answer 1

对于您的缩放功能，我发现了同样的问题 here

对于您的图像的 png 预览，您可以执行类似的操作

var canvas = document.getElementById("canvas");
var img    = canvas.toDataURL("image/png");
//here you got the png image show just create an element and show this preview there
document.write('<img src="'+img+'"/>');