Bezier-rs: Convert intersection functions to SVG (#791)
* Break handle of path being drawn by placing anchor on previous anchor with Pen tool (#814) * Break path by placing anchor on previous one * Fix offset on click without dragging * Fix bug where ids reassigned from saved document * Fix stuck overlay Co-authored-by: Keavon Chambers <keavon@keavon.com> * convert intersection functions to svg * fixed nits Co-authored-by: 0HyperCube <78500760+0HyperCube@users.noreply.github.com> Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Jackie Chen
Keavon Chambers
parent
16afe91944
commit
4483e98f21
|
|
@ -27,7 +27,7 @@
|
|||
import { defineComponent, markRaw } from "vue";
|
||||
|
||||
import { WasmBezier } from "@/../wasm/pkg";
|
||||
import { drawBezier, drawCircleSector, drawCurve, drawLine, drawPoint, getContextFromCanvas, COLORS } from "@/utils/drawing";
|
||||
import { drawBezier, drawCircleSector, drawLine, drawPoint, getContextFromCanvas, COLORS } from "@/utils/drawing";
|
||||
import { BezierCurveType, CircleSector, Point, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
|
||||
|
||||
import BezierExamplePane from "@/components/BezierExamplePane.vue";
|
||||
|
|
@ -43,6 +43,14 @@ const tSliderOptions = {
|
|||
variable: "t",
|
||||
};
|
||||
|
||||
const tErrorOptions = {
|
||||
variable: "error",
|
||||
min: 0.1,
|
||||
max: 2,
|
||||
step: 0.1,
|
||||
default: 0.5,
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -288,6 +296,66 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Intersect (Line Segment)",
|
||||
callback: (bezier: WasmBezierInstance): string => {
|
||||
const line = [
|
||||
[150, 150],
|
||||
[20, 20],
|
||||
];
|
||||
return bezier.intersect_line_segment(line);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Intersect (Quadratic)",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => {
|
||||
const quadratic = [
|
||||
[20, 80],
|
||||
[180, 10],
|
||||
[90, 120],
|
||||
];
|
||||
return bezier.intersect_quadratic_segment(quadratic, options.error);
|
||||
},
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
sliderOptions: [tErrorOptions],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Intersect (Cubic)",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => {
|
||||
const cubic = [
|
||||
[40, 20],
|
||||
[100, 40],
|
||||
[40, 120],
|
||||
[175, 140],
|
||||
];
|
||||
return bezier.intersect_cubic_segment(cubic, options.error);
|
||||
},
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
sliderOptions: [tErrorOptions],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Intersect (Self)",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.intersect_self(options.error),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
sliderOptions: [tErrorOptions],
|
||||
},
|
||||
[BezierCurveType.Cubic]: {
|
||||
customPoints: [
|
||||
[160, 180],
|
||||
[170, 10],
|
||||
[30, 90],
|
||||
[180, 140],
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
features: [
|
||||
{
|
||||
|
|
@ -334,116 +402,6 @@ export default defineComponent({
|
|||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Intersect (Line Segment)",
|
||||
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
|
||||
const context = getContextFromCanvas(canvas);
|
||||
const line = [
|
||||
{ x: 150, y: 150 },
|
||||
{ x: 20, y: 20 },
|
||||
];
|
||||
const mappedLine = line.map((p) => [p.x, p.y]);
|
||||
drawLine(context, line[0], line[1], COLORS.NON_INTERACTIVE.STROKE_1);
|
||||
const intersections: Float64Array = bezier.intersect_line_segment(mappedLine);
|
||||
intersections.forEach((t: number) => {
|
||||
const p = JSON.parse(bezier.evaluate_value(t));
|
||||
drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Intersect (Quadratic Segment)",
|
||||
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
|
||||
const context = getContextFromCanvas(canvas);
|
||||
const points = [
|
||||
{ x: 20, y: 80 },
|
||||
{ x: 180, y: 10 },
|
||||
{ x: 90, y: 120 },
|
||||
];
|
||||
const mappedPoints = points.map((p) => [p.x, p.y]);
|
||||
drawCurve(context, points, COLORS.NON_INTERACTIVE.STROKE_1, 1);
|
||||
const intersections: Float64Array = bezier.intersect_quadratic_segment(mappedPoints, options.error);
|
||||
intersections.forEach((t: number) => {
|
||||
const p = JSON.parse(bezier.evaluate_value(t));
|
||||
drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
|
||||
});
|
||||
},
|
||||
template: markRaw(SliderExample),
|
||||
templateOptions: {
|
||||
sliders: [
|
||||
{
|
||||
variable: "error",
|
||||
min: 0.1,
|
||||
max: 2,
|
||||
step: 0.1,
|
||||
default: 0.5,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Intersect (Cubic Segment)",
|
||||
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
|
||||
const context = getContextFromCanvas(canvas);
|
||||
const points = [
|
||||
{ x: 40, y: 20 },
|
||||
{ x: 100, y: 40 },
|
||||
{ x: 40, y: 120 },
|
||||
{ x: 175, y: 140 },
|
||||
];
|
||||
const mappedPoints = points.map((p) => [p.x, p.y]);
|
||||
drawCurve(context, points, COLORS.NON_INTERACTIVE.STROKE_1, 1);
|
||||
const intersections: Float64Array = bezier.intersect_cubic_segment(mappedPoints, options.error);
|
||||
intersections.forEach((t: number) => {
|
||||
const p = JSON.parse(bezier.evaluate_value(t));
|
||||
drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
|
||||
});
|
||||
},
|
||||
template: markRaw(SliderExample),
|
||||
templateOptions: {
|
||||
sliders: [
|
||||
{
|
||||
variable: "error",
|
||||
min: 0.1,
|
||||
max: 2,
|
||||
step: 0.1,
|
||||
default: 0.5,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Intersect (Self)",
|
||||
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
|
||||
const context = getContextFromCanvas(canvas);
|
||||
const intersections: number[][] = JSON.parse(bezier.intersect_self(options.error));
|
||||
intersections.forEach((tValues: number[]) => {
|
||||
const p = JSON.parse(bezier.evaluate_value(tValues[0]));
|
||||
drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
|
||||
});
|
||||
},
|
||||
template: markRaw(SliderExample),
|
||||
templateOptions: {
|
||||
sliders: [
|
||||
{
|
||||
variable: "error",
|
||||
min: 0.01,
|
||||
max: 1,
|
||||
step: 0.05,
|
||||
default: 0.5,
|
||||
},
|
||||
],
|
||||
},
|
||||
customPoints: {
|
||||
[BezierCurveType.Cubic]: [
|
||||
[160, 180],
|
||||
[170, 10],
|
||||
[30, 90],
|
||||
[180, 140],
|
||||
],
|
||||
},
|
||||
curveDegrees: new Set([BezierCurveType.Cubic]),
|
||||
},
|
||||
{
|
||||
name: "Arcs",
|
||||
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
|
||||
|
|
|
|||
|
|
@ -372,28 +372,102 @@ impl WasmBezier {
|
|||
self.0.intersections(curve, error)
|
||||
}
|
||||
|
||||
pub fn intersect_line_segment(&self, js_points: &JsValue) -> Vec<f64> {
|
||||
pub fn intersect_line_segment(&self, js_points: &JsValue) -> String {
|
||||
let points: [DVec2; 2] = js_points.into_serde().unwrap();
|
||||
let line = Bezier::from_linear_dvec2(points[0], points[1]);
|
||||
self.intersect(&line, None)
|
||||
|
||||
let bezier_curve_svg = self.get_bezier_path();
|
||||
|
||||
let empty_string = String::new();
|
||||
let mut line_svg = String::new();
|
||||
line.to_svg(
|
||||
&mut line_svg,
|
||||
CURVE_ATTRIBUTES.to_string().replace(BLACK, RED),
|
||||
empty_string.clone(),
|
||||
empty_string.clone(),
|
||||
empty_string,
|
||||
);
|
||||
|
||||
let intersections_svg = self
|
||||
.intersect(&line, None)
|
||||
.iter()
|
||||
.map(|intersection_t| {
|
||||
let point = &self.0.evaluate(*intersection_t);
|
||||
draw_circle(point.x, point.y, 4., RED, 1.5, WHITE)
|
||||
})
|
||||
.fold(String::new(), |acc, item| format!("{acc}{item}"));
|
||||
wrap_svg_tag(format!("{bezier_curve_svg}{line_svg}{intersections_svg}"))
|
||||
}
|
||||
|
||||
pub fn intersect_quadratic_segment(&self, js_points: &JsValue, error: f64) -> Vec<f64> {
|
||||
pub fn intersect_quadratic_segment(&self, js_points: &JsValue, error: f64) -> String {
|
||||
let points: [DVec2; 3] = js_points.into_serde().unwrap();
|
||||
let quadratic = Bezier::from_quadratic_dvec2(points[0], points[1], points[2]);
|
||||
self.intersect(&quadratic, Some(error))
|
||||
|
||||
let bezier_curve_svg = self.get_bezier_path();
|
||||
|
||||
let empty_string = String::new();
|
||||
let mut quadratic_svg = String::new();
|
||||
quadratic.to_svg(
|
||||
&mut quadratic_svg,
|
||||
CURVE_ATTRIBUTES.to_string().replace(BLACK, RED),
|
||||
empty_string.clone(),
|
||||
empty_string.clone(),
|
||||
empty_string,
|
||||
);
|
||||
|
||||
let intersections_svg = self
|
||||
.intersect(&quadratic, Some(error))
|
||||
.iter()
|
||||
.map(|intersection_t| {
|
||||
let point = &self.0.evaluate(*intersection_t);
|
||||
draw_circle(point.x, point.y, 4., RED, 1.5, WHITE)
|
||||
})
|
||||
.fold(String::new(), |acc, item| format!("{acc}{item}"));
|
||||
wrap_svg_tag(format!("{bezier_curve_svg}{quadratic_svg}{intersections_svg}"))
|
||||
}
|
||||
|
||||
pub fn intersect_cubic_segment(&self, js_points: &JsValue, error: f64) -> Vec<f64> {
|
||||
pub fn intersect_cubic_segment(&self, js_points: &JsValue, error: f64) -> String {
|
||||
let points: [DVec2; 4] = js_points.into_serde().unwrap();
|
||||
let cubic = Bezier::from_cubic_dvec2(points[0], points[1], points[2], points[3]);
|
||||
self.intersect(&cubic, Some(error))
|
||||
|
||||
let bezier_curve_svg = self.get_bezier_path();
|
||||
|
||||
let empty_string = String::new();
|
||||
let mut cubic_svg = String::new();
|
||||
cubic.to_svg(
|
||||
&mut cubic_svg,
|
||||
CURVE_ATTRIBUTES.to_string().replace(BLACK, RED),
|
||||
empty_string.clone(),
|
||||
empty_string.clone(),
|
||||
empty_string,
|
||||
);
|
||||
|
||||
let intersections_svg = self
|
||||
.intersect(&cubic, Some(error))
|
||||
.iter()
|
||||
.map(|intersection_t| {
|
||||
let point = &self.0.evaluate(*intersection_t);
|
||||
draw_circle(point.x, point.y, 4., RED, 1.5, WHITE)
|
||||
})
|
||||
.fold(String::new(), |acc, item| format!("{acc}{item}"));
|
||||
|
||||
wrap_svg_tag(format!("{bezier_curve_svg}{cubic_svg}{intersections_svg}"))
|
||||
}
|
||||
|
||||
/// The wrapped return type is `Vec<[f64; 2]>`.
|
||||
pub fn intersect_self(&self, error: f64) -> JsValue {
|
||||
let points: Vec<[f64; 2]> = self.0.self_intersections(Some(error));
|
||||
to_js_value(points)
|
||||
pub fn intersect_self(&self, error: f64) -> String {
|
||||
let bezier_curve_svg = self.get_bezier_path();
|
||||
let intersect_self_svg = self
|
||||
.0
|
||||
.self_intersections(Some(error))
|
||||
.iter()
|
||||
.map(|intersection_t| {
|
||||
let point = &self.0.evaluate(intersection_t[0]);
|
||||
draw_circle(point.x, point.y, 4., RED, 1.5, WHITE)
|
||||
})
|
||||
.fold(bezier_curve_svg, |acc, item| format!("{acc}{item}"));
|
||||
|
||||
wrap_svg_tag(intersect_self_svg)
|
||||
}
|
||||
|
||||
pub fn reduce(&self) -> String {
|
||||
|
|
|
|||
Loading…
Reference in New Issue