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

Question

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

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

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

干杯

score 6 · Accepted Answer

6

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

于 2013-01-17T13:53:26.073 回答

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

我会先看看Raphael 图书馆。

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

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

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

希望有帮助。

3 回答 3