From 20b58e0214abf090ad90e6c9fd4a32f41fa88eb1 Mon Sep 17 00:00:00 2001 From: ThatsNoMoon Date: Fri, 3 Jun 2022 15:34:51 -0600 Subject: [PATCH 1/5] fix arc_to Fixed `path::Builder::arc_to` to behave the same as [HTML5's `arcTo`] ( https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-arcto ). --- graphics/src/widget/canvas/path/builder.rs | 48 ++++++++++++++++++---- 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/graphics/src/widget/canvas/path/builder.rs b/graphics/src/widget/canvas/path/builder.rs index 05316d8a68..6561c393ba 100644 --- a/graphics/src/widget/canvas/path/builder.rs +++ b/graphics/src/widget/canvas/path/builder.rs @@ -42,23 +42,57 @@ impl Builder { /// Adds a circular arc to the [`Path`] with the given control points and /// radius. /// - /// The arc is connected to the previous point by a straight line, if - /// necessary. + /// This essentially draws two straight line segments, from the current + /// position to `a`, and from `a` to `b`, but smooths out the corner by + /// fitting a circular arc of `radius` tangent to both segments. pub fn arc_to(&mut self, a: Point, b: Point, radius: f32) { use lyon::{math, path}; - let a = math::Point::new(a.x, a.y); + let start = self.raw.current_position(); + let mid = math::Point::new(a.x, a.y); + let end = math::Point::new(b.x, b.y); - if self.raw.current_position() != a { - let _ = self.raw.line_to(a); + if start == mid || mid == end || radius == 0.0 { + let _ = self.raw.line_to(end); + return; } + let double_area = start.x * (mid.y - end.y) + + mid.x * (end.y - start.y) + + end.x * (start.y - mid.y); + + if double_area == 0.0 { + let _ = self.raw.line_to(end); + return; + } + + let to_start = (start - mid).normalize(); + let to_end = (end - mid).normalize(); + + let inner_angle = to_start.dot(to_end).acos(); + + let origin_angle = inner_angle / 2.0; + + let origin_adjacent = radius / origin_angle.tan(); + + let arc_start = mid + to_start * origin_adjacent; + let arc_end = mid + to_end * origin_adjacent; + + let sweep = to_start.cross(to_end) < 0.0; + + let _ = self.raw.line_to(arc_start); + self.raw.arc_to( math::Vector::new(radius, radius), math::Angle::radians(0.0), - path::ArcFlags::default(), - math::Point::new(b.x, b.y), + path::ArcFlags { + large_arc: false, + sweep, + }, + arc_end, ); + + let _ = self.raw.line_to(end); } /// Adds an ellipse to the [`Path`] using a clockwise direction. From 53d93a37dd2b0604897ef3cac9de5acb601ed230 Mon Sep 17 00:00:00 2001 From: ThatsNoMoon Date: Sat, 4 Jun 2022 09:31:28 -0600 Subject: [PATCH 2/5] fix another discrepancy with HTML5 arcTo HTML5's arcTo does not draw a line from the end of the arc to `b`, so this should not either. --- graphics/src/widget/canvas/path/builder.rs | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/graphics/src/widget/canvas/path/builder.rs b/graphics/src/widget/canvas/path/builder.rs index 6561c393ba..88acf54407 100644 --- a/graphics/src/widget/canvas/path/builder.rs +++ b/graphics/src/widget/canvas/path/builder.rs @@ -42,9 +42,16 @@ impl Builder { /// Adds a circular arc to the [`Path`] with the given control points and /// radius. /// - /// This essentially draws two straight line segments, from the current - /// position to `a`, and from `a` to `b`, but smooths out the corner by - /// fitting a circular arc of `radius` tangent to both segments. + /// This essentially draws a straight line segment from the current + /// position to `a`, but fits a circular arc of `radius` tangent to that + /// segment and tangent to the line between `a` and `b`. + /// + /// With another `.line_to(b)`, the result will be a path connecting the + /// starting point and `b` with straight line segments towards `a` and a + /// circular arc smoothing out the corner at `a`. + /// + /// See [the HTML5 specification of `arcTo`](https://html.spec.whatwg.org/multipage/canvas.html#building-paths:dom-context-2d-arcto) + /// for more details and examples. pub fn arc_to(&mut self, a: Point, b: Point, radius: f32) { use lyon::{math, path}; @@ -53,7 +60,7 @@ impl Builder { let end = math::Point::new(b.x, b.y); if start == mid || mid == end || radius == 0.0 { - let _ = self.raw.line_to(end); + let _ = self.raw.line_to(mid); return; } @@ -62,7 +69,7 @@ impl Builder { + end.x * (start.y - mid.y); if double_area == 0.0 { - let _ = self.raw.line_to(end); + let _ = self.raw.line_to(mid); return; } @@ -91,8 +98,6 @@ impl Builder { }, arc_end, ); - - let _ = self.raw.line_to(end); } /// Adds an ellipse to the [`Path`] using a clockwise direction. From 4b8ae71b6311f0e4906e445f099a3fdaf4623212 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Sun, 10 Jul 2022 15:15:29 +0200 Subject: [PATCH 3/5] Add and purify `arc` example by @ThatsNoMoon --- Cargo.toml | 1 + examples/pure/arc/Cargo.toml | 9 +++ examples/pure/arc/README.md | 14 ++++ examples/pure/arc/src/main.rs | 126 ++++++++++++++++++++++++++++++++++ style/src/theme/palette.rs | 10 +-- 5 files changed, 155 insertions(+), 5 deletions(-) create mode 100644 examples/pure/arc/Cargo.toml create mode 100644 examples/pure/arc/README.md create mode 100644 examples/pure/arc/src/main.rs diff --git a/Cargo.toml b/Cargo.toml index 0b886c4ab6..9d90ca0dc3 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -90,6 +90,7 @@ members = [ "examples/tour", "examples/url_handler", "examples/websocket", + "examples/pure/arc", "examples/pure/component", "examples/pure/counter", "examples/pure/game_of_life", diff --git a/examples/pure/arc/Cargo.toml b/examples/pure/arc/Cargo.toml new file mode 100644 index 0000000000..22113cf1cb --- /dev/null +++ b/examples/pure/arc/Cargo.toml @@ -0,0 +1,9 @@ +[package] +name = "arc" +version = "0.1.0" +authors = ["ThatsNoMoon "] +edition = "2021" +publish = false + +[dependencies] +iced = { path = "../../..", features = ["pure", "canvas", "tokio", "debug"] } diff --git a/examples/pure/arc/README.md b/examples/pure/arc/README.md new file mode 100644 index 0000000000..4cf99efb49 --- /dev/null +++ b/examples/pure/arc/README.md @@ -0,0 +1,14 @@ +## arc_to + +An application that uses the `Canvas` widget to draw a rotating arc. + +This is a simple demo for https://github.com/iced-rs/iced/pull/1358. + +The __[`main`]__ file contains all the code of the example. + +You can run it with `cargo run`: +``` +cargo run --package arc_to +``` + +[`main`]: src/main.rs diff --git a/examples/pure/arc/src/main.rs b/examples/pure/arc/src/main.rs new file mode 100644 index 0000000000..38b3f502f0 --- /dev/null +++ b/examples/pure/arc/src/main.rs @@ -0,0 +1,126 @@ +use std::{f32::consts::PI, time::Instant}; + +use iced::executor; +use iced::pure::widget::canvas::{ + self, Cache, Canvas, Cursor, Geometry, Path, Stroke, +}; +use iced::pure::{Application, Element}; +use iced::{ + Color, Command, Length, Point, Rectangle, Settings, Subscription, Theme, +}; + +pub fn main() -> iced::Result { + Arc::run(Settings { + antialiasing: true, + ..Settings::default() + }) +} + +struct Arc { + start: Instant, + cache: Cache, +} + +#[derive(Debug, Clone, Copy)] +enum Message { + Tick, +} + +impl Application for Arc { + type Executor = executor::Default; + type Message = Message; + type Theme = Theme; + type Flags = (); + + fn new(_flags: ()) -> (Self, Command) { + ( + Arc { + start: Instant::now(), + cache: Default::default(), + }, + Command::none(), + ) + } + + fn title(&self) -> String { + String::from("Arc - Iced") + } + + fn update(&mut self, _: Message) -> Command { + self.cache.clear(); + + Command::none() + } + + fn subscription(&self) -> Subscription { + iced::time::every(std::time::Duration::from_millis(10)) + .map(|_| Message::Tick) + } + + fn view(&self) -> Element { + Canvas::new(self) + .width(Length::Fill) + .height(Length::Fill) + .into() + } + + fn theme(&self) -> Theme { + Theme::Dark + } +} + +impl canvas::Program for Arc { + type State = (); + + fn draw( + &self, + _state: &Self::State, + theme: &Theme, + bounds: Rectangle, + _cursor: Cursor, + ) -> Vec { + let geometry = self.cache.draw(bounds.size(), |frame| { + let center = frame.center(); + let radius = frame.width().min(frame.height()) / 5.0; + + let start = Point::new(center.x, center.y - radius); + + let angle = (self.start.elapsed().as_millis() % 10_000) as f32 + / 10_000.0 + * 2.0 + * PI; + + let end = Point::new( + center.x + radius * angle.cos(), + center.y + radius * angle.sin(), + ); + + let circles = Path::new(|b| { + b.circle(start, 10.0); + b.move_to(end); + b.circle(end, 10.0); + }); + + frame.fill(&circles, Color::WHITE); + + let path = Path::new(|b| { + b.move_to(start); + b.arc_to(center, end, 50.0); + b.line_to(end); + }); + + let palette = theme.palette(); + + frame.stroke( + &path, + Stroke { + color: palette.text, + width: 10.0, + ..Stroke::default() + }, + ); + }); + + vec![geometry] + } +} diff --git a/style/src/theme/palette.rs b/style/src/theme/palette.rs index cb8bb6e69c..81aa9cc7d2 100644 --- a/style/src/theme/palette.rs +++ b/style/src/theme/palette.rs @@ -5,11 +5,11 @@ use palette::{FromColor, Hsl, Mix, RelativeContrast, Srgb}; #[derive(Debug, Clone, Copy, PartialEq)] pub struct Palette { - background: Color, - text: Color, - primary: Color, - success: Color, - danger: Color, + pub background: Color, + pub text: Color, + pub primary: Color, + pub success: Color, + pub danger: Color, } impl Palette { From 1454bcda4cf37f5d92c6034800eae2fc0aeb88ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Sun, 10 Jul 2022 15:18:06 +0200 Subject: [PATCH 4/5] Fix `README` or `arc` example --- examples/pure/arc/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/pure/arc/README.md b/examples/pure/arc/README.md index 4cf99efb49..303253da6f 100644 --- a/examples/pure/arc/README.md +++ b/examples/pure/arc/README.md @@ -1,4 +1,4 @@ -## arc_to +## Arc An application that uses the `Canvas` widget to draw a rotating arc. @@ -8,7 +8,7 @@ The __[`main`]__ file contains all the code of the example. You can run it with `cargo run`: ``` -cargo run --package arc_to +cargo run --package arc ``` [`main`]: src/main.rs From 3a26a8ccd4c406b4b3f0d5c6d2863d0613798f01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Sun, 10 Jul 2022 15:23:51 +0200 Subject: [PATCH 5/5] Use `Palette` consistently in `arc` example --- examples/pure/arc/src/main.rs | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/examples/pure/arc/src/main.rs b/examples/pure/arc/src/main.rs index 38b3f502f0..df0e1e8a2c 100644 --- a/examples/pure/arc/src/main.rs +++ b/examples/pure/arc/src/main.rs @@ -5,9 +5,7 @@ use iced::pure::widget::canvas::{ self, Cache, Canvas, Cursor, Geometry, Path, Stroke, }; use iced::pure::{Application, Element}; -use iced::{ - Color, Command, Length, Point, Rectangle, Settings, Subscription, Theme, -}; +use iced::{Command, Length, Point, Rectangle, Settings, Subscription, Theme}; pub fn main() -> iced::Result { Arc::run(Settings { @@ -80,6 +78,8 @@ impl canvas::Program for Arc { _cursor: Cursor, ) -> Vec { let geometry = self.cache.draw(bounds.size(), |frame| { + let palette = theme.palette(); + let center = frame.center(); let radius = frame.width().min(frame.height()) / 5.0; @@ -101,7 +101,7 @@ impl canvas::Program for Arc { b.circle(end, 10.0); }); - frame.fill(&circles, Color::WHITE); + frame.fill(&circles, palette.text); let path = Path::new(|b| { b.move_to(start); @@ -109,8 +109,6 @@ impl canvas::Program for Arc { b.line_to(end); }); - let palette = theme.palette(); - frame.stroke( &path, Stroke {