Drawing App in Rust egui — Painter, Strokes & Undo | Learn egui Ep30
5views
0012:16
T
Taught by Celeste AI - AI Coding Coach
View on YouTubeDescription
Build a freehand drawing app in Rust using egui! In this episode, we create a canvas drawing app with allocate_painter for a custom drawing surface,
click-and-drag input handling for freehand strokes, line_segment rendering with configurable color and width, stroke history with undo and clear, and a
toolbar with color picker and width slider.
Student code: https://github.com/GoCelesteAI/egui_drawing_app
What You'll Learn:
- allocate_painter() for creating a custom drawing canvas
- Sense::click_and_drag() for mouse input detection
- response.dragged_by(PointerButton::Primary) for drag tracking
- response.interact_pointer_pos() for cursor position
- painter.line_segment() for rendering line pairs
- egui::Stroke::new() for color and width configuration
- painter.rect_filled() for dark canvas background
- painter.rect_stroke() with StrokeKind::Outside for canvas border
- Vec for storing completed stroke history
- points.windows(2) for iterating adjacent point pairs
- color_edit_button_rgb() for stroke color picker
- Slider::new() for brush width control (1.0..=20.0)
- Undo with strokes.pop() and Clear with strokes.clear()
- add_enabled() for conditional button activation
- is_drawing state flag for stroke lifecycle management
- Color32::from_rgb() with f32-to-u8 conversion
- TopBottomPanel::top for toolbar layout
- CentralPanel with full-size canvas
- ctx.request_repaint() for smooth drawing
- Neo-tree file browsing in a Rust project
This is Episode 30 of the "Learn egui in Neovim" series — 36 episodes teaching Rust GUI development with egui, all coded in Neovim with Neo-tree.
Chapters:
0:00 Intro
0:12 What We're Building
0:22 Preview: Key Concepts
0:54 Create Project & Dependencies
1:30 main.rs — Window Setup
2:15 app.rs — Stroke Struct
2:50 MyApp Struct & Default
3:30 eframe::App — Toolbar Panel
4:30 Color Picker & Width Slider
5:15 Stroke Counter & Undo/Clear Buttons
6:00 Central Panel — allocate_painter
6:45 Canvas Background & Border
7:15 Drag Input Handling
8:15 Saving Completed Strokes
9:00 Drawing Completed Strokes
9:30 Drawing Current Stroke
10:00 Save & Review Code
10:30 cargo build
11:00 Neo-tree Browse
11:30 App Demo
12:30 Recap
13:10 Next Episode
Tags: rust, egui, drawing app, gui, tutorial, neovim, neo-tree, eframe, painter, canvas, stroke, line_segment, allocate_painter, drag, freehand, undo,
color picker, slider, sense, click_and_drag, custom painting, coding, programming, learn rust, rust gui, desktop app
Hashtags: #rust #egui #drawingapp #gui #neovim #rustlang #coding #tutorial
Tags
rusteguidrawing appguitutorialneovimneo-treeeframepaintercanvasstrokeline_segmentallocate_painterdragfreehand