Mafs

Appearance

On this page

Lines ​

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

Line segment ​

Code
vue
<script setup lang="ts">
import { Mafs, Cartesian, Segment, MovablePoint, useMovablePoint } from 'mafs-vue'

const point1 = useMovablePoint([-2, -1])
const point2 = useMovablePoint([2, 1])
</script>

<template>
    <Mafs :height="200" :viewBox="{ x: [-2, 2], y: [-1, 1] }">
        <Cartesian />
        <Segment :point1="point1.point" :point2="point2.point" />
        <MovablePoint :ctx="point1" />
        <MovablePoint :ctx="point2" />
    </Mafs>
</template>

Props

<Line.Segment ... />

NameDescriptionDefault
point1
vector2
—
point2
vector2
—
stroked
StokedProps
—

StokedProps ​

stroked—can be configured with the following options:

  • color: string default: var(--mafs-fg).
  • opacity: number default: 1.
  • weight: number default: 2.
  • strokeStyle: "solid" | "dashed" default: "solid".

Line through two points ​

Code
vue
<script setup lang="ts">
import { Mafs, Cartesian, ThroughPoints, MovablePoint, useMovablePoint } from 'mafs-vue'

const point1 = useMovablePoint([-2, -1])
const point2 = useMovablePoint([2, 1])
</script>

<template>
    <Mafs :height="200" :viewBox="{ x: [-2, 2], y: [-1, 1] }">
        <Cartesian />
        <ThroughPoints :point1="point1.point" :point2="point2.point" />
        <MovablePoint :ctx="point1" />
        <MovablePoint :ctx="point2" />
    </Mafs>
</template>

Props

<Line.ThroughPoints ... />

NameDescriptionDefault
point1
vector2
—
point2
vector2
—
stroked
StokedProps
—

Point and slope ​

Code
vue
<script setup lang="ts">
import { Mafs, Cartesian, PointSlope, MovablePoint, useMovablePoint, AlignType } from 'mafs-vue'

const point = useMovablePoint([-1, -1])
const slope = useMovablePoint([0, 1], {
    constrain: AlignType.VERTICAL
})
</script>

<template>
    <Mafs :height="200" :viewBox="{ x: [-1, 1], y: [-1, 1] }">
        <Cartesian />
        <PointSlope :point="point.point" :slope="slope.point[1]" />
        <MovablePoint :ctx="point" />
        <MovablePoint :ctx="slope" />
    </Mafs>
</template>

Props

<Line.PointSlope ... />

NameDescriptionDefault
point
vector2
—
slope
number
—
stroked
StokedProps
—

Point and angle ​

Code
vue
<script setup lang="ts">
import { Mafs, Cartesian, PointAngle, MovablePoint, useMovablePoint } from 'mafs-vue'

const point = useMovablePoint([0, 0])
</script>

<template>
    <Mafs :height="200" :viewBox="{ x: [-1, 1], y: [-1, 1] }">
        <Cartesian />
        <PointAngle :point="point.point" :angle="Math.PI / 6" />
        <MovablePoint :ctx="point" />
    </Mafs>
</template>

Props

<Line.PointSlope ... />

NameDescriptionDefault
point
vector2
—
angle
number
—
stroked
StokedProps
—