Add crisp feature for enabling default quad snapping
This commit is contained in:
Héctor Ramón Jiménez
parent
12ac265694
commit
567b7d9e9f
14 changed files with 184 additions and 138 deletions
|
|
@ -1,4 +1,134 @@
|
|||
//! This example showcases a drawing a quad.
|
||||
use iced::border;
|
||||
use iced::widget::{center, column, slider, text, toggler};
|
||||
use iced::{Center, Color, Element, Shadow, Vector};
|
||||
|
||||
pub fn main() -> iced::Result {
|
||||
iced::run(Example::update, Example::view)
|
||||
}
|
||||
|
||||
struct Example {
|
||||
radius: border::Radius,
|
||||
border_width: f32,
|
||||
shadow: Shadow,
|
||||
snap: bool,
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone, Copy)]
|
||||
#[allow(clippy::enum_variant_names)]
|
||||
enum Message {
|
||||
RadiusTopLeftChanged(f32),
|
||||
RadiusTopRightChanged(f32),
|
||||
RadiusBottomRightChanged(f32),
|
||||
RadiusBottomLeftChanged(f32),
|
||||
BorderWidthChanged(f32),
|
||||
ShadowXOffsetChanged(f32),
|
||||
ShadowYOffsetChanged(f32),
|
||||
ShadowBlurRadiusChanged(f32),
|
||||
SnapToggled(bool),
|
||||
}
|
||||
|
||||
impl Example {
|
||||
fn new() -> Self {
|
||||
Self {
|
||||
radius: border::radius(50),
|
||||
border_width: 0.0,
|
||||
shadow: Shadow {
|
||||
color: Color::from_rgba(0.0, 0.0, 0.0, 0.8),
|
||||
offset: Vector::new(0.0, 8.0),
|
||||
blur_radius: 16.0,
|
||||
},
|
||||
snap: false,
|
||||
}
|
||||
}
|
||||
|
||||
fn update(&mut self, message: Message) {
|
||||
match message {
|
||||
Message::RadiusTopLeftChanged(radius) => {
|
||||
self.radius = self.radius.top_left(radius);
|
||||
}
|
||||
Message::RadiusTopRightChanged(radius) => {
|
||||
self.radius = self.radius.top_right(radius);
|
||||
}
|
||||
Message::RadiusBottomRightChanged(radius) => {
|
||||
self.radius = self.radius.bottom_right(radius);
|
||||
}
|
||||
Message::RadiusBottomLeftChanged(radius) => {
|
||||
self.radius = self.radius.bottom_left(radius);
|
||||
}
|
||||
Message::BorderWidthChanged(width) => {
|
||||
self.border_width = width;
|
||||
}
|
||||
Message::ShadowXOffsetChanged(x) => {
|
||||
self.shadow.offset.x = x;
|
||||
}
|
||||
Message::ShadowYOffsetChanged(y) => {
|
||||
self.shadow.offset.y = y;
|
||||
}
|
||||
Message::ShadowBlurRadiusChanged(s) => {
|
||||
self.shadow.blur_radius = s;
|
||||
}
|
||||
Message::SnapToggled(snap) => {
|
||||
self.snap = snap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn view(&self) -> Element<Message> {
|
||||
let border::Radius {
|
||||
top_left,
|
||||
top_right,
|
||||
bottom_right,
|
||||
bottom_left,
|
||||
} = self.radius;
|
||||
|
||||
let Shadow {
|
||||
offset: Vector { x: sx, y: sy },
|
||||
blur_radius: sr,
|
||||
..
|
||||
} = self.shadow;
|
||||
|
||||
let content = column![
|
||||
quad::CustomQuad::new(
|
||||
200.0,
|
||||
self.radius,
|
||||
self.border_width,
|
||||
self.shadow,
|
||||
self.snap,
|
||||
),
|
||||
text!("Radius: {top_left:.2}/{top_right:.2}/{bottom_right:.2}/{bottom_left:.2}"),
|
||||
slider(1.0..=100.0, top_left, Message::RadiusTopLeftChanged).step(0.01),
|
||||
slider(1.0..=100.0, top_right, Message::RadiusTopRightChanged).step(0.01),
|
||||
slider(1.0..=100.0, bottom_right, Message::RadiusBottomRightChanged)
|
||||
.step(0.01),
|
||||
slider(1.0..=100.0, bottom_left, Message::RadiusBottomLeftChanged)
|
||||
.step(0.01),
|
||||
slider(1.0..=10.0, self.border_width, Message::BorderWidthChanged)
|
||||
.step(0.01),
|
||||
text!("Shadow: {sx:.2}x{sy:.2}, {sr:.2}"),
|
||||
slider(-100.0..=100.0, sx, Message::ShadowXOffsetChanged)
|
||||
.step(0.01),
|
||||
slider(-100.0..=100.0, sy, Message::ShadowYOffsetChanged)
|
||||
.step(0.01),
|
||||
slider(0.0..=100.0, sr, Message::ShadowBlurRadiusChanged)
|
||||
.step(0.01),
|
||||
toggler(self.snap).label("Snap to pixel grid").on_toggle(Message::SnapToggled),
|
||||
]
|
||||
.padding(20)
|
||||
.spacing(20)
|
||||
.max_width(500)
|
||||
.align_x(Center);
|
||||
|
||||
center(content).into()
|
||||
}
|
||||
}
|
||||
|
||||
impl Default for Example {
|
||||
fn default() -> Self {
|
||||
Self::new()
|
||||
}
|
||||
}
|
||||
|
||||
mod quad {
|
||||
use iced::advanced::layout::{self, Layout};
|
||||
use iced::advanced::renderer;
|
||||
|
|
@ -12,6 +142,7 @@ mod quad {
|
|||
radius: border::Radius,
|
||||
border_width: f32,
|
||||
shadow: Shadow,
|
||||
snap: bool,
|
||||
}
|
||||
|
||||
impl CustomQuad {
|
||||
|
|
@ -20,12 +151,14 @@ mod quad {
|
|||
radius: border::Radius,
|
||||
border_width: f32,
|
||||
shadow: Shadow,
|
||||
snap: bool,
|
||||
) -> Self {
|
||||
Self {
|
||||
size,
|
||||
radius,
|
||||
border_width,
|
||||
shadow,
|
||||
snap,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -69,6 +202,7 @@ mod quad {
|
|||
color: Color::from_rgb(1.0, 0.0, 0.0),
|
||||
},
|
||||
shadow: self.shadow,
|
||||
snap: self.snap,
|
||||
},
|
||||
Color::BLACK,
|
||||
);
|
||||
|
|
@ -81,125 +215,3 @@ mod quad {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
use iced::border;
|
||||
use iced::widget::{center, column, slider, text};
|
||||
use iced::{Center, Color, Element, Shadow, Vector};
|
||||
|
||||
pub fn main() -> iced::Result {
|
||||
iced::run(Example::update, Example::view)
|
||||
}
|
||||
|
||||
struct Example {
|
||||
radius: border::Radius,
|
||||
border_width: f32,
|
||||
shadow: Shadow,
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone, Copy)]
|
||||
#[allow(clippy::enum_variant_names)]
|
||||
enum Message {
|
||||
RadiusTopLeftChanged(f32),
|
||||
RadiusTopRightChanged(f32),
|
||||
RadiusBottomRightChanged(f32),
|
||||
RadiusBottomLeftChanged(f32),
|
||||
BorderWidthChanged(f32),
|
||||
ShadowXOffsetChanged(f32),
|
||||
ShadowYOffsetChanged(f32),
|
||||
ShadowBlurRadiusChanged(f32),
|
||||
}
|
||||
|
||||
impl Example {
|
||||
fn new() -> Self {
|
||||
Self {
|
||||
radius: border::radius(50),
|
||||
border_width: 0.0,
|
||||
shadow: Shadow {
|
||||
color: Color::from_rgba(0.0, 0.0, 0.0, 0.8),
|
||||
offset: Vector::new(0.0, 8.0),
|
||||
blur_radius: 16.0,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
fn update(&mut self, message: Message) {
|
||||
match message {
|
||||
Message::RadiusTopLeftChanged(radius) => {
|
||||
self.radius = self.radius.top_left(radius);
|
||||
}
|
||||
Message::RadiusTopRightChanged(radius) => {
|
||||
self.radius = self.radius.top_right(radius);
|
||||
}
|
||||
Message::RadiusBottomRightChanged(radius) => {
|
||||
self.radius = self.radius.bottom_right(radius);
|
||||
}
|
||||
Message::RadiusBottomLeftChanged(radius) => {
|
||||
self.radius = self.radius.bottom_left(radius);
|
||||
}
|
||||
Message::BorderWidthChanged(width) => {
|
||||
self.border_width = width;
|
||||
}
|
||||
Message::ShadowXOffsetChanged(x) => {
|
||||
self.shadow.offset.x = x;
|
||||
}
|
||||
Message::ShadowYOffsetChanged(y) => {
|
||||
self.shadow.offset.y = y;
|
||||
}
|
||||
Message::ShadowBlurRadiusChanged(s) => {
|
||||
self.shadow.blur_radius = s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn view(&self) -> Element<Message> {
|
||||
let border::Radius {
|
||||
top_left,
|
||||
top_right,
|
||||
bottom_right,
|
||||
bottom_left,
|
||||
} = self.radius;
|
||||
|
||||
let Shadow {
|
||||
offset: Vector { x: sx, y: sy },
|
||||
blur_radius: sr,
|
||||
..
|
||||
} = self.shadow;
|
||||
|
||||
let content = column![
|
||||
quad::CustomQuad::new(
|
||||
200.0,
|
||||
self.radius,
|
||||
self.border_width,
|
||||
self.shadow
|
||||
),
|
||||
text!("Radius: {top_left:.2}/{top_right:.2}/{bottom_right:.2}/{bottom_left:.2}"),
|
||||
slider(1.0..=100.0, top_left, Message::RadiusTopLeftChanged).step(0.01),
|
||||
slider(1.0..=100.0, top_right, Message::RadiusTopRightChanged).step(0.01),
|
||||
slider(1.0..=100.0, bottom_right, Message::RadiusBottomRightChanged)
|
||||
.step(0.01),
|
||||
slider(1.0..=100.0, bottom_left, Message::RadiusBottomLeftChanged)
|
||||
.step(0.01),
|
||||
slider(1.0..=10.0, self.border_width, Message::BorderWidthChanged)
|
||||
.step(0.01),
|
||||
text!("Shadow: {sx:.2}x{sy:.2}, {sr:.2}"),
|
||||
slider(-100.0..=100.0, sx, Message::ShadowXOffsetChanged)
|
||||
.step(0.01),
|
||||
slider(-100.0..=100.0, sy, Message::ShadowYOffsetChanged)
|
||||
.step(0.01),
|
||||
slider(0.0..=100.0, sr, Message::ShadowBlurRadiusChanged)
|
||||
.step(0.01),
|
||||
]
|
||||
.padding(20)
|
||||
.spacing(20)
|
||||
.max_width(500)
|
||||
.align_x(Center);
|
||||
|
||||
center(content).into()
|
||||
}
|
||||
}
|
||||
|
||||
impl Default for Example {
|
||||
fn default() -> Self {
|
||||
Self::new()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue