Rust の GUI ライブラリ egui で外部の画像を表示させる

はじめに

Rust の GUI ライブラリの egui を使って外部の画像表示をするところをやってみました。
egui は eframe というフレームワークで動作し、Rust で GUI アプリケーションを簡単に構築することができます。

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

今回は、egui で外部リンクを実行して、
ポケモンの画像をそのまま取得して、表示させるところをやってみます。
（外部APIから取得した画像の表示も確認可能です。）
https://github.com/PokeAPI/sprites

下準備

egui を動作させるために、必要なクレート群を追加していきます。
eframe、egui等を追加します。
バージョン等は必要に応じて変更いただければと思います。

Cargo.toml

[dependencies]
eframe = "0.27.2"
egui = "0.27.2"
egui_extras = { version = "0.27.2", features = ["default", "all_loaders"] }
image = { version = "0.25.1", features = ["jpeg", "png"] }

画像表示

コードは以下のように記述してみました。
Box::<MyApp>::default()あたりは公式のサンプルコードではうまく動作しなかったため、公式通りではありません。

main.rs

fn main() -> Result<(), eframe::Error> {
    let options = eframe::NativeOptions {
        viewport: egui::ViewportBuilder::default().with_inner_size([600.0, 800.0]),
        ..Default::default()
    };

    eframe::run_native(
        "Pokemon Viewer",
        options,
        Box::new(|cc| {
            egui_extras::install_image_loaders(&cc.egui_ctx);
            Box::<MyApp>::default()
        }),
    )
}

#[derive(Default)]
struct MyApp {}

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            let id = 778;
            let img_url = format!("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/{id}.png");
            egui::ScrollArea::both().show(ui, |ui| ui.add(egui::Image::new(img_url)))
        });
    }
}

cargo runを実行後すると・・

このように egui のミニアプリケーションが起動し、Github リポジトリから取得してきた png形式の画像を表示させることができました。

パオジアンはかっけええ。

おわりに

今回は簡単でしたが、egui で画像表示の記事でした。
egui は触っててもとても楽しいですし、何よりもサンプルコードが充実している点が初心者に優しいですね。

以上、では。