From a695584d36bb663c2ea074e5b42246627a09b9c1 Mon Sep 17 00:00:00 2001 From: Hannah Li Date: Sun, 6 Nov 2022 20:52:58 -0800 Subject: [PATCH] Bezier-rs: Add a pivot point to the 'rotate' function (#792) * Add function to rotate around a point * Update svg * Improve rotation line-to-center styling * Add second angle of lines Co-authored-by: Keavon Chambers --- libraries/bezier-rs/src/bezier/transform.rs | 6 +++ website/other/bezier-rs-demos/src/App.vue | 2 +- .../other/bezier-rs-demos/wasm/src/bezier.rs | 37 ++++++++++++++++--- .../bezier-rs-demos/wasm/src/svg_drawing.rs | 1 + 4 files changed, 40 insertions(+), 6 deletions(-) diff --git a/libraries/bezier-rs/src/bezier/transform.rs b/libraries/bezier-rs/src/bezier/transform.rs index 8134cb8b..b121b433 100644 --- a/libraries/bezier-rs/src/bezier/transform.rs +++ b/libraries/bezier-rs/src/bezier/transform.rs @@ -90,6 +90,12 @@ impl Bezier { self.apply_transformation(&|point| rotation_matrix.mul_vec2(point)) } + /// Returns a Bezier curve that results from rotating the curve around the provided point by the given angle (in radians). + pub fn rotate_about_point(&self, angle: f64, pivot: DVec2) -> Bezier { + let rotation_matrix = DMat2::from_angle(angle); + self.apply_transformation(&|point| rotation_matrix.mul_vec2(point - pivot) + pivot) + } + /// Returns a Bezier curve that results from translating the curve by the given `DVec2`. pub fn translate(&self, translation: DVec2) -> Bezier { self.apply_transformation(&|point| point + translation) diff --git a/website/other/bezier-rs-demos/src/App.vue b/website/other/bezier-rs-demos/src/App.vue index d71b2d96..655b5cc2 100644 --- a/website/other/bezier-rs-demos/src/App.vue +++ b/website/other/bezier-rs-demos/src/App.vue @@ -409,7 +409,7 @@ export default defineComponent({ }, { name: "Rotate", - callback: (bezier: WasmBezierInstance, options: Record): string => bezier.rotate(options.angle * Math.PI), + callback: (bezier: WasmBezierInstance, options: Record): string => bezier.rotate(options.angle * Math.PI, 100, 100), exampleOptions: { [BezierCurveType.Quadratic]: { sliderOptions: [ diff --git a/website/other/bezier-rs-demos/wasm/src/bezier.rs b/website/other/bezier-rs-demos/wasm/src/bezier.rs index 7a0d979c..387dfd6a 100644 --- a/website/other/bezier-rs-demos/wasm/src/bezier.rs +++ b/website/other/bezier-rs-demos/wasm/src/bezier.rs @@ -380,10 +380,9 @@ impl WasmBezier { wrap_svg_tag(content) } - // TODO: add support for rotating around point - pub fn rotate(&self, angle: f64) -> String { + pub fn rotate(&self, angle: f64, pivot_x: f64, pivot_y: f64) -> String { let original_bezier_svg = self.get_bezier_path(); - let rotated_bezier = self.0.rotate(angle); + let rotated_bezier = self.0.rotate_about_point(angle, DVec2::new(pivot_x, pivot_y)); let empty_string = String::new(); let mut rotated_bezier_svg = String::new(); rotated_bezier.to_svg( @@ -391,9 +390,37 @@ impl WasmBezier { CURVE_ATTRIBUTES.to_string().replace(BLACK, RED), empty_string.clone(), empty_string.clone(), - empty_string.clone(), + empty_string, ); - wrap_svg_tag(format!("{original_bezier_svg}{rotated_bezier_svg}")) + let pivot = draw_circle(pivot_x, pivot_y, 3., GRAY, 1.5, WHITE); + + // Line between pivot and start point on curve + let original_dashed_line_start = format!( + r#""#, + self.0.start().x, + self.0.start().y + ); + let rotated_dashed_line_start = format!( + r#""#, + rotated_bezier.start().x, + rotated_bezier.start().y + ); + + // Line between pivot and end point on curve + let original_dashed_line_end = format!( + r#""#, + self.0.end().x, + self.0.end().y + ); + let rotated_dashed_line_end = format!( + r#""#, + rotated_bezier.end().x, + rotated_bezier.end().y + ); + + wrap_svg_tag(format!( + "{original_bezier_svg}{rotated_bezier_svg}{pivot}{original_dashed_line_start}{rotated_dashed_line_start}{original_dashed_line_end}{rotated_dashed_line_end}" + )) } fn intersect(&self, curve: &Bezier, error: Option) -> Vec { diff --git a/website/other/bezier-rs-demos/wasm/src/svg_drawing.rs b/website/other/bezier-rs-demos/wasm/src/svg_drawing.rs index 8f07c649..cb758b61 100644 --- a/website/other/bezier-rs-demos/wasm/src/svg_drawing.rs +++ b/website/other/bezier-rs-demos/wasm/src/svg_drawing.rs @@ -8,6 +8,7 @@ pub const WHITE: &str = "white"; pub const GRAY: &str = "gray"; pub const RED: &str = "red"; pub const ORANGE: &str = "orange"; +pub const PINK: &str = "pink"; pub const GREEN: &str = "green"; pub const NONE: &str = "none";