jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Convert reduce() and offset() Bezier-rs wasm demo functions to render as SVG (#783) 

* convert reduce and offset wasm func to return svg

* address comments
This commit is contained in:
Thomas Cheng 2022-10-05 23:54:02 -04:00 committed by Keavon Chambers
parent 55f6d13daf
commit dccff784c5
3 changed files with 75 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
libraries/bezier-rs/src/bezier/core.rs
View File

@ -177,10 +177,18 @@ impl Bezier {
/// Appends to the `svg` mutable string with an SVG shape representation that includes the curve, the handle lines, the anchors, and the handles.
pub fn to_svg(&self, svg: &mut String, curve_attributes: String, anchor_attributes: String, handle_attributes: String, handle_line_attributes: String) {
self.curve_to_svg(svg, curve_attributes);
self.handle_lines_to_svg(svg, handle_line_attributes);
self.anchors_to_svg(svg, anchor_attributes);
self.handles_to_svg(svg, handle_attributes);
if !curve_attributes.is_empty() {
self.curve_to_svg(svg, curve_attributes);
}
if !handle_line_attributes.is_empty() {
self.handle_lines_to_svg(svg, handle_line_attributes);
}
if !anchor_attributes.is_empty() {
self.anchors_to_svg(svg, anchor_attributes);
}
if !handle_attributes.is_empty() {
self.handles_to_svg(svg, handle_attributes);
}
}
/// Returns true if the corresponding points of the two `Bezier`s are within the provided absolute value difference from each other.

59
website/other/bezier-rs-demos/src/App.vue
View File

@ -267,6 +267,27 @@ export default defineComponent({
},
},
},
{
name: "Reduce",
callback: (bezier: WasmBezierInstance): string => bezier.reduce(),
},
{
name: "Offset",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.offset(options.distance),
exampleOptions: {
[BezierCurveType.Quadratic]: {
sliderOptions: [
{
variable: "distance",
min: -50,
max: 50,
step: 1,
default: 20,
},
],
},
},
},
],
features: [
{
@ -423,16 +444,6 @@ export default defineComponent({
},
curveDegrees: new Set([BezierCurveType.Cubic]),
},
{
name: "Reduce",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
const context = getContextFromCanvas(canvas);
const curves: Point[][] = JSON.parse(bezier.reduce());
curves.forEach((points, index) => {
drawBezier(context, points, null, { curveStrokeColor: `hsl(${40 * index}, 100%, 50%)`, radius: 3.5, drawHandles: false });
});
},
},
{
name: "Arcs",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
@ -484,34 +495,6 @@ export default defineComponent({
],
},
},
{
name: "Offset",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
const context = getContextFromCanvas(canvas);
const curves: Point[][] = JSON.parse(bezier.offset(options.distance));
curves.forEach((points, index) => {
if (points.length === 2) {
drawLine(context, points[0], points[1], `hsl(${40 * index}, 100%, 50%)`);
} else {
drawCurve(context, points, `hsl(${40 * index}, 100%, 50%)`);
}
});
drawPoint(context, curves[0][0], 4, "hsl(0, 100%, 50%)");
drawPoint(context, curves[curves.length - 1][curves[0].length - 1], 4, `hsl(${40 * (curves.length - 1)}, 100%, 50%)`);
},
template: markRaw(SliderExample),
templateOptions: {
sliders: [
{
variable: "distance",
min: -50,
max: 50,
step: 1,
default: 20,
},
],
},
},
],
subpathFeatures: [
{

49
website/other/bezier-rs-demos/wasm/src/bezier.rs
View File

@ -396,15 +396,50 @@ impl WasmBezier {
to_js_value(points)
}
pub fn reduce(&self) -> JsValue {
let bezier_points: Vec<Vec<Point>> = self.0.reduce(None).into_iter().map(bezier_to_points).collect();
to_js_value(bezier_points)
pub fn reduce(&self) -> String {
let empty_string = String::new();
let original_curve_svg = self.get_bezier_path();
let bezier_curves_svg: String = self
.0
.reduce(None)
.iter()
.enumerate()
.map(|(idx, bezier_curve)| {
let mut curve_svg = String::new();
bezier_curve.to_svg(
&mut curve_svg,
CURVE_ATTRIBUTES.to_string().replace(BLACK, &format!("hsl({}, 100%, 50%)", (40 * idx))),
empty_string.clone(),
empty_string.clone(),
empty_string.clone(),
);
curve_svg
})
.fold(original_curve_svg, |acc, item| format!("{acc}{item}"));
wrap_svg_tag(bezier_curves_svg)
}
/// The wrapped return type is `Vec<Vec<Point>>`.
pub fn offset(&self, distance: f64) -> JsValue {
let bezier_points: Vec<Vec<Point>> = self.0.offset(distance).into_iter().map(bezier_to_points).collect();
to_js_value(bezier_points)
pub fn offset(&self, distance: f64) -> String {
let empty_string = String::new();
let original_curve_svg = self.get_bezier_path();
let bezier_curves_svg = self
.0
.offset(distance)
.iter()
.enumerate()
.map(|(idx, bezier_curve)| {
let mut curve_svg = String::new();
bezier_curve.to_svg(
&mut curve_svg,
CURVE_ATTRIBUTES.to_string().replace(BLACK, &format!("hsl({}, 100%, 50%)", (40 * idx))),
empty_string.clone(),
empty_string.clone(),
empty_string.clone(),
);
curve_svg
})
.fold(original_curve_svg, |acc, item| format!("{acc}{item}"));
wrap_svg_tag(bezier_curves_svg)
}
/// The wrapped return type is `Vec<CircleSector>`.