javascript - 使用 JavaScript 自由手绘

Question

除了 HTML5 画布，还有哪些方案可以在 JavaScript 中实现徒手绘图？

我曾尝试使用 HTML5 画布，但没有成功，因为我在保存画布和文本时遇到了问题。此外，画布只能保存为图像。但我需要将它保存为我可以打开并再次绘制和编辑文本的格式。

Answer 1

更新： 现在，在您向问题添加更多信息后，我知道您为什么不想使用画布（您仍然可以使用画布，但使用的方式与以前不同，但您可能更喜欢应用程序的另一种方法 - 请参阅以下）。人们已投票关闭您的答案，这意味着在重新打开之前无法发布新答案，因此我将尝试更新我的答案。我也投票决定重新提出你的问题。

在 JavaScript 选项中绘图

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

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

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

浏览器支持

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

• 使用 SVG 或 VML（或使用 SVG/VML 的库，如 Raphaël）
• 使用实现画布的东西（例如在 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/

保留模式与立即模式

您需要的是保留模式渲染（与立即模式相反）。

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

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

一个现成的解决方案

看看SVG-edit（或GitHub 上的）项目——尤其是使用 SVG-edit的演示和其他项目。使用 SVG-edit 可能是实现目标的最简单方法。