这些绘图应用背后的技术

Question

任何人都可以告诉我http://realtimeboard.com/和http://draw.io/背后的技术是什么？我有兴趣了解并为我的项目开发这样的软件吗？

Answer 1

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

Answer 2

我很确定他们使用的是Canvas 2d（HTML5 API）。 有很多关于绘图oncanvas的教程：

• 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知之甚少，除了它已经过时，适合使用旧浏览器以及Adobe已停止开发以支持HTML。

更新： MxGraph现在是开源的。它现在是一个选项

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