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

用于定制产品编辑器的HTML5框架,html,html5-canvas,sproutcore,cappuccino,easeljs,Html,Html5 Canvas,Sproutcore,Cappuccino,Easeljs,我正在研究一个项目的几个html5框架,该项目在某些方面与编辑器类似 必须实施的主要功能: 选择预定义的背景 通过拖放放置多个预定义图元 元素必须是可调整大小、可旋转的 撤消/重做 元素必须具有向前/向后移动的能力(如层) 整个画布的缩放(这可能很棘手……有什么建议吗?) 保存元素放置的能力 获取成品的.png预览(您能否以某种方式将画布捕获到常规图像中) 到目前为止我一直在研究的框架: 卡布奇诺 看起来很有希望,用它制作的项目涵盖了我需要的90%的功能。但是我不确定ObjectiveJ是不

我正在研究一个项目的几个html5框架,该项目在某些方面与编辑器类似

必须实施的主要功能:

  • 选择预定义的背景
  • 通过拖放放置多个预定义图元
  • 元素必须是可调整大小、可旋转的
  • 撤消/重做
  • 元素必须具有向前/向后移动的能力(如层)
  • 整个画布的缩放(这可能很棘手……有什么建议吗?)
  • 保存元素放置的能力
  • 获取成品的.png预览(您能否以某种方式将画布捕获到常规图像中)
到目前为止我一直在研究的框架:

卡布奇诺

看起来很有希望,用它制作的项目涵盖了我需要的90%的功能。但是我不确定ObjectiveJ是不是

sproutcore

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

easeljs

这些例子看起来很酷,如果你把它们结合起来,几乎涵盖了所有内容。可能是我目前最喜欢的

你对这些框架有什么看法?它们适合这个项目吗?还有我错过的吗?任何建议都可以帮助我选择合适的工具


Thx.

对于您的缩放功能,我发现了相同的问题

对于图像的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+'"/>');
var canvas=document.getElementById(“canvas”);
var img=canvas.toDataURL(“image/png”);
//这里有png图像显示,只需创建一个元素并在那里显示预览
文件。写(“”);

如果你了解Javascript和面向对象编程,你可以在几个小时内学习Objective-J。Thx,我不知道你可以创建这样的.png。完美的