devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

30天拿下Rust之图形编程

作者：盐析白兔 | 2024-04-25 19:02:10

赞

踩

30天拿下rust

概述

        Rust语言以其卓越的安全性、性能和可靠性赢得了广大开发者的青睐，逐渐在系统编程、网络服务、游戏开发等领域崭露头角。随着Rust生态的日益繁荣，图形编程领域也涌现出一批优秀的框架和库，使得用Rust进行高效、安全的图形应用开发成为可能。

图形库对比

        在Rust中，有多个图形库可供选择，其中一些最流行的包括：GTK-rs、Iced、Egui等。这些库提供了与GPU进行交互的接口，封装了底层的图形API，使得开发者能够更轻松地构建图形应用。下面，我们将分别介绍这些图形库。

        GTK-rs：作为GTK的Rust绑定，GTK-rs借助GTK本身的广泛使用和成熟度，提供了跨平台的GUI开发能力。GTK本身在Linux社区尤其流行，因此对于需要在Linux上开发桌面应用的Rust开发者而言，GTK-rs是一个自然的选择。其活跃的社区、良好的文档和稳定的更新，使其保持较高的流行度。

        Iced：Iced以其简洁的API设计、现代的外观和对跨平台的支持受到欢迎。它强调快速、可靠和易于定制，适合开发轻量级到中等复杂度的桌面应用。Iced有着活跃的开发进度、详尽的文档和教程，以及相对较大的用户群体，使其在Rust GUI库中占据显著位置。

        Druid：Druid提供了一个完整的桌面应用程序框架，结合了Egui图形库，强调高性能和自定义能力。虽然可能不如GTK-rs或Iced那么广为人知，但其新颖的设计理念和特定领域的优秀表现吸引了部分开发者关注。

        Egui：Egui是一个即时模式GUI库，以其小巧、易用和跨平台特性受到关注，特别适用于嵌入到游戏和其他应用程序中。Egui的更新频繁，社区活跃度较高，且由于其轻量化和灵活性，可能在某些特定场景下被开发者广泛采用。

        Fltk-rs：Fltk-rs作为FLTK C++ GUI库的Rust绑定，以其小巧的尺寸、高效的性能和易用性著称，特别适合开发轻量级工具软件。其简单快速的开发流程和较小的运行时资源占用，可能会吸引一部分追求简洁和高效的开发者。

GTK-rs库的使用

        GTK-rs是Rust的一个GTK绑定，它使得Rust开发者能够使用GTK库来创建跨平台的图形用户界面。GTK库本身是一个非常流行且功能强大的GUI库，提供了丰富的控件和布局方式。通过使用GTK-rs，Rust开发者可以享受到GTK的便利和强大功能，同时保留Rust语言的类型安全和内存安全特性。

        要使用GTK-rs库，首先，需要在Rust项目中添加GTK-rs的依赖。打开Cargo.toml文件，并添加如下内容。

  1. [dependencies]
  2. gtk = "0.15"

        其次，需要先初始化GTK环境，这通常是在main函数的开始处使用gtk::init()方法完成的。

        接下来，我们可以通过gtk::ApplicationWindow::new()方法创建一个窗口，并设置其标题和默认尺寸。

        GTK-rs库提供了丰富的控件供我们选择，比如：按钮、文本框等。在下面的示例代码中，我们首先创建了一个带有标签的按钮，连接了一个点击事件处理器。当按钮被点击时，它会打印一条消息到控制台。然后，我们将按钮添加到了窗口的内容区域。接下来，我们连接了一个删除事件处理器到窗口。当用户关闭窗口时，这个处理器会被调用，并调用gtk::main_quit来退出事件循环。最后，我们调用gtk::main来启动事件循环。

  1. extern crate gtk;
  2.  
  3. use gtk::prelude::*;
  4.  
  5. fn main() {
  6.     if gtk::init().is_err() {
  7.         println!("Unable to initialize GTK.");
  8.         return;
  9.     } 
  10.   
  11.     let window = gtk::ApplicationWindow::new(None::<&gtk::Application>);
  12.     window.set_title("Demo");
  13.     window.set_default_size(600, 500);
  14.  
  15.     let btn = gtk::Button::new_with_label("Click me");
  16.     btn.connect_clicked(move |_| {
  17.         println!("Button clicked");
  18.     });
  19.   
  20.     let content = window.get_content_area();
  21.     content.add(&btn);
  22.   
  23.     window.connect_delete_event(|_, _| {
  24.         gtk::main_quit();
  25.         Inhibit(true)
  26.     });
  27.  
  28.     window.show_all();
  29.     gtk::main();
  30. }

Iced库的使用

        Iced是一个用于构建跨平台、高性能用户界面的Rust图形库。它采用了Elm架构和反应式编程模型，使得编写声明式、易于推理的UI代码成为可能。Iced提供了一套丰富的widget库，可用于构建复杂的界面，并且支持原生的窗口系统集成，确保应用程序在Windows、macOS、Linux等平台上具有良好的用户体验。

        在Iced库中，引入了一些图像编程相关的基本概念，主要包括：Widgets、Views、Events & Messages、Application Loop。

        Widgets

        Iced中的UI是由一系列可重用的组件（称为widgets）构建起来的。这些组件包括：按钮、文本、输入框、滑块、列表、表格等各种常见UI元素。每个widget都有自己的状态和样式属性，可以响应用户交互并触发事件。

        Views

        在Iced中，View是一个函数，它定义了如何根据应用程序的状态生成特定的UI结构。当状态改变时，View函数会被重新调用，生成新的widget树，这种机制确保了UI总是反映最新的应用程序状态。

        Events & Messages

        用户与UI的交互会产生events，这些事件被传递给应用程序，通常触发状态更新。状态更新通过发送messages来完成，消息是应用程序内部定义的数据结构，用于描述状态变化请求。消息通过update函数处理，并最终导致状态变更和视图重新渲染。

        Application Loop

        Iced应用程序遵循一个典型的工作循环，主要包括以下三个步骤。

        1、Update: 处理传入的消息，更新应用程序状态。

        2、Layout: 根据新的状态计算widget树的布局信息。

        3、Paint: 使用布局信息和样式渲染widget到屏幕。

        要使用Iced库，需要在Rust项目中添加Iced的依赖。打开Cargo.toml文件，并添加如下内容。

  1. [dependencies]
  2. iced = { version = "0.12", features = ["canvas", "tokio", "debug"] }
  3. time = { version = "0.3", features = ["local-offset"] }

        在下面的示例代码中，我们实现了一个图形化的模拟时钟应用程序。该应用具备以下三个核心特性。

        1、实时更新：应用程序每隔500毫秒通过订阅系统触发一次Message::Tick消息，更新当前显示的时间。

        2、自定义外观：在画布（canvas）上绘制模拟时钟，包括：背景色、指针（时针、分针、秒针）及指针宽度。指针长度和旋转角度，与实际时间同步。

        3、响应式布局：时钟容器采用响应式设计，填充其父容器的可用空间，并带有内边距。

  1.  
  2. use iced::executor;
  3. use iced::mouse;
  4. use iced::widget::canvas::{stroke, Cache, Geometry, LineCap, Path, Stroke};
  5. use iced::widget::{canvas, container};
  6. use iced::{
  7.     Application, Color, Command, Element, Length, Point, Rectangle, Renderer,
  8.     Settings, Subscription, Theme, Vector,
  9. };
  10.  
  11. pub fn main() -> iced::Result {
  12.     Clock::run(Settings {
  13.         antialiasing: true,
  14.         ..Settings::default()
  15.     })
  16. }
  17.  
  18. struct Clock {
  19.     now: time::OffsetDateTime,
  20.     clock: Cache,
  21. }
  22.  
  23. #[derive(Debug, Clone, Copy)]
  24. enum Message {
  25.     Tick(time::OffsetDateTime),
  26. }
  27.  
  28. impl Application for Clock {
  29.     type Executor = executor::Default;
  30.     type Message = Message;
  31.     type Theme = Theme;
  32.     type Flags = ();
  33.  
  34.     fn new(_flags: ()) -> (Self, Command<Message>) {
  35.         (
  36.             Clock {
  37.                 now: time::OffsetDateTime::now_local()
  38.                     .unwrap_or_else(|_| time::OffsetDateTime::now_utc()),
  39.                 clock: Cache::default(),
  40.             },
  41.             Command::none(),
  42.         )
  43.     }
  44.  
  45.     fn title(&self) -> String {
  46.         String::from("Clock")
  47.     }
  48.  
  49.     fn update(&mut self, message: Message) -> Command<Message> {
  50.         match message {
  51.             Message::Tick(local_time) => {
  52.                 let now = local_time;
  53.  
  54.                 if now != self.now {
  55.                     self.now = now;
  56.                     self.clock.clear();
  57.                 }
  58.             }
  59.         }
  60.  
  61.         Command::none()
  62.     }
  63.  
  64.     fn view(&self) -> Element<Message> {
  65.         let canvas = canvas(self as &Self)
  66.             .width(Length::Fill)
  67.             .height(Length::Fill);
  68.  
  69.         container(canvas)
  70.             .width(Length::Fill)
  71.             .height(Length::Fill)
  72.             .padding(20)
  73.             .into()
  74.     }
  75.  
  76.     fn subscription(&self) -> Subscription<Message> {
  77.         iced::time::every(std::time::Duration::from_millis(500)).map(|_| {
  78.             Message::Tick(
  79.                 time::OffsetDateTime::now_local()
  80.                     .unwrap_or_else(|_| time::OffsetDateTime::now_utc()),
  81.             )
  82.         })
  83.     }
  84. }
  85.  
  86. impl<Message> canvas::Program<Message> for Clock {
  87.     type State = ();
  88.  
  89.     fn draw(
  90.         &self,
  91.         _state: &Self::State,
  92.         renderer: &Renderer,
  93.         _theme: &Theme,
  94.         bounds: Rectangle,
  95.         _cursor: mouse::Cursor,
  96.     ) -> Vec<Geometry> {
  97.         let clock = self.clock.draw(renderer, bounds.size(), |frame| {
  98.             let center = frame.center();
  99.             let radius = frame.width().min(frame.height()) / 2.0;
  100.  
  101.             let background = Path::circle(center, radius);
  102.             frame.fill(&background, Color::from_rgb8(0x12, 0x93, 0xD8));
  103.  
  104.             let short_hand =
  105.                 Path::line(Point::ORIGIN, Point::new(0.0, -0.5 * radius));
  106.  
  107.             let long_hand =
  108.                 Path::line(Point::ORIGIN, Point::new(0.0, -0.8 * radius));
  109.  
  110.             let width = radius / 100.0;
  111.  
  112.             let thin_stroke = || -> Stroke {
  113.                 Stroke {
  114.                     width,
  115.                     style: stroke::Style::Solid(Color::WHITE),
  116.                     line_cap: LineCap::Round,
  117.                     ..Stroke::default()
  118.                 }
  119.             };
  120.  
  121.             let wide_stroke = || -> Stroke {
  122.                 Stroke {
  123.                     width: width * 3.0,
  124.                     style: stroke::Style::Solid(Color::WHITE),
  125.                     line_cap: LineCap::Round,
  126.                     ..Stroke::default()
  127.                 }
  128.             };
  129.  
  130.             frame.translate(Vector::new(center.x, center.y));
  131.  
  132.             frame.with_save(|frame| {
  133.                 frame.rotate(hand_rotation(self.now.hour(), 12));
  134.                 frame.stroke(&short_hand, wide_stroke());
  135.             });
  136.  
  137.             frame.with_save(|frame| {
  138.                 frame.rotate(hand_rotation(self.now.minute(), 60));
  139.                 frame.stroke(&long_hand, wide_stroke());
  140.             });
  141.  
  142.             frame.with_save(|frame| {
  143.                 frame.rotate(hand_rotation(self.now.second(), 60));
  144.                 frame.stroke(&long_hand, thin_stroke());
  145.             });
  146.         });
  147.  
  148.         vec![clock]
  149.     }
  150. }
  151.  
  152. fn hand_rotation(n: u8, total: u8) -> f32 {
  153.     let turns = n as f32 / total as f32;
  154.  
  155.     2.0 * std::f32::consts::PI * turns
  156. }

        执行该程序后，其运行效果大致如下。

总结

        Rust凭借其安全、高性能的特点，以及逐渐成熟的图形库和生态系统，已成为图形编程领域的一股重要力量，适用于从轻量级GUI应用到高性能游戏引擎的各种图形开发场景。随着社区的发展和新技术的融合，Rust在图形编程领域的影响力有望进一步增强。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/486772
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号