Angle

Element

Angle sector defined by three points or two lines. Visually it is mostly a Sector, with the difference that

  • the radius is not determined by the parent elements but by the attribute radius. As opposed to the sector, an angle has two angle points and no radius point.
  • Perpendicular angles may be visualized by a square or an additional dot.

The possibilities are:

  • An angle is displayed as sector if attribute type:"sector".
  • If type:"square", instead of a sector a parallelogram is displayed.
  • In case of 'type:"auto"`, a square is displayed if the angle is near orthogonal. The precision to decide if an angle is orthogonal is determined by the attribute Angle#orthoSensitivity.

If no name is provided the angle label is automatically set to a lower greek letter. If no label should be displayed use the attribute withLabel:false or set the name attribute to the empty string.

Attention: The center of an angle is determined by the second point - for sectors it is the first point.

Usage (signatures)
board.create('angle', [p1, center, p2]);

An angle is drawn counterclockwise from p1 to p2 around center.

Parameters
Name Type Description
p1 PointLike
center PointLike
p2 PointLike
Example
// Create an angle out of three free points
var p1 = board.create('point', [5.0, 3.0]),
    p2 = board.create('point', [1.0, 0.5]),
    p3 = board.create('point', [1.5, 5.0]),

    a = board.create('angle', [p1, p2, p3]),
    t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]);
board.create('angle', [line1, line2, c1, c2, r]);

The angle is defined by two lines. The two legs which define the angle are given by two coordinate arrays. The points given by these coordinate arrays are projected initially (i.e. only once) onto the two lines. The other possibility is to supply directions +/- 1.

Parameters
Name Type Description
line1 Line
line2 Line
c1 Array | Number

Coords1 or direction +/- 1
c2 Array | Number

Coords2 or direction +/- 1
r NumberLike

radius
Examples
// Create an angle out of two lines and two directions
var p1 = board.create('point', [-1, 4]),
 p2 = board.create('point', [4, 1]),
 q1 = board.create('point', [-2, -3]),
 q2 = board.create('point', [4,3]),

 li1 = board.create('line', [p1,p2], {strokeColor:'black', lastArrow:true}),
 li2 = board.create('line', [q1,q2], {lastArrow:true}),

 a1 = board.create('angle', [li1, li2, [5.5, 0], [4, 3]], { radius:1 }),
 a2 = board.create('angle', [li1, li2, 1, -1], { radius:2 });



// Display the angle value instead of the name
var p1 = board.create('point', [0,2]);
var p2 = board.create('point', [0,0]);
var p3 = board.create('point', [-2,0.2]);

var a = board.create('angle', [p1, p2, p3], {
	 radius: 1,
  name: function() {
  	return JXG.Math.Geometry.trueAngle(p1, p2, p3).toFixed(1) + '°';
  }});


// Apply a transformation to an angle.
var t = board.create('transform', [2, 1.5], {type: 'scale'});
var an1 = board.create('angle', [[-4,3.9], [-3, 4], [-3, 3]]);
var an2 = board.create('curve', [an1, t]);
Attributes

Own

arc

dot

orientation

orthoSensitivity

orthoType

pointsquare

radius

radiuspoint

type

arc

Description

Attributes for sub-element arc. In general, the arc will run through the first point and thus will not have the same radius as the angle sector.

Type
Arc
Default Value
'{visible:false}'
Source
options.js, line 4083

dot

Description

Attributes of the dot point marking right angles.

Type
Object
Default Value
{face: 'o', size: 2}
Source
options.js, line 4060

orientation

Description

Orientation of the angle: 'clockwise' or 'counterclockwise' (default).

If the attribute 'selection' is set to 'minor' or 'major' and "the other" angle sector is to be taken, the orientation of the angle switches, too.

Apart from 'selection' having value 'minor' or 'major', the value of the angle is always the (positive) angle value of the visible sector - independent of orientation.

Type
String
Default Value
'counterclockwise'
Example
var p1, p2, p3, a;
p1 = board.create('point', [0, 0]);
p2 = board.create('point', [4, 0]);
p3 = board.create('point', [3, 3]);
a = board.create('angle', [p2, p1, p3], {
    name: 'φ',
    radius: 2,
    // selection: 'minor',
    orientation: 'clockwise',
    arc: {
        visible: true,
        strokeWidth: 4,
        lastArrow: true,
    }
});
Source
options.js, line 3925

orthoSensitivity

Description

Sensitivity (in degrees) to declare an angle as right angle. If the angle measure is inside this distance from a rigth angle, the orthoType of the angle is used for display.

Type
Number
Default Value
1.0
See
Source
options.js, line 4012

