我需要学习什么来建立类似于LucidChart的界面

Question

这是他们的演示链接。基本上，它是一个实现了很多视觉功能的在线工具。

我正在构建一个应用程序，它需要类似类型的用户交互，删除，移动，编辑，调整对象大小，与网格和参考线交互等。

由于这个项目是为了我自己的学习目的，我想知道我应该关注或学习哪些东西才能开发出如此高质量的界面

欢呼

Answer 1

这是draw。Io，一个非常类似的工具，但是源代码在github上。

Answer 2

构建如此丰富的用户界面是一项艰巨的任务。这就是为什么有很多框架和库已经开发了丰富的用户界面，比如:

• Sproutcore
• 卡布奇诺
• ExtJS
Dojo
• jQuery UI

Sproutcore和Cappuccino用于为web开发桌面风格的应用程序，并包含非常好的用户界面组件。以及维护应用程序状态和数据模型。ExtJS有很多这样的特性和一个非常好的UI工具包，Dojo也是。 我注意到Lucidchart也使用了Canvas绘图API，所以这是你需要研究的形状操作和创建灵活连接的东西。Mozilla Developer Center有一些关于canvas API的好东西

Answer 3

我将从拉斐尔库开始。

它允许你编写非常简单的Javascript代码来在浏览器中绘制图形元素，包括非常简单的动画和可拖动/可点击的界面。

老实说，写一个像你链接到的网站那样复杂的东西是不容易的，但是Raphael是最快捷的入门方法。

最重要的是，Raphael甚至兼容旧版本的IE，所以你不必担心只能支持最新的浏览器(当然你可能想做其他需要其他新功能的事情)。

希望对你有帮助。