Skip to content


Composable for working with lines comprised of two or more vertices.

useLine({vertices: [{ x: -100, y: -100 }, { x: 100, y: 100 }]})


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

vertices[]An array of two or more vertices.

extends Primitive Configuration

The following configuration parameters are applicable to all primitive shapes.

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.


import { useLine } from 'vuexyz'

const start: Ref<Vertex> = ref({ x: -100, y: -100 })
const end: Ref<Vertex> = ref({ x: 100, y: 100 })
const { vertices, edges, faces } = useLine({ vertices: [start, end]})


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.