Skip to content

useEllipse

Composable for working with ellipses.

useEllipse({xRadius: 100, yRadius: 50})

Configuration

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

PropertyDefaultDescription
xRadius100The horizontal radius of the ellipse.
yRadius100The vertical radius of the ellipse.

extends Primitive Configuration

The following configuration parameters are applicable to all primitive shapes.

PropertyDefaultDescription
position{ x: 0, y: 0 }A 2D vector representing the position of the primitive.
rotation0The rotation of the primitive (in degrees).
scale1The scale factor of the primitive.

Example Usage

ts
import {useEllipse} from 'vuexyz'

const xRadius: Ref<number> = ref(100)
const yRadius: Ref<number> = ref(50)
const { vertices, edges, faces } = useEllipse({xRadius, yRadius})

Returns

All primitive shapes return the following reactive members:

PropertyType DeclarationDescription
verticesComputedRef<Vertex[]>An array of all vertices.
edgesComputedRef<Edge[]>An array of all edges.
facesComputedRef<Face[]>An array of all faces.
centroidComputedRef<Vertex[]>The centroid (geometric center) of all vertices.
boundingBoxComputedRef<BoundingBox>The bounding box of the primitive, with properties x, y, width, height, maxX and maxY
svgPathComputedRef<string>An SVG path representing the shape of the primitive.
drawToCanvas(ctx: CanvasRenderingContext2D) => voidA method that draws the primitive to a canvas context.

Released under the MIT License.