|
| 1 | +//! This example showcases a drawing a quad. |
| 2 | +mod quad { |
| 3 | + use iced_native::layout::{self, Layout}; |
| 4 | + use iced_native::renderer; |
| 5 | + use iced_native::widget::{self, Widget}; |
| 6 | + use iced_native::{Color, Element, Length, Point, Rectangle, Size}; |
| 7 | + |
| 8 | + pub struct CustomQuad { |
| 9 | + size: f32, |
| 10 | + radius: [f32; 4], |
| 11 | + border_width: f32, |
| 12 | + } |
| 13 | + |
| 14 | + impl CustomQuad { |
| 15 | + pub fn new(size: f32, radius: [f32; 4], border_width: f32) -> Self { |
| 16 | + Self { |
| 17 | + size, |
| 18 | + radius, |
| 19 | + border_width, |
| 20 | + } |
| 21 | + } |
| 22 | + } |
| 23 | + |
| 24 | + impl<Message, Renderer> Widget<Message, Renderer> for CustomQuad |
| 25 | + where |
| 26 | + Renderer: renderer::Renderer, |
| 27 | + { |
| 28 | + fn width(&self) -> Length { |
| 29 | + Length::Shrink |
| 30 | + } |
| 31 | + |
| 32 | + fn height(&self) -> Length { |
| 33 | + Length::Shrink |
| 34 | + } |
| 35 | + |
| 36 | + fn layout( |
| 37 | + &self, |
| 38 | + _renderer: &Renderer, |
| 39 | + _limits: &layout::Limits, |
| 40 | + ) -> layout::Node { |
| 41 | + layout::Node::new(Size::new(self.size, self.size)) |
| 42 | + } |
| 43 | + |
| 44 | + fn draw( |
| 45 | + &self, |
| 46 | + _state: &widget::Tree, |
| 47 | + renderer: &mut Renderer, |
| 48 | + _theme: &Renderer::Theme, |
| 49 | + _style: &renderer::Style, |
| 50 | + layout: Layout<'_>, |
| 51 | + _cursor_position: Point, |
| 52 | + _viewport: &Rectangle, |
| 53 | + ) { |
| 54 | + renderer.fill_quad( |
| 55 | + renderer::Quad { |
| 56 | + bounds: layout.bounds(), |
| 57 | + border_radius: self.radius.into(), |
| 58 | + border_width: self.border_width, |
| 59 | + border_color: Color::from_rgb(1.0, 0.0, 0.0), |
| 60 | + }, |
| 61 | + Color::BLACK, |
| 62 | + ); |
| 63 | + } |
| 64 | + } |
| 65 | + |
| 66 | + impl<'a, Message, Renderer> From<CustomQuad> for Element<'a, Message, Renderer> |
| 67 | + where |
| 68 | + Renderer: renderer::Renderer, |
| 69 | + { |
| 70 | + fn from(circle: CustomQuad) -> Self { |
| 71 | + Self::new(circle) |
| 72 | + } |
| 73 | + } |
| 74 | +} |
| 75 | + |
| 76 | +use iced::widget::{column, container, slider, text}; |
| 77 | +use iced::{Alignment, Element, Length, Sandbox, Settings}; |
| 78 | + |
| 79 | +pub fn main() -> iced::Result { |
| 80 | + Example::run(Settings::default()) |
| 81 | +} |
| 82 | + |
| 83 | +struct Example { |
| 84 | + radius: [f32; 4], |
| 85 | + border_width: f32, |
| 86 | +} |
| 87 | + |
| 88 | +#[derive(Debug, Clone, Copy)] |
| 89 | +#[allow(clippy::enum_variant_names)] |
| 90 | +enum Message { |
| 91 | + RadiusTopLeftChanged(f32), |
| 92 | + RadiusTopRightChanged(f32), |
| 93 | + RadiusBottomRightChanged(f32), |
| 94 | + RadiusBottomLeftChanged(f32), |
| 95 | + BorderWidthChanged(f32), |
| 96 | +} |
| 97 | + |
| 98 | +impl Sandbox for Example { |
| 99 | + type Message = Message; |
| 100 | + |
| 101 | + fn new() -> Self { |
| 102 | + Self { |
| 103 | + radius: [50.0; 4], |
| 104 | + border_width: 0.0, |
| 105 | + } |
| 106 | + } |
| 107 | + |
| 108 | + fn title(&self) -> String { |
| 109 | + String::from("Custom widget - Iced") |
| 110 | + } |
| 111 | + |
| 112 | + fn update(&mut self, message: Message) { |
| 113 | + let [tl, tr, br, bl] = self.radius; |
| 114 | + match message { |
| 115 | + Message::RadiusTopLeftChanged(radius) => { |
| 116 | + self.radius = [radius, tr, br, bl]; |
| 117 | + } |
| 118 | + Message::RadiusTopRightChanged(radius) => { |
| 119 | + self.radius = [tl, radius, br, bl]; |
| 120 | + } |
| 121 | + Message::RadiusBottomRightChanged(radius) => { |
| 122 | + self.radius = [tl, tr, radius, bl]; |
| 123 | + } |
| 124 | + Message::RadiusBottomLeftChanged(radius) => { |
| 125 | + self.radius = [tl, tr, br, radius]; |
| 126 | + } |
| 127 | + Message::BorderWidthChanged(width) => { |
| 128 | + self.border_width = width; |
| 129 | + } |
| 130 | + } |
| 131 | + } |
| 132 | + |
| 133 | + fn view(&self) -> Element<Message> { |
| 134 | + let [tl, tr, br, bl] = self.radius; |
| 135 | + |
| 136 | + let content = column![ |
| 137 | + quad::CustomQuad::new(200.0, self.radius, self.border_width), |
| 138 | + text(format!("Radius: {tl:.2}/{tr:.2}/{br:.2}/{bl:.2}")), |
| 139 | + slider(1.0..=100.0, tl, Message::RadiusTopLeftChanged).step(0.01), |
| 140 | + slider(1.0..=100.0, tr, Message::RadiusTopRightChanged).step(0.01), |
| 141 | + slider(1.0..=100.0, br, Message::RadiusBottomRightChanged) |
| 142 | + .step(0.01), |
| 143 | + slider(1.0..=100.0, bl, Message::RadiusBottomLeftChanged) |
| 144 | + .step(0.01), |
| 145 | + slider(1.0..=10.0, self.border_width, Message::BorderWidthChanged) |
| 146 | + .step(0.01), |
| 147 | + ] |
| 148 | + .padding(20) |
| 149 | + .spacing(20) |
| 150 | + .max_width(500) |
| 151 | + .align_items(Alignment::Center); |
| 152 | + |
| 153 | + container(content) |
| 154 | + .width(Length::Fill) |
| 155 | + .height(Length::Fill) |
| 156 | + .center_x() |
| 157 | + .center_y() |
| 158 | + .into() |
| 159 | + } |
| 160 | +} |
0 commit comments