我需要学习如何构建类似于LucidChart的接口

Question

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

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

由于该项目是出于我自己的学习目的,我想知道我应该关注的一些事情或者学习如何开发这样的高质量接口

干杯

Answer 1

有draw.io,一个非常相似的工具,但github上有源.

Answer 2

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

• 芽核
• 卡布奇诺
• 扩展JS
• 道场
• jQuery用户界面

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

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