Interface OBJ_Arrow

Arrow options object that extends OBJ_Generic (without drawType) and OBJ_FigurePrimitive

An arrow has a head, tail, length and width. The head defines the head style of the arrow. The length, width (or radius for polygon and circle head styles) define the size of the arrow and tail defines wether it has a tail and how long it is.

All properties have default values that can be scaled with the scale property. So a scale of 2 will double the size of the default arrow.

An arrow can be aligned and oriented with align and angle. align positions the tip, start, tail or middle part of the arrow at (0, 0) in draw space. This part of the arrow will therefore be at the position or translation of the transform. angle then gives the arrow some drawn rotation.

Alignment definitions are:

tip: arrow tip
start: opposite side of tip
mid: mid points between start and tip - useful for polygon, circle and bar arrows without tails when the head should be on a point, not next to it
tail: the end of the tail when a tail exists, or where a tail would start if it doesn't exist.

Setting the tail property to false will draw only the arrow head, true will draw a tail of length 0, and a tail with a custom length can be defined with a number. A tail length of 0 will only extend a tail to the boundaries of the head. A positive tail, will extend it beyond the boundaries.

For arrow heads that use length and width properties, the length is the dimension along the line. It includes both the head and the tail, so an arrow with length 1 and tailLength 0.4 will have a head length of 0.6.

For polygon and circle arrows, only radius and tail are used to determine the dimension of the arrow (length and width are ignored).

head TypeArrowHead — head style ('triangle')
scale number — scale the default dimensions of the arrow
length number — dimension of the arrow head along the line
width number — dimension of the arrow head along the line width
rotation number — rotation of the polygon when head = 'polygon'
sides number — number of sides in polygon or circle arrow head
radius number — radius of polygon or circle arrow head
barb number — barb length (along the length of the line) of the barb arrow head
tailWidth number — width of the line that joins the arrow - if defined this will create minimum dimensions for the arrow
tail boolean — true includes a tail in the arrow of with tailWidth. A number gives the tail a length where 0 will not extend the tail beyond the boundaries of the head
align start | mid | tip | tail — define which part of the arrow is aligned at (0, 0) in draw space ('tip')
angle number — angle the arrow is drawn at (0)

Example

// Triangle arrow with tail
figure.add({
  name: 'a',
  make: 'arrow',
  head: 'triangle',
  tail: 0.15,
  length: 0.5,
});

Example

// Barb arrow with 0 tail
figure.add({
  name: 'a',
  make: 'arrow',
  head: 'barb',
  angle: Math.PI / 2,
  tail: 0,
});

Example

// Create a vector map with arrows by copying an original arrow by a
// transforms defining the position, rotation and scale of the arrows

// Create transforms to apply to each arrow
const r = Fig.range(0, Math.PI / 2, Math.PI / 18);
const x = [0, 1, 2, 0, 1, 2, 0, 1, 2];
const y = [0, 0, 0, 1, 1, 1, 2, 2, 2];
const s = [0.5, 0.8, 0.4, 0.6, 0.8, 0.6, 0.5, 0.8, 0.6];
const transforms = [];
for (let i = 0; i < 9; i += 1) {
  transforms.push(new Fig.Transform().scale(s[i], s[i]).rotate(r[i]).translate(x[i], y[i]));
}

// Create arrow and copy to transforms
figure.add({
  name: 'a',
  make: 'arrow',
  head: 'barb',
  align: 'mid',
  length: 0.7,
  copy: {
    to: transforms,
    original: false,
  },
});
@interface

Interface OBJ_Arrow

Example

Example

Example

Settings