Web Chart 入門（5-1）：draw2d 框架整體介紹與優劣勢分析

什麼是 draw2d？

draw2d touch 是純 JavaScript 圖形應用框架，基於 jQuery + Raphael，底層兼容 VML/SVG/HTML Canvas，支持 IE6+ 及主流現代瀏覽器，用於構建跨平台瀏覽器端圖形編輯器（如流程圖、UML、拓撲圖）。

注意：同名的 Eclipse SWT 繪圖庫（Java 桌面端）與此無關。

獲取途徑

• 官網：https://www.draw2d.org
• 文檔與示例：JSdoc 示例
• 商業授權：499 歐元；試用版 4 歐元（無免費開源版）。

核心優勢（特性）

1. 豐富基本圖形：矩形、菱形、三角形、圓、橢圓、直線、曲線、箭頭線等。
2. 交互操作完善：單擊、雙擊、選中、拖拽、連線（Port 連接）開箱即用。
3. 內置圖表組件：餅圖、走勢圖等基本圖表形狀。
4. 撤銷/重做機制：命令模式實現操作歷史管理。

主要不足（缺失特性）

1. 無右鍵上下文菜單：需自行擴展實現。
2. 佈局功能弱：僅提供針對複合圖形內部的 Layout，缺乏頁面級自動佈局（如樹形、力導向圖自動排版）。

技術棧總結

• 核心依賴：jQuery、Raphael
• 底層渲染：SVG（現代瀏覽器）、VML（舊 IE）、Canvas（可選）
• 架構模式：命令模式、觀察者模式、擴展機制（extend）

適用場景建議

適合：需快速構建可視化建模工具、流程設計器、拓撲編輯器的 Web 應用。
不適合：單純圖表展示（ECharts/Highcharts 更輕量）、複雜自動佈局需求（需集成 dagre/GraphLib 等佈局庫）。