Rust 与 egui 联手打造:下一代图形可视化神器 egui_graphs

文摘   2024-07-11 16:57   江苏  

"Rust 与 egui 联手打造:下一代图形可视化神器 'egui_graphs'"

前言

egui 作为一个灵活的图形用户界面库,为 Rust 带来了易于使用的 GUI 解决方案。结合 Rust 的强大功能和 egui 的用户友好性,egui_graphs 项目应运而生,旨在提供一个强大且易于扩展的图形可视化工具。

egui_graphs

使用 Rust、petgraph[1]egui[2] 实现的图形可视化。

2023年4月28日23:14:38的截图

该项目为 egui 框架实现了一个控件,使得在 Rust 中轻松实现交互式图形的可视化成为可能。目标是在 egui 中实现一个非常基础的图形可视化引擎,它可以被轻松扩展和定制以满足您的需求。

  • [x] 可视化任何复杂图形;
  • [x] 缩放和平移;
  • [x] 节点和边的标签;
  • [x] 节点和边的交互和事件报告:点击、双击、选择、拖动;
  • [x] 通过 egui 上下文样式进行样式配置;
  • [x] 通过 egui 上下文样式支持深色/浅色主题;
  • [x] 事件报告,以便用户通过处理它们来扩展图形功能;

状态

该项目正朝着稳定版本 v1.0.0 发展。目前,仍有可能发布破坏性更新。

特性

事件

可以通过 events 特性启用。事件描述了图形中发生的变更,无论是缩放级别变化还是节点拖动。

结合自定义节点绘制功能,允许根据发生的事件实现自定义节点行为和绘制。

Egui crates 特性支持

持久性

要使用 egui 的 persistence 特性,您需要启用此 crate 的 egui_persistence 特性。例如:

egui_graphs = { version = "0", features = ["egui_persistence"]}
egui = {version="0.23", features = ["persistence"]}

示例

基本设置示例

步骤 1: 设置 BasicApp 结构体。

首先,定义将包含图形的 BasicApp 结构体。

pub struct BasicApp {
    g: Graph<(), (), Directed>,
}

步骤 2: 实现 new() 函数。

接下来,为 BasicApp 结构体实现 new() 函数。

impl BasicApp {
    fn new(_: &CreationContext<'_>) -> Self {
        let g = generate_graph();
        Self { g: Graph::from(&g) }
    }
}

步骤 3: 生成图形。

创建一个名为 generate_graph() 的辅助函数。在这个示例中,我们创建了三个节点,并用三条边以三角形模式连接它们。

fn generate_graph() -> StableGraph<(), (), Directed> {
    let mut g: StableGraph<(), ()> = StableGraph::new();

    let a = g.add_node(());
    let b = g.add_node(());
    let c = g.add_node(());

    g.add_edge(a, b, ());
    g.add_edge(b, c, ());
    g.add_edge(c, a, ());

    g
}

步骤 4: 实现 update() 函数。

现在,为 BasicApp 实现 update() 函数。这个函数创建一个 GraphView 控件,提供对图形的可变引用,并使用 ui.add() 函数将其添加到 egui::CentralPanel

impl App for BasicApp {
    fn update(&mut self, ctx: &Context, _: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            ui.add(&mut GraphView::<
                _,
                _,
                _,
                _,
                DefaultNodeShape,
                DefaultEdgeShape,
            >::new(&mut self.g));
        });
    }
}

步骤 5: 运行应用程序。

最后,使用 run_native() 函数和指定的本地选项以及 BasicApp 来运行应用程序。

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

您可以根据需要进一步自定义图形的外观和行为,通过修改设置或添加更多节点和边。

结语

随着 egui_graphs 的不断发展和完善,我们期待看到它在数据科学、网络分析、游戏开发等多个领域发挥重要作用。这个项目不仅是 Rust 生态系统中的一个创新点,也是对现有图形可视化工具的一次重要补充。

参考资料
[1]

petgraph: https://github.com/petgraph/petgraph

[2]

egui: https://github.com/emilk/egui


编程悟道
自制软件研发、软件商店,全栈,ARTS 、架构,模型,原生系统,后端(Node、React)以及跨平台技术(Flutter、RN).vue.js react.js next.js express koa hapi uniapp Astro
 最新文章