fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-10 18:30:55 +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/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}")
}