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).

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