Showcase new Stack widget in bezier_tool example

This commit is contained in:
Héctor Ramón Jiménez 2024-04-25 01:40:06 +02:00
parent 0c74d26456
commit 8b1c514c38
No known key found for this signature in database
GPG key ID: 7CC46565708259A7

View file

@ -1,9 +1,11 @@
//! This example showcases an interactive `Canvas` for drawing Bézier curves. //! This example showcases an interactive `Canvas` for drawing Bézier curves.
use iced::widget::{button, column, text}; use iced::alignment;
use iced::{Alignment, Element, Length}; use iced::widget::{button, container, stack};
use iced::{Element, Length, Theme};
pub fn main() -> iced::Result { pub fn main() -> iced::Result {
iced::program("Bezier Tool - Iced", Example::update, Example::view) iced::program("Bezier Tool - Iced", Example::update, Example::view)
.theme(|_| Theme::CatppuccinMocha)
.antialiasing(true) .antialiasing(true)
.run() .run()
} }
@ -35,16 +37,18 @@ impl Example {
} }
fn view(&self) -> Element<Message> { fn view(&self) -> Element<Message> {
column![ container(stack![
text("Bezier tool example").width(Length::Shrink).size(50),
self.bezier.view(&self.curves).map(Message::AddCurve), self.bezier.view(&self.curves).map(Message::AddCurve),
button("Clear") container(
.style(button::danger) button("Clear")
.on_press(Message::Clear), .style(button::danger)
] .on_press(Message::Clear)
)
.padding(10)
.width(Length::Fill)
.align_x(alignment::Horizontal::Right),
])
.padding(20) .padding(20)
.spacing(20)
.align_items(Alignment::Center)
.into() .into()
} }
} }
@ -139,22 +143,24 @@ mod bezier {
&self, &self,
state: &Self::State, state: &Self::State,
renderer: &Renderer, renderer: &Renderer,
_theme: &Theme, theme: &Theme,
bounds: Rectangle, bounds: Rectangle,
cursor: mouse::Cursor, cursor: mouse::Cursor,
) -> Vec<Geometry> { ) -> Vec<Geometry> {
let content = let content =
self.state.cache.draw(renderer, bounds.size(), |frame| { self.state.cache.draw(renderer, bounds.size(), |frame| {
Curve::draw_all(self.curves, frame); Curve::draw_all(self.curves, frame, theme);
frame.stroke( frame.stroke(
&Path::rectangle(Point::ORIGIN, frame.size()), &Path::rectangle(Point::ORIGIN, frame.size()),
Stroke::default().with_width(2.0), Stroke::default()
.with_width(2.0)
.with_color(theme.palette().text),
); );
}); });
if let Some(pending) = state { if let Some(pending) = state {
vec![content, pending.draw(renderer, bounds, cursor)] vec![content, pending.draw(renderer, theme, bounds, cursor)]
} else { } else {
vec![content] vec![content]
} }
@ -182,7 +188,7 @@ mod bezier {
} }
impl Curve { impl Curve {
fn draw_all(curves: &[Curve], frame: &mut Frame) { fn draw_all(curves: &[Curve], frame: &mut Frame, theme: &Theme) {
let curves = Path::new(|p| { let curves = Path::new(|p| {
for curve in curves { for curve in curves {
p.move_to(curve.from); p.move_to(curve.from);
@ -190,7 +196,12 @@ mod bezier {
} }
}); });
frame.stroke(&curves, Stroke::default().with_width(2.0)); frame.stroke(
&curves,
Stroke::default()
.with_width(2.0)
.with_color(theme.palette().text),
);
} }
} }
@ -204,6 +215,7 @@ mod bezier {
fn draw( fn draw(
&self, &self,
renderer: &Renderer, renderer: &Renderer,
theme: &Theme,
bounds: Rectangle, bounds: Rectangle,
cursor: mouse::Cursor, cursor: mouse::Cursor,
) -> Geometry { ) -> Geometry {
@ -213,7 +225,12 @@ mod bezier {
match *self { match *self {
Pending::One { from } => { Pending::One { from } => {
let line = Path::line(from, cursor_position); let line = Path::line(from, cursor_position);
frame.stroke(&line, Stroke::default().with_width(2.0)); frame.stroke(
&line,
Stroke::default()
.with_width(2.0)
.with_color(theme.palette().text),
);
} }
Pending::Two { from, to } => { Pending::Two { from, to } => {
let curve = Curve { let curve = Curve {
@ -222,7 +239,7 @@ mod bezier {
control: cursor_position, control: cursor_position,
}; };
Curve::draw_all(&[curve], &mut frame); Curve::draw_all(&[curve], &mut frame, theme);
} }
}; };
} }