fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-08 18:08:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Bezier-rs: Convert 'arcs' wasm function from canvas to SVG rendering (#833)

Browse Source 
* Convert rotate demo to svg

* Fix bugs in rotate

* Fix bugs in rotate

* Draft of decasteljau to svg

* fixed de casteljau points to_svg impl

* clean up wasm impl for de casteljau points

* Use svg format in wasm for arcs

* Update app.vue

* Fix arcs as svg

Co-authored-by: Linda Zheng <ll2zheng@uwaterloo.ca>

* Remove comments

* Reduce code duplication

Co-authored-by: Thomas Cheng <contact.chengthomas@gmail.com>
Co-authored-by: Hannah Li <hannahli2010@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Linda Zheng
2022-11-06 23:04:30 -05:00
committed by Keavon Chambers
co-authored by Linda Zheng Thomas Cheng Hannah Li Keavon Chambers
parent 398f6618e4
commit 9eb2b9f6a3
3 changed files with 93 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/other/bezier-rs-demos/wasm/src/bezier.rs
+19 -12
View File
@@ -545,23 +545,30 @@ impl WasmBezier {
}
/// The wrapped return type is `Vec<CircleSector>`.
pub fn arcs(&self, error: f64, max_iterations: usize, maximize_arcs: WasmMaximizeArcs) -> JsValue {
pub fn arcs(&self, error: f64, max_iterations: usize, maximize_arcs: WasmMaximizeArcs) -> String {
let original_curve_svg = self.get_bezier_path();
// Get sectors
let strategy = convert_wasm_maximize_arcs(maximize_arcs);
let options = ArcsOptions { error, max_iterations, strategy };
let circle_sectors: Vec<CircleSector> = self
let arcs_svg = self
.0
.arcs(options)
.iter()
.map(|sector| CircleSector {
center: Point {
x: sector.center.x,
y: sector.center.y,
},
radius: sector.radius,
start_angle: sector.start_angle,
end_angle: sector.end_angle,
.enumerate()
.map(|(idx, sector)| {
draw_sector(
sector.center.x,
sector.center.y,
sector.radius,
-sector.start_angle,
-sector.end_angle,
format!("hsl({}, 100%, 50%, 75%)", (40 * idx)).as_str(),
1.,
format!("hsl({}, 100%, 50%, 37.5%)", (40 * idx)).as_str(),
)
})
.collect();
to_js_value(circle_sectors)
.fold(original_curve_svg, |acc, item| format!("{acc}{item}"));
wrap_svg_tag(arcs_svg)
}
}
website/other/bezier-rs-demos/wasm/src/svg_drawing.rs
+18
View File
@@ -35,3 +35,21 @@ pub fn draw_circle(x_pos: f64, y_pos: f64, radius: f64, stroke: &str, stroke_wid
pub fn draw_line(start_x: f64, start_y: f64, end_x: f64, end_y: f64, stroke: &str, stroke_width: f64) -> String {
format!(r#"<line x1="{start_x}" y1="{start_y}" x2="{end_x}" y2="{end_y}" stroke="{stroke}" stroke-width="{stroke_width}"/>"#)
}
// Helper function to convert polar to cartesian coordinates
fn polar_to_cartesian(center_x: f64, center_y: f64, radius: f64, angle_in_rad: f64) -> [f64; 2] {
let x = center_x + radius * angle_in_rad.cos();
let y = center_y + radius * -angle_in_rad.sin();
[x, y]
}
// Helper function to create an SVG drawing of a sector
pub fn draw_sector(center_x: f64, center_y: f64, radius: f64, start_angle: f64, end_angle: f64, stroke: &str, stroke_width: f64, fill: &str) -> String {
let [start_x, start_y] = polar_to_cartesian(center_x, center_y, radius, start_angle);
let [end_x, end_y] = polar_to_cartesian(center_x, center_y, radius, end_angle);
// draw sector with fill color
let sector_svg = format!(r#"<path d="M {start_x} {start_y} A {radius} {radius} 0 0 1 {end_x} {end_y} L {center_x} {center_y} L {start_x} {start_y} Z" stroke="none" fill="{fill}" />"#);
// draw arc with stroke color
let arc_svg = format!(r#"<path d="M {start_x} {start_y} A {radius} {radius} 0 0 1 {end_x} {end_y}" stroke="{stroke}" stroke-width="{stroke_width}" fill="none"/>"#);
format!("{sector_svg}{arc_svg}")
}