From a976a8ae3c4857e99c0608a2110e056c5fb71f3a Mon Sep 17 00:00:00 2001 From: ThatsNoMoon Date: Sat, 4 Jun 2022 09:31:28 -0600 Subject: [PATCH] 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 64571d36c4..04b0847b4b 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.