使用JavaScript的免费手绘

Question

除了HTML5 canvas之外，还可以使用哪些解决方案在JavaScript中实现自由手绘图？

我尝试过使用HTML5画布，但由于我在保存画布和文本方面遇到了问题，因此无法解决问题。此外，画布只能保存为图像。但我需要将其保存为可以打开并再次绘制和编辑文本的格式。

Answer 1

<强>更新 现在，在你的问题中添加了更多信息后，我知道为什么你不想使用画布（你仍然可以使用它，但是你以前用过的方式不同，但是你可能更喜欢另一种应用方法 - 见下文） 。人们投票决定关闭你的答案，这意味着在重新打开之前不会发布任何新答案，所以我会尝试更新我的答案。我还投票重新开启你的问题。

使用JavaScript选项绘图

对于HTML中的自由手绘图，您只有3个选项：

1. 帆布
2. SVG（IE上的VML）
3. 插件（例如Flash，Java，Silverlight）

你没有解释为什么你不想使用画布。

浏览器支持

如果您需要定位的浏览器不支持Canvas，那么您可以：

• 使用SVG或VML（或使用像Raphaël一样使用SVG / VML的库）
• 使用实现画布的东西（例如在Flash中），如：
  • http://code.google.com/p/fxcanvas/
  • http://flashcanvas.net/
  • http://excanvas.sourceforge.net/

API

如果原生Canvas API不适合您的需求，那么您可以使用一些提供更多功能或更好API的画布库。

以下是一些快速链接，可帮助您入门：

• http://dmitrybaranovskiy.github.io/raphael/
• http://processingjs.org/
• http://kineticjs.com/（不再维护！）
• http://www.createjs.com/#!/EaselJS
• http://paperjs.org/
• http://www.bhivecanvas.com/
• http://fabricjs.com/

保留模式与立即模式

您需要的是retained mode渲染（与immediate mode相对）。

Canvas是立即模式渲染的一个示例，而SVG / VML在保留模式下工作。这意味着一旦你在画布上绘制一些东西，它只是像素，你不能操纵绘制的对象或保存平面光栅图像以外的任何东西。另一方面，SVG保留了您绘制的对象的整个DOM（就像在HTML中一样），您可以轻松地操纵您在那里拥有的所有内容，附加事件，更改颜色，填充样式，在绘制或保存后移动内容等

你仍然可以使用Canvas做你想做的事情，但是你需要一些库来帮助你跟踪正在绘制的所有内容 - 一个在立即模式Canvas API之上提供保留模式作为抽象层的库 - 我之前描述的一些库以这种方式工作，请参阅上面的链接 - 但您仍然可以找到更适合您需求的其他方法。

准备解决方案

查看SVG-edit（或GitHub）项目 - 尤其是the demo和其他projects that use SVG-edit。使用SVG编辑可能是实现目标的最简单方法。