orthoType

Description

Display type of the angle field in case of a right angle. Possible values are 'sector' or 'sectordot' or 'square' or 'none'.

Type
String
Default Value
square
See
Source
options.js, line 3999

pointsquare

Type
Object
Deprecated
Yes
Source
options.js, line 4048

radius

Description

Radius of the sector, displaying the angle. The radius can be given as number (in user coordinates) or as string 'auto'. In the latter case, the angle is set to an value between 20 and 50 px.

Type
Number | String
Default Value
'auto'
Source
options.js, line 3911

radiuspoint

Type
Object
Deprecated
Yes
Source
options.js, line 4036

type

Description

Display type of the angle field. Possible values are 'sector' or 'sectordot' or 'square' or 'none'.

Type
String
Default Value
'sector'
Source
options.js, line 3987

Inherited

none

Members

Own

dot

point

pointsquare

dot : JXG.Point

Description

Indicates a right angle. Invisible by default, use dot.visible: true to show. Though this dot indicates a right angle, it can be visible even if the angle is not a right one.

Type
JXG.Point
Source
element/sector.js, line 1769

point : JXG.Point

Description

The point defining the radius of the angle element. Alias for Sector#radiuspoint.

Type
JXG.Point
Source
element/sector.js, line 1415

pointsquare : JXG.Point

Description

Helper point for angles of type 'square'.

Type
JXG.Point
Source
element/sector.js, line 1425

Inherited

none

Methods

Own

Value

free

setAngle

Value(unitopt) → {Number}

Returns the value of the angle.

Example

var A, B, C, ang,
    r = 0.5;
A = board.create("point", [3, 0]);
B = board.create("point", [0, 0]);
C = board.create("point", [2, 2]);
ang = board.create("angle", [A, B, C], {radius: r});

console.log(ang.Value());
// Output Math.PI * 0.25

console.log(ang.Value('radian'));
// Output Math.PI * 0.25

console.log(ang.Value('degree');
// Output 45

console.log(ang.Value('semicircle'));
// Output 0.25

console.log(ang.Value('circle'));
// Output 0.125

console.log(ang.Value('length'));
// Output r * Math.PI * 0.25

console.log(ang.L());
// Output r * Math.PI * 0.25

Parameters

Name Type Attributes Default Description
unit String <optional>
 'length'

Unit of the returned values. Possible units are

  • 'radians' (default): angle value in radians
  • 'degrees': angle value in degrees
  • 'semicircle': angle value in radians as a multiple of π, e.g. if the angle is 1.5π, 1.5 will be returned.
  • 'circle': angle value in radians as a multiple of 2π
  • 'length': length of the arc line of the angle

It is sufficient to supply the first three characters of the unit, e.g. 'len'.

Returns

angle value in various units.

Type
Number

Details

See
Source
element/sector.js, line 1830

free() → {Object}

Frees an angle from a prescribed value. This is only relevant if the angle size has been set by "setAngle()" previously. The anglepoint is set to a free point.

Returns

Pointer to the angle element..

Type
Object

Details

See
Source
element/sector.js, line 1637

setAngle(val) → {Object}

Set an angle to a prescribed value given in radians. This is only possible if the third point of the angle, i.e. the anglepoint is a free point. Removing the constraint again is done by calling "angle.free()".

Changing the angle requires to call the method "free()":

angle.setAngle(Math.PI / 6);
// ...
angle.free().setAngle(Math.PI / 4);

Examples

var p1, p2, p3, c, a, s;

p1 = board.create('point',[0,0]);
p2 = board.create('point',[5,0]);
p3 = board.create('point',[0,5]);

c1 = board.create('circle',[p1, p2]);

a = board.create('angle',[p2, p1, p3], {radius:3});

a.setAngle(function() {
    return Math.PI / 3;
});
board.update();


var p1, p2, p3, c, a, s;

p1 = board.create('point',[0,0]);
p2 = board.create('point',[5,0]);
p3 = board.create('point',[0,5]);

c1 = board.create('circle',[p1, p2]);

a = board.create('angle',[p2, p1, p3], {radius:3});
s = board.create('slider',[[-2,1], [2,1], [0, Math.PI*0.5, 2*Math.PI]]);

a.setAngle(function() {
    return s.Value();
});
board.update();

Parameters

Name Type Description
val Number | function

Number or Function which returns the size of the angle in Radians

Returns

Pointer to the angle element..

Type
Object

Details

See
Source
element/sector.js, line 1481

Inherited

none

Throws

If the element cannot be constructed with the given parent objects an exception is thrown.

Type
Error

Details

Type
Sector
Source
element/sector.js, line 1187