Interface OBJ_Triangle

Triangle shape options object that extends OBJ_Generic (without drawType) and OBJ_FigurePrimitive

The most generic way to define a triangle is with three points (points property). When using points, all the other properties that can also define a triangle are ignored: width, height, top, SSS, ASA, AAS, SAS, direction, rotation, xAlign and yAlign.

The other ways to define a triangle are (in order of highest override preference to lowest if more than one is defined in the object):

ASA or Angle-Side-Angle
SAS or Side-Angle-Side
AAS or Angle-Angle-Side
SSS or Side-Side-Side
width, height and top location

All these methods also use direction to define the triangles, and rotation, xAlign and yAlign to position the triangles. Each corner and side of the triangle is indexed, and can be used for positioning.

A triangle starts with an angle (a1) at (0, 0) and base side extending along the x axis to a second angle a2. The base side is side 1 (s1).

Angles a1 and a2 extend the triangle above s1 if direction is 1, and below s1 when direction is -1.

s2, a3, and s3 are then the consecutive sides and angles.

Triangles can be defined with a combination of side length and angle using ASA, SAS, AAS and SSS, where the first side or angle is s1 or a1 respectively, and the subsequent sides and angles progress consecutively. For instance, ASA defines the angle a1, then side length s1, then angle a2. SSS defines the side lenghts s1, s2 then s3. All these combinations of three properties are sufficient to define a unique triangle completely.

When defining the triangle with width, height and top, the base side s1 is the width, and the top point is either aligned with the left, center or right of the base at some height above s1.

When defined, a triangle's a1 corner will be at (0, 0), and s1 will be along the x axis. Next, a rotation can be applied to the triangle. A rotation can either be a number rotating it relative to its definition, or relative to one of its sides: s1, s2 or s3.

Finally, the triangle can be positioned (in draw space) using xAlign and yAlign. An xAlign of 'left' will position the triangle so that it's left most point will be at (0, 0). Similarly, a yAlign of 'top' will position the triangle so its top most point is at (0, 0). Triangles can also be aligned by angles (corners) and side mid points. For instance, an xAlign of 'a2', will position the a2 corner at x = 0. Similarly a yAlign of 's3' will position the triangle vertically such that the mid point of s3 is at y = 0. 'centroid' is relative to the geometric center of the triangle.

Once a triangle is defined and positioned in draw space, it can then be copied (copy) if more than one triangle is desired.

The triangle(s) can then be positioned (position) or transformed (transform) in the FigureElementPrimitive local space.

Triangles can either be a solid fill, texture fill or outline. When line is not defined, the triangle will be filled.

See

To test examples, append them to the boilerplate

Example

// Right angle triangle
figure.add({
  name: 't',
  make: 'triangle',
  width: 0.5,
  height: 1,
  top: 'right',
});

Example

// 30-60-90 triangle with dashed line
const t = figure.primitives.triangle({
  ASA: [Math.PI / 2, 1, Math.PI / 6],
  line: {
    width: 0.02,
    dash: [0.12, 0.04],
  },
});
figure.elements.add('t', t);

Example

// Star from 4 equilateral triangles
figure.add({
  name: 'star',
  make: 'triangle',
  SSS: [1, 1, 1],
  xAlign: 'centroid',
  yAlign: 'centroid',
  copy: {
    along: 'rotation',
    num: 3,
    step: Math.PI / 6,
  },
});
@interface

Interface OBJ_Triangle

See

Example

Example

Example

Settings