Showcase new Stack widget in bezier_tool example
This commit is contained in:
parent
0c74d26456
commit
8b1c514c38
1 changed files with 35 additions and 18 deletions
|
|
@ -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);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue