用 rust 構建可視化網絡圖

在本文中，將向你介紹一個非常棒的小部件 egui_graphs，它允許你使用 Rust 和 egui 庫輕鬆呈現複雜的網絡圖。

介紹 egui_graphs

Egui_graphs 是一個建立在流行的 egui 庫之上的圖形可視化實現。該項目即將推出第一個穩定版本，旨在通過提供易於集成、可定製的圖形可視化小部件來擴展 egui 的可視化功能。

egui_graphs 的主要特性包括：

例子

新建一個 Rust 項目：

cargo new egui_graphs_example

在 Cargo.toml 文件中加入以下依賴庫：

[dependencies]
egui_graphs = "0.0.20"
egui = "0.21.0"
eframe = "0.21.3"

然後在 src/main.rs 中寫入代碼：

步驟 1：定義 ExampleApp 結構體

首先，讓我們定義 ExampleApp 結構體，它將保存圖形元素和配置。結構體包含一個字段：elements，用於存儲圖的節點和邊。

use egui_graphs::Elements;

pub struct ExampleApp {
    elements: Elements,
}

步驟 2：實現 new() 函數

接下來，爲 ExampleApp 結構體實現 new() 函數。這個函數使用 generate_graph() 輔助函數生成圖形元素。

use eframe::CreationContext;

impl ExampleApp {
    fn new(_: &CreationContext<'_>) -> Self {
        let elements = generate_graph();
        Self { elements }
    }
}

步驟 3：生成圖形元素

實現上面代碼中的 generate_graph() 輔助函數，用於初始化圖的節點和邊。在本例中，我們創建了 5 個具有獨特位置的節點和連接它們的邊。

use std::collections::HashMap;
use egui_graphs::{Elements, Node, Edge};

fn generate_graph() -> Elements {
    let mut nodes = HashMap::new();
    nodes.insert(0, Node::new(0, egui::Vec2::new(-50., 0.)));
    nodes.insert(1, Node::new(1, egui::Vec2::new(50., 0.)));
    nodes.insert(2, Node::new(2, egui::Vec2::new(-25., 60.)));
    nodes.insert(3, Node::new(3, egui::Vec2::new(25., 60.)));
    nodes.insert(4, Node::new(4, egui::Vec2::new(0., -30.)));  

    let mut edges = HashMap::new();
    edges.insert((0, 1), vec![Edge::new(0, 1, 0)]);
    edges.insert((1, 2), vec![Edge::new(1, 2, 0)]);
    edges.insert((2, 4), vec![Edge::new(2, 4, 0)]);
    edges.insert((4, 3), vec![Edge::new(4, 3, 0)]);
    edges.insert((3, 0), vec![Edge::new(3, 0, 0)]);  

    edges.insert((2, 0), vec![Edge::new(2, 0, 0)]); 
    edges.insert((0, 4), vec![Edge::new(0, 4, 0)]);
    edges.insert((4, 1), vec![Edge::new(4, 1, 0)]);
    edges.insert((1, 3), vec![Edge::new(1, 3, 0)]);
    edges.insert((3, 2), vec![Edge::new(3, 2, 0)]);      

    Elements::new(nodes, edges)
}

步驟 4：實現 update() 函數

現在，爲 ExampleApp 實現 App 特徵的 update() 函數。該函數創建一個包含圖形元素的 GraphView 小部件，並使用 ui.add() 函數將其添加到中央面板。

impl App for ExampleApp {
    fn update(&mut self, ctx: &egui::Context, _: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            ui.add(GraphView::new(&self.elements));
        });
    }
}

步驟 5：運行應用程序

最後，使用帶有指定的 native 選項和 ExampleApp 參數的 run_native() 函數運行應用程序。

fn main() {
    let native_options = eframe::NativeOptions::default();
    run_native(
        "egui_graphs_basic_demo",
        native_options,
        Box::new(|cc| Box::new(ExampleApp::new(cc))),
    )
    .unwrap();
}

執行 cargo run，結果如圖：

你可以通過修改設置或根據需要添加更多節點和邊來進一步定製圖的外觀和行爲。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/yKneqPdBPXpyawVVvRR4JQ

猜你喜歡