📸
egui を使って画像を差し替え、再描画させる
はじめに
本記事は前回の egui というクレートを使って外部の画像を表示させる記事の続編です。
Github 上の png ファイルを表示させ、さらにそれを再描画(他の画像に差し替える)をやっていければと思います。
下準備
ここは前回とほとんど同じですが、
今回は、ランダムな id を生成して、それを使用して再度画像を取得し、描画したいと思いますので、
rand
クレートを追加しておきます。
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"] }
rand = "0.8.5"
rand
でランダムな数字を生成する時に参考とした記事です。
画像の取得、再描画
コードを以下のようにしてみました。
main.rs
use rand::Rng;
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::new(MyApp { id: 1 })
}),
)
}
#[derive(Default)]
struct MyApp {
id: usize,
}
impl eframe::App for MyApp {
fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
egui::CentralPanel::default().show(ctx, |ui| {
let img_url = format!("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/{}.png", self.id);
ui.add(egui::Image::new(img_url).sense(egui::Sense::click()));
if ui.button("change pokemon").clicked() {
self.id = rand::thread_rng().gen_range(1..=1025)
}
});
}
}
画像下部にボタンを配置し、クリックイベントを発火させます。
そして、前述したrand
を使って、ランダムな数字を生成して id を変更するといった処理になります。
gen_range()
メソッドを使用することで、限定した数字を生成することができます。
ポケモンの全国図鑑の最小値は11、最大値は1025であることから数字を絞り込んでいます。
cargo runを実行後すると・・
このように、最近のパルデア地方のポケモンにも差し替えが可能です。
おわりに
画像の差し替え、再描画を実装しようとした時、
複雑な処理を入れないと実現出来ないと思っていましたが、意外にも?簡単に実装することができます。
思考したポイントは、初期値どうするか、ランダムな数字の生成、再描画の方法等でしたので、
比較的悩まずに実装できたと思います。
これらの内容は、egui を使った他の実装でも役立つところもあるかと思いますので、ぜひご参考に。
では!
Discussion