useBezierCurve

Composable for working with Bézier curves.

Configuration

The useBezierCurve function accepts a single configuration object as an argument, where each property has a default value if not provided.

Property	Default	Description
start	{x: 0, y: 0, z: 0}	A vertex representing the starting point of the curve.
c1	{x: 0, y: 0, z: 0}	A vertex representing the first control point.
c2	{x: 0, y: 0, z: 0}	A vertex representing the second control point.
end	{x: 0, y: 0, z: 0}	A vertex representing the ending point of the curve.

extends Primitive Configuration

The following configuration parameters are applicable to all primitive shapes.

Property	Default	Description
position	{ x: 0, y: 0 }	A 2D vector representing the position of the primitive.
rotation	0	The rotation of the primitive (in degrees).
scale	1	The scale factor of the primitive.

Usage

import {useBezierCurve} from 'vuexyz'

const start: Ref<Vertex> = ref({ x: -100, y: -100 })
const c1: Ref<Vertex> = ref({ x: -250, y: 0 })
const c2: Ref<Vertex> = ref({ x: 250, y: 0 })
const end: Ref<Vertex> = ref({ x: 100, y: 100 })

const {vertices, edges, faces} = useBezierCurve({start, c1, c2, end})

Returns

All primitive shapes return the following reactive members:

Property	Type Declaration	Description
vertices	ComputedRef<Vertex[]>	An array of all vertices.
edges	ComputedRef<Edge[]>	An array of all edges.
faces	ComputedRef<Face[]>	An array of all faces.
centroid	ComputedRef<Vertex[]>	The centroid (geometric center) of all vertices.
boundingBox	ComputedRef<BoundingBox>	The bounding box of the primitive, with properties x, y, width, height, maxX and maxY
svgPath	ComputedRef<string>	An SVG path representing the shape of the primitive.
drawToCanvas	(ctx: CanvasRenderingContext2D) => void	A method that draws the primitive to a canvas context.
threeShape	ComputedRef<THREE.Shape>	A THREE.Shape object representing the primitive's 2D face. Only applicable with closed shapes.
threeCurvePath	ComputedRef<THREE.CurvePath>	A THREE.CurvePath object representing the primitive's 2D edges. Can be used in three and tres.