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

JGraph 圖形組件快速上手：核心模型、擴展機制與事件處理實戰

編輯：Java 相關知識

JGraph 簡介

純 Java Swing 圖形組件，支援拖拽、縮放、合併、連線等交互，適合工作流設計器、拓撲圖、組織架構圖等場景。版本分 Free/Pro/Layout Pro，Free 版滿足大多數需求。

核心繪圖模型

概念	對應類	說明
Cell (圖元)	`DefaultGraphCell`	所有圖元基類，可含子 Cell
Vertex (頂點/節點)	`DefaultGraphCell`	業務實體節點，可有鄰接頂點
Edge (邊/連線)	`DefaultEdge`	連接兩個 Port，有源/目標
Port (端口)	`DefaultPort`	Vertex 的子元素，Edge 連接的實際端點

外觀屬性體系 (Map-based)


// 定義 Edge 樣式
Map map = new Hashtable();
GraphConstants.setLineEnd(map, GraphConstants.ARROW_CLASSIC); // 箭頭
GraphConstants.setEndFill(map, true);                          // 實心箭頭
GraphConstants.setLabelAlongEdge(map, true);                   // 標籤沿邊
edge.getAttributes().applyMap(map);

// 畫布屬性
graph.setBackground(Color.decode("#C0C0C0"));
graph.setEditable(false);
graph.setGridEnabled(false);
graph.setPortsVisible(false);

擴展機制：注入業務數據

JGraph 僅負責渲染，**業務數據需自行擴展 Cell 類**持有。


// 頂點擴展
public class WorkflowNode extends DefaultGraphCell {
    private NodeData data; // 業務實體
    public WorkflowNode(NodeData data) {
        this.data = data;
        // 設定顯示文本
        Map attrs = new Hashtable();
        GraphConstants.setLabel(attrs, data.getName());
        getAttributes().applyMap(attrs);
    }
    public NodeData getData() { return data; }
}

// 邊擴展
public class WorkflowEdge extends DefaultEdge {
    private TransitionData data;
    // ...
}

// 端口擴展 (少見)
public class WorkflowPort extends DefaultPort { ... }

關鍵事件處理器擴展點

類別	職責	典型覆寫場景
`BasicMarqueeHandler`	框選、點擊、連線創建、合併等滑鼠交互	自定義連線規則、禁用多選、右鍵選單
`GraphUndoManager`	撤銷/重做管理	整合業務層 Undo、限制步數
`EdgeView.EdgeHandle` (內部類)	邊端點拖拽手柄	限制連接目標類型、吸附對齊、拖拽時即時驗證


// 自定義 MarqueeHandler 範例
public class CustomMarqueeHandler extends BasicMarqueeHandler {
    @Override
    public boolean isConnectable(PortView src, PortView tgt) {
        // 只允許 NodeA → NodeB 方向連線
        return src.getCell() instanceof WorkflowNode && 
               tgt.getCell() instanceof WorkflowNode;
    }
}

// 掛載到 JGraph
graph.setUI(new CustomGraphUI()); // 或 graph.getGraphLayoutCache().setMarqueeHandler(...)

實戰建議

Model-View 分離：業務數據放在擴展 Cell 中，JGraph 僅作 View 渲染。
屬性 Map 統一管理：封裝 `StyleUtil` 工具類，避免硬編碼 `GraphConstants` 散落各處。
大圖效能：關閉抗鋸齒、啟用增量重繪、虛擬化大量節點 (可見區域才創建 Cell)。
序列化持久化：實現 `GraphModel` 序列化或導出 XML/JSON，業務數據與圖形拓撲分離存儲。

總結

JGraph 核心在於 **Cell/Edge/Port 三元模型 + Map 屬性驅動渲染 + Handler 攔截交互**。掌握擴展 Cell 注入業務數據、覆寫 `MarqueeHandler`/`EdgeHandle` 定製交互規則，即可構建專業級圖形編輯器。基本功扎實，方能應對複雜業務變化。