我需要学习什么来构建类似于 LucidChart 的接口答案

【问题标题】：What do I need to learn to build interfaces similar to LucidChart我需要学习什么来构建类似于 LucidChart 的接口
【发布时间】：2011-11-20 07:19:16
【问题描述】：

Here's a link to their demo。基本上，它是一个实现很多 visio 功能的在线工具。

我正在构建一个需要类似类型的用户交互、放置、移动、编辑、调整对象大小、与网格和指南交互等的应用。

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

干杯

【问题讨论】：

【解决方案1】：

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

Sproutcore 和 Cappuccino 用于为 Web 开发桌面风格的应用程序，并包含非常好的用户界面组件。以及维护应用程序状态和数据模型。 ExtJS 有很多这些特性和一个非常好的 UI 工具包，Dojo 也是如此。

我注意到 Lucidchart 也使用 Canvas 绘图 API，因此您需要研究这些东西来进行形状操作和创建灵活的连接。 Mozilla 开发者中心有一些关于画布 API 的好东西。

【讨论】：

【解决方案2】：

我会先看看Raphael library。

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

老实说，编写像您链接的网站这样复杂的东西并不容易，但 Raphael 是开始基础知识的最快方法。

最重要的是，Raphael 甚至与旧版本的 IE 兼容，因此您不必担心只能支持最新的浏览器（当然您可能想做其他确实需要其他浏览器的事情新功能）。

希望对您有所帮助。

【讨论】：

【解决方案3】：

有draw.io，一个非常相似的工具，但来源在github。

【讨论】：