Lines

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

Line segment

import { Mafs, Line, CartesianCoordinates, useMovablePoint } from "mafs"

function LineSegmentExample() {
  const point1 = useMovablePoint([-1, -1])
  const point2 = useMovablePoint([2, 1])

  return (
    <Mafs viewBox={{ y: [-1, 1] }}>
      <CartesianCoordinates />
      <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, CartesianCoordinates, useMovablePoint } from "mafs"

function LineThroughPointsExample() {
  const point1 = useMovablePoint([-1, -1])
  const point2 = useMovablePoint([2, 1])

  return (
    <Mafs viewBox={{ y: [-1, 1] }}>
      <CartesianCoordinates />
      <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, CartesianCoordinates, useMovablePoint } from "mafs"

function LinePointSlopeExample() {
  const point = useMovablePoint([-1, -1])
  const slope = useMovablePoint([0, 1], {
    constrain: "vertical",
  })

  return (
    <Mafs viewBox={{ y: [-1, 1] }}>
      <CartesianCoordinates />
      <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, CartesianCoordinates, useMovablePoint } from "mafs"

function LinePointAngleExample() {
  const point = useMovablePoint([-1, -1])

  return (
    <Mafs viewBox={{ y: [-1, 1] }}>
      <CartesianCoordinates />
      <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"
β€”
Display
Polygons
Display
Points