useArc

Composable for working with arcs.

Configuration

NOTE

useArc works clockwise, and doesn't accept negative numbers. The starting angle of 0 is at the right hand position. If you need to adjust the start position, consider using the rotation property.

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

Property	Default	Description
radius	100	The radius of the arc.
startAngle	0	The start angle of the arc, in degrees (0 to 360).
endAngle	360	The end angle of the arc, in degrees (0 to 360).

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.

Example Usage

import {useArc} from 'vuexyz'

const radius: Ref<number> = ref(50)
const startAngle: Ref<number> = ref(0)
const endAngle: Ref<number> = ref(235)
const {vertices, edges, faces} = useArc({radius, startAngle, endAngle})

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.