这些绘图应用程序背后的技术[关闭]

Question

谁能告诉我http://realtimeboard.com/ 和http://draw.io/ 背后的技术是什么？我有兴趣学习并为我的项目开发这样的软件吗？

Answer 1

我很确定他们使用 Canvas 2d (HTML5 API)。 有大量关于在画布上绘制的教程：

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial
• http://www.html5canvastutorials.com/

这里有一些关于画布绘制的库：

• http://www.jquery4u.com/javascript/10-cool-javascript-drawing-canvas-libraries/
• http://fabricjs.com/ - Fabric.js 是一个强大而简单的 Javascript HTML5 画布库
• http://kineticjs.com/ - 企业级交互式网络图形

选择绘图库时不要着急。

---

更新：

• realtimeboard.com 似乎仅基于 Shockwave Flash，请参阅这段代码： <div id="realtimeboardApp"><object type="application/x-shockwave-flash" id="rtbLoader"></object></div>。这个我就不多说了。

• draw.io 源代码： <div class="geDiagramContainer"><svg shape-rendering="optimizeSpeed" >[...]</svg></div> <div class="geOutlineContainer"><svg style="[....] min-width: 3251px; min-height: 2768px;">...</svg></div> 似乎仅基于 SVG，但是，它仍然包含一些 SWF flash 对象，可能作为旧浏览器和 Internet Explorer 的后备机制。

在 draw.io 网站上，我可以识别以下库：

• http://www.jgraph.com/mxgraph.html（正如 Yuryi 所说），一个专有的 JavaScript 绘图库，许可证费用在 3800 欧元 - 25000 欧元之间；
• http://www.mathjax.org/，用于显示数学公式的开源库。

我对 Flash 了解不多，只知道它已经过时，适用于旧版浏览器，而且 Adob​​e 已停止开发以支持 HTML。

更新： MxGraph 现在是开源的。现在是一种选择

结论： 尽管 SVG 似乎是一个很好的技术解决方案，但考虑到我的代码的成本和许可限制，mxGraph 对我来说不是一个选择。 如果您想要一个绘图库，请查看我之前的建议，或者在 http://www.farinspace.com/top-svg-javascript-libraries-worth-looking-at/ 寻找 SVG 绘图库。

Answer 2

不熟悉 realtimeboard，但 draw.io 是通过工作流库 MXGRAPH 制作的：http://www.jgraph.com/mxgraph.html 您可以申请试用版，有文档、论坛、示例项目等。我们在我们的应用程序中使用它，它非常棒。