Text

The Text component is a pretty lightweight wrapper around SVG's text, namely that the anchor point is mapped to coordinate space. The optional attach will orient the text along a CardinalDirection (N, S, NW, etc.)

Code

vue

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

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

<template>
    <Mafs :height="200" :viewBox="{ y: [0, 2], x: [-3, 5] }">
        <Cartesian />
        <Text :x="point.point[0]" :y="point.point[1]" :attach="CardinalDirection.W" :attachDistance="15">
            ({{ point.point[0].toFixed(3) }}, {{ point.point[1].toFixed(3) }})
        </Text>
        <Text :x="point.point[0]" :y="point.point[1]" :attach="CardinalDirection.E" :attachDistance="15">
            ({{ point.point[0].toFixed(3) }}, {{ point.point[1].toFixed(3) }})
        </Text>
        <MovablePoint :ctx="point" />
    </Mafs>
</template>

Props

Name	Description	Default
x	number	—
y	number	—
attach	CardinalDirection	—
attachDistance	number	—
size	number	30
color	string	—

Text ​

Text