您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

Draw2D 核心設計解析：輕量級圖形框架的架構模式與實作精髓

編輯：Java 相關知識

前言：Draw2D 在 GEF/Eclipse 生態系中的定位

Draw2D 是 Eclipse GEF（Graphical Editing Framework）的繪圖渲染層，一個建構在 SWT Composite 之上的輕量級圖形元件系統。它不處理編輯邏輯（由 GEF 負責），專注於模型的視覺化呈現：佈局管理、連線路由、圖形渲染、事件分派。理解 Draw2D 的設計模式，是開發基於 Eclipse 的圖形化編輯器、建模工具、流程圖編輯器的關鍵。

Hello World：最小啟動範例

import org.eclipse.swt.widgets.*;
import org.eclipse.swt.SWT;
import org.eclipse.draw2d.*;

public class HelloWorld {
    public static void main(String[] args) {
        Shell shell = new Shell();
        shell.setText("Draw2D Hello World");
        shell.open();

        LightweightSystem lws = new LightweightSystem(shell);
        IFigure label = new Label("Hello World");
        lws.setContents(label);

        Display display = Display.getDefault();
        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) display.sleep();
        }
    }
}

關鍵三件事：Shell（SWT 視窗）→ LightweightSystem（橋接器）→ IFigure（根圖形）。

核心架構組件

LightweightSystem：調度中樞

持有 Canvas（SWT 繪圖面）引用
註冊為 Canvas 的事件監聽器（滑鼠、鍵盤、繪圖、大小變更）
內含 EventDispatcher：將 SWT 事件轉換為 Draw2D 事件，分派給目標 IFigure
內含 UpdateManager：管理重繪區域（損壞區域合併、雙緩衝、非同步重繪）
持有 RootFigure：佔滿 Canvas、背景色決定畫布底色、樹狀結構根節點，唯一子節點為應用程式內容（setContents() 設定）

IFigure 與 Figure：圖形抽象與基礎實作

IFigure：介面，定義繪圖（paint()）、佈局（LayoutManager）、事件處理、父子關係、座標轉換等契約
Figure：IFigure 預設實作，採用 Composite 模式，支援任意深度巢狀
所有座標為 int，無浮點數（像素精確、效能考量、避免抗鋸齒模糊）
僅提供顯示功能，無編輯行為（編輯由 GEF 的 EditPart、EditPolicy 實現）

三大核心設計模式深度應用

1. MVC 模式：模型與視圖的嚴格分離

Draw2D 大量使用「模型－視圖」分離，但刻意不包含控制器：

Figure = View：負責渲染模型狀態
Model = 應用定義的資料物件：如圖形屬性、連線拓撲、業務資料
Controller = GEF 責任：EditPart 扮演控制器，同步模型變更到 Figure，處理使用者互動修改模型

經典範例：RangeModel 與 ScrollBar

RangeModel：介面，封裝 min/max/value/extent/increment，可註冊監聽器
ScrollBar（Figure）：持有 RangeModel，註冊為監聽器
使用者拖曳 ScrollBar → 更新 Model → Model 通知所有監聽器（含 ScrollBar 自身）→ ScrollBar 重繪
外部程式修改 Model → Model 通知 ScrollBar → ScrollBar 同步顯示
雙向綁定、單一資料源，完美體現 MVC 精髓

2. Composite 模式：圖形樹狀結構

IFigure = Component 抽象
Figure = Composite 實作，含 List children，實作 add/remove/getChildren()
葉子節點：Label、RectangleFigure、Polyline 等
容器節點：Panel、Toolbar、Viewport、ScrollPane 等
統一介面操作單一物件與組合物件，遞歸繪圖、佈局、事件分派
應用程式只有一個根內容節點（RootFigure 的唯一子節點），整個場景為一棵樹

3. Observer 模式：事件驅動與資料同步

Java 內建 EventListenerList、EventObject 支援
Figure 可觸發事件（FigureEvent、MouseEvent 等），監聽器註冊/移除
RangeModel、Viewport、LayoutManager 皆為可觀察主體
GEF 的 EditPart 大量註冊為 Figure/Model 監聽器，實現雙向同步

關鍵子系統介紹

佈局管理

LayoutManager 介面，Figure.setLayoutManager() 設定
內建：XYLayout（絕對座標）、FlowLayout、ToolbarLayout、BorderLayout、StackLayout、GridLayout
佈局演算法與 Figure 分離，符合 Strategy 模式

連線與路由

Connection、ConnectionAnchor、ConnectionRouter（ManhattanRouter、FanRouter、ShortestPathRouter）
錨點決定連線端點位置（ChopboxAnchor、FixedAnchor），路由器計算折線路徑
支援連線端點拖曳、自動重新路由

視口與捲動

Viewport：可捲動視窗，內含水平/垂直 RangeModel，對應兩個 ScrollBar
ScrollPane：組合 Viewport + 兩個 ScrollBar 的便利容器
視口內容超出可視區時自動啟用捲動條，模型變更即時同步

更新管理與雙緩衝

UpdateManager：收集損壞區域（Rectangle），合併重疊區域，排程重繪
支援雙緩衝（BufferedImage），減少閃爍
非同步重繪：事件執行緒快速返回，繪圖在 UI 執行緒批次處理

Draw2D 與 GEF 的協作關係

層級	框架	核心類別	職責
模型	應用自定	Domain Model (EMF/POJO)	業務資料、拓撲關係、屬性
控制器	GEF	EditPart, EditPolicy, Command	模型↔視圖同步、編輯行為、Undo/Redo
視圖	Draw2D	Figure, LayoutManager, UpdateManager	渲染、佈局、事件分派、捲動、連線
平台	SWT/JFace	Canvas, Display, Shell	原生視窗、圖形上下文、事件迴路

結語

Draw2D 以輕量級、模式驅動、純視圖三大特徵，構建了極具擴展性的圖形渲染基礎設施。其對 Composite、MVC、Observer 三大模式的教科書級應用，配合精心設計的佈局、連線、視口、更新子系統，使開發者能專注於領域模型與編輯邏輯（GEF 層），而無需重造繪圖輪子。掌握 Draw2D 核心架構，是開發高品質 Eclipse 圖形化工具的必修課。