Lines

There are a few components for lines, depending on how you want to construct them.

Line segment

import { Mafs, Line, Coordinates, useMovablePoint } from "mafs" function LineSegmentExample() { const point1 = useMovablePoint([-2, -1]) const point2 = useMovablePoint([2, 1]) return ( <Mafs viewBox={{ x: [-2, 2], y: [-1, 1] }}> <Coordinates.Cartesian /> <Line.Segment point1={point1.point} point2={point2.point} /> {point1.element} {point2.element} </Mafs> ) }

Props

<Line.Segment ... />
NameDescriptionDefault
point1
Vector2
β€”
point2
Vector2
β€”
color
string
var(--mafs-fg)
opacity
number
1
weight
number
2
style
"solid" | "dashed"
solid

Line through two points

import { Mafs, Line, Coordinates, useMovablePoint } from "mafs" function LineThroughPointsExample() { const point1 = useMovablePoint([-2, -1]) const point2 = useMovablePoint([2, 1]) return ( <Mafs viewBox={{ x: [-2, 2], y: [-1, 1] }}> <Coordinates.Cartesian /> <Line.ThroughPoints point1={point1.point} point2={point2.point} /> {point1.element} {point2.element} </Mafs> ) }

Props

<Line.ThroughPoints ... />
NameDescriptionDefault
point1
Vector2
β€”
point2
Vector2
β€”
color
string
var(--mafs-fg)
opacity
number
1
weight
number
2
style
"solid" | "dashed"
solid

Point and slope

import { Mafs, Line, Coordinates, useMovablePoint } from "mafs" function LinePointSlopeExample() { const point = useMovablePoint([-1, -1]) const slope = useMovablePoint([0, 1], { constrain: "vertical", }) return ( <Mafs viewBox={{ x: [-1, 1], y: [-1, 1] }}> <Coordinates.Cartesian /> <Line.PointSlope point={point.point} slope={slope.y} /> {point.element} {slope.element} </Mafs> ) }

Props

<Line.PointSlope ... />
NameDescriptionDefault
point
Vector2
β€”
slope
number
β€”
color
string
β€”
opacity
number
β€”
weight
number
β€”
style
"solid" | "dashed"
β€”

Point and angle

import { Mafs, Line, Coordinates, useMovablePoint } from "mafs" function LinePointAngleExample() { const point = useMovablePoint([0, 0]) return ( <Mafs viewBox={{ x: [-1, 1], y: [-1, 1] }}> <Coordinates.Cartesian /> <Line.PointAngle point={point.point} angle={Math.PI / 6} /> {point.element} </Mafs> ) }

Props

<Line.PointAngle ... />
NameDescriptionDefault
point
Vector2
β€”
angle
number
β€”
color
string
β€”
opacity
number
β€”
weight
number
β€”
style
"solid" | "dashed"
β€”