我需要學習如何構建類似於LucidChart的接口

Question

Here's a link to their demo。基本上，它是一個在線工具，可以實現許多Visio功能。

我建立一個應用程序，將需要類似類型的用戶交互，跌落，移動，編輯，調整對象，以網格和參考交互等

由於該項目是我自己的學習目的，我想知道什麼是一些事情我應該注重或學習能夠開發出如此高品質的界面

乾杯

Answer 1

建立這樣一個豐富的用戶界面是一項艱鉅的任務。 這就是爲什麼有很多框架和庫的哪些已經開發豐富的用戶界面的東西，如：

• SproutCore的
• 卡布奇諾
• ExtJS的
• 道場
• jQuery UI的

Sproutcore和卡布奇諾是爲網絡開發桌面風格的應用程序，包括非常好的我們呃界面組件。以及維護應用程序狀態和數據模型。像Dojo一樣，ExtJS有很多這些功能和一個非常好的UI工具包。

Lucidchart我注意到使用Canvas繪圖API，因此您需要查看形狀操作並創建靈活的連接。 Mozilla開發人員中心在畫布API上有一些好東西。

Answer 2

我會先看看Raphael library。

它允許您編寫非常簡單的Javascript代碼來在瀏覽器中繪製圖形元素，包括非常簡單的動畫和可拖動/可點擊的界面。

誠實地說，寫一些與鏈接網站一樣複雜的東西並不容易，但Raphael是開始使用基礎知識的最快捷方式。

最重要的是，拉斐爾甚至可以與舊版本的IE兼容，所以你不必擔心只能夠支持最新的瀏覽器（儘管你可能想要做其他需要的東西其他新功能）。

希望有所幫助。

Answer 3

有draw.io，一個非常類似的工具，但與github來源。