Element Angle
JXG.GeometryElement
↳ JXG.Curve
↳ Sector
↳ Angle
The angle element is used to denote an angle defined by three points. Visually it is just a Sector element with a radius not defined by the parent elements but by an attribute radius. As opposed to the sector, an angle has two angle points and no radius point. Sector is displayed if 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.
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.
Defined in: sector.js.
Extends
Sector.
Constructor Attributes | Constructor Name and Description |
---|---|
Field Attributes | Field Name and Description |
---|---|
Attributes for sub-element arc.
|
|
Attributes of the dot point marking right angles.
|
|
Sensitivity (in degrees) to declare an angle as right angle.
|
|
Display type of the angle field in case of a right angle.
|
|
Radius of the sector, displaying the angle.
|
|
Display type of the angle field.
|
Field Attributes | Field Name and Description |
---|---|
The point defining the radius of the angle element.
|
Method Attributes | Method Name and Description |
---|---|
free()
Frees an angle from a prescribed value.
|
|
setAngle(val)
Set an angle to a prescribed value given in radians.
|
|
Value(unit)
Returns the value of the angle.
|
- Methods borrowed from class Sector:
- Area, autoRadius, hasPointSector, L, Perimeter, Radius, setPositionDirectly, setRadius
- Methods borrowed from class JXG.Curve:
- addTransform, allocatePoints, generateTerm, getTransformationSource, hasPoint, interpolationFunctionFromArray, maxX, minX, moveTo, notifyParents, update, updateCurve, updateDataArray, updateRenderer, updateTransform, X, Y, Z
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
- Events borrowed from class JXG.GeometryElement:
- attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
-
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create
with type "angle".
- Possible parent array combinations are:
-
{JXG.Point} p1
{JXG.Point} p2
{JXG.Point} p1
- An angle is always drawn counterclockwise from p1 to p3 around p2. Second possibility of input parameters are:
-
- line2, coords1 or direction1, coords2 or direction2, radius 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).
- Throws:
- {Error}
- If the element cannot be constructed with the given parent objects an exception is thrown. First possibility of input parameters are:
- Examples:
// 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); }]);
// 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]);
Defined in: options.js.
- Default Value:
- '{visible:false}'
Defined in: options.js.
- Default Value:
- {face: 'o', size: 2}
Defined in: options.js.
- See:
- Angle#orthoType
- Default Value:
- 1.0
Defined in: options.js.
- Default Value:
- square
Defined in: options.js.
Defined in: options.js.
- Default Value:
- 'auto'
Defined in: options.js.
Defined in: options.js.
- Default Value:
- 'sector'
- Returns:
- {Object} Pointer to the angle element..
- See:
- Angle#setAngle
angle.setAngle(Math.PI / 6); // ... angle.free().setAngle(Math.PI / 4);
- Parameters:
- {Number|Function} val
- Number or Function which returns the size of the angle in Radians
- Returns:
- {Object} Pointer to the angle element..
- See:
- Angle#free
- 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:
- {String} unit Optional, Default: '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
- Returns:
- {Number} angle value in various units.
- Examples:
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
- Attributes borrowed from class Sector:
- anglePoint, center, label, radiusPoint, selection
- Attributes borrowed from class JXG.Curve:
- lineCap
- Attributes borrowed from class JXG.GeometryElement:
- aria, cssClass, dash, dashScale, draft, dragToTopOfLayer, element3D, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightCssClass, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, isLabel, layer, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, visible, withLabel
- Fields borrowed from class Sector:
- point1, point2, point3, point4
- Fields borrowed from class JXG.Curve:
- dataX, dataY, numberPoints, qdt, ticks
- Fields borrowed from class JXG.GeometryElement:
- _org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, visProp, visPropCalc
- Methods borrowed from class Sector:
- Area, autoRadius, hasPointSector, L, Perimeter, Radius, setPositionDirectly, setRadius
- Methods borrowed from class JXG.Curve:
- addTransform, allocatePoints, generateTerm, getTransformationSource, hasPoint, interpolationFunctionFromArray, maxX, minX, moveTo, notifyParents, update, updateCurve, updateDataArray, updateRenderer, updateTransform, X, Y, Z
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale