Drawing Vectors

Props

Name	Type	Description	Default
from	PossibleVector2	The start position of the vector in local units	[0,0]
to	PossibleVector2	The end position of the vector in local units	none
color	string	The color of the vector	#000
dashed	boolean	Whether the vector should be drawn with a dashed line	false
label	string	The label text for this vector.	undefined
label-size	"small"| "normal"|"large"	The size of the label text	"normal"
line-width	number	The line width of the vector	1.75
arrow-size	number	The size of the vector's arrow	13

Examples

Basic Vector

Code

<template>
  <Graph>
    <Vector :to="[3, 2]" />
  </Graph>
</template>

Vector with a label

Code

<template>
  <Graph>
    <Vector :to="[-2, -3]" label="a" />
  </Graph>
</template>

Vector not starting at the origin

Code

<template>
  <Graph>
    <Vector :from="[3, 3]" :to="[1, 1]" />
  </Graph>
</template>

Multiple Vectors

Code

<template>
  <Graph>
    <Vector :to="[4, 1]" label="a" />
    <Vector :to="[1, 4]" color="lightseagreen" label="b" />
    <Vector :from="[1, 4]" :to="[4, 1]" color="steelblue" label="a-b" dashed />
  </Graph>
</template>