# JSXGraph 1.11.1 Reference

## JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

Elements

- Angle
- Arc
- Arrow
- Arrowparallel
- Axes3D
- Axis
- Axis3D
- Bisector
- Bisectorlines
- Boxplot
- Button
- Cardinalspline
- Chart
- Checkbox
- Circle
- Circle3D
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Comb
- Conic
- Curve
- Curve3D
- CurveDifference
- CurveIntersection
- CurveUnion
- Derivative
- Ellipse
- Face3D
- ForeignObject
- Functiongraph
- Functiongraph3D
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- ImplicitCurve
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- IntersectionCircle3D
- IntersectionLine3D
- Label
- Legend
- Line
- Line3D
- MajorArc
- MajorSector
- Measurement
- Mesh3D
- Metapostspline
- Midpoint
- MinorArc
- MinorSector
- MirrorElement
- MirrorPoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelogram
- Parallelpoint
- ParametricSurface3D
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Plane3D
- Point
- Point3D
- PolarLine
- PolePoint
- Polygon
- Polygon3D
- PolygonalChain
- Polyhedron3D
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopefield
- Slopetriangle
- Smartlabel
- Sphere3D
- Spline
- Stepfunction
- Tangent
- TangentTo
- Tapemeasure
- Text
- Text3D
- Ticks
- Ticks3D
- Tracecurve
- Transformation
- Transformation3D
- Turtle
- Vectorfield
- Vectorfield3D
- View3D

Classes

- _global_
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.Board.infobox
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Chart
- JXG.Circle
- JXG.Circle3D
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Curve3D
- JXG.Dump
- JXG.EventEmitter
- JXG.Expect
- JXG.Face3D
- JXG.ForeignObject
- JXG.GeometryElement
- JXG.GeometryElement3D
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Legend
- JXG.Line
- JXG.Line3D
- JXG.Math
- JXG.Math.BoxQuadtree
- JXG.Math.Clip
- JXG.Math.Extrapolate
- JXG.Math.Geometry
- JXG.Math.ImplicitPlot
- JXG.Math.IntervalArithmetic
- JXG.Math.Metapost
- JXG.Math.Nlp
- JXG.Math.Numerics
- JXG.Math.Plot
- JXG.Math.Poly
- JXG.Math.Poly.Monomial
- JXG.Math.Poly.Polynomial
- JXG.Math.Poly.Ring
- JXG.Math.ProbFuncs
- JXG.Math.Quadtree
- JXG.Math.Statistics
- JXG.NoRenderer
- JXG.Options
- JXG.Plane3D
- JXG.Point
- JXG.Point3D
- JXG.Polygon
- JXG.Polygon3D
- JXG.PrefixParser
- JXG.Sphere3D
- JXG.Surface3D
- JXG.SVGRenderer
- JXG.Text
- JXG.Text3D
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.View3D
- JXG.VMLRenderer
- JXG.XML

# Class JXG.Polygon

JXG.GeometryElement
↳ JXG.Polygon

Polygon stores all style and functional properties that are required to draw and to interactact with a polygon.
Defined in: polygon.js.
Extends JXG.GeometryElement.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| JXG.Polygon(board, vertices, attributes) Creates a new instance of JXG.Polygon.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, aria, baseElement, board, childElements, cssClass, dash, dashScale, descendants, draft, dragToTopOfLayer, dump, element3D, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlightCssClass, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isLabel, isReal, lastDragTime, layer, lineCap, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, nonnegativeOnly, notExistingParents, numTraces, parents, precision, priv, quadraticform, rendNode, rotatable, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, transitionProperties, type, visible, visProp, visPropCalc, withLabel

Field Summary
Field Attributes | Field Name and Description
--- | ---
| borders References to the border lines (edges) of the polygon.
| vertices References to the points defining the polygon.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, aria, baseElement, board, childElements, cssClass, dash, dashScale, descendants, draft, dragToTopOfLayer, dump, element3D, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlightCssClass, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isLabel, isReal, lastDragTime, layer, lineCap, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, nonnegativeOnly, notExistingParents, numTraces, parents, precision, priv, quadraticform, rendNode, rotatable, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, transitionProperties, type, visible, visProp, visPropCalc, withLabel

Method Summary
Method Attributes | Method Name and Description
--- | ---
| addPoints(p) Add more points to the polygon.
| Area() Area of (not self-intersecting) polygon
| boundingBox() Bounding box of a polygon.
| findPoint(p) Finds the index to a given point reference.
| getTextAnchor() return TextAnchor
| hasPoint(x, y) Checks whether (x,y) is near the polygon.
| hideElement(borderless) Hide the polygon including its border lines.
| insertPoints(idx, p) Insert points to the vertex list of the polygon after index `idx`.
| intersect(polygon) Generic method for the intersection of this polygon with another polygon.
| L() Alias for Perimeter.
| Perimeter() Perimeter of polygon.
| pnpoly(x_in, y_in, coord_type) Wrapper for JXG.Math.Geometry.pnpoly.
<private> | remove() This method removes the SVG or VML nodes of the lines and the filled area from the renderer, to remove the object completely you should use JXG.Board#removeObject.
| removePoints(p) Removes given set of vertices from the polygon
| setPositionDirectly(method, coords, oldcoords) Moves the polygon by the difference of two coordinates.
| showElement(borderless) Make the element visible.
<private> | sutherlandHodgman(polygon) Algorithm by Sutherland and Hodgman to compute the intersection of two convex polygons.
| updateRenderer() Uses the boards renderer to update the polygon.

Methods borrowed from class JXG.GeometryElement:
  _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getType, handleSnapToGrid, hide, noHighlight, normalize, prepareUpdate, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setProperty, show, snapToPoints, update, 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

Class Detail
JXG.Polygon(board, vertices, attributes)
Creates a new instance of JXG.Polygon.

Parameters:
{JXG.Board} board
  Reference to the board the polygon is to be drawn on.
{Array} vertices
  Unique identifiers for the points defining the polygon. Last point must be first point. Otherwise, the first point will be added at the list.
{Object} attributes
  An object which contains properties as given in JXG.Options.elements and JXG.Options.polygon.

Field Detail
{Array} borders
References to the border lines (edges) of the polygon.

{Array} vertices
References to the points defining the polygon. The last vertex is the same as the first vertex. Compared to the 3D JXG.Polygon3D#vertices, it contains one point more, i.e. for a quadrangle 'vertices' contains five points, the last one being a copy of the first one. In a 3D quadrangle, 'vertices' will contain four points.
Method Detail
{JXG.Polygon} addPoints(p)
Add more points to the polygon. The new points will be inserted at the end. The attributes of new border segments are set to the same values as those used when the polygon was created. If new vertices are supplied by coordinates, the default attributes of polygon vertices are taken as their attributes. Therefore, the visual attributes of new vertices and borders may have to be adapted afterwards.

Parameters:
{JXG.Point} p
  Arbitrary number of points or coordinate arrays

Returns:
  {JXG.Polygon} Reference to the polygon

Examples:

    var pg = board.create('polygon', [[1,2], [3,4], [-3,1]], {hasInnerPoints: true});
    var newPoint = board.create('point', [-1, -1]);
    var newPoint2 = board.create('point', [-1, -2]);
    pg.addPoints(newPoint, newPoint2, [1, -2]);

{Number} Area()
Area of (not self-intersecting) polygon

Returns:
  {Number} Area of (not self-intersecting) polygon

{Array} boundingBox()
Bounding box of a polygon. The bounding box is an array of four numbers: the first two numbers determine the upper left corner, the last two number determine the lower right corner of the bounding box. The width and height of a polygon can then determined like this:

Returns:
  {Array} Array containing four numbers: [minX, maxY, maxX, minY]

Examples:

    var box = polygon.boundingBox();
    var width = box[2] - box[0];
    var height = box[1] - box[3];

{Number} findPoint(p)
Finds the index to a given point reference.

Parameters:
{JXG.Point} p
  Reference to an element of type JXG.Point

Returns:
  {Number} Index of the point or -1.

getTextAnchor()
return TextAnchor

{Boolean} hasPoint(x, y)
Checks whether (x,y) is near the polygon.

Parameters:
{Number} x
  Coordinate in x direction, screen coordinates.
{Number} y
  Coordinate in y direction, screen coordinates.

Returns:
  {Boolean} Returns true, if (x,y) is inside or at the boundary the polygon, otherwise false.

hideElement(borderless)
Hide the polygon including its border lines. It will still exist but not visible on the board.

Parameters:
{Boolean} borderless Optional, Default: false
  If set to true, the polygon is treated as a polygon without borders, i.e. the borders will not be hidden.

{JXG.Polygon} insertPoints(idx, p)
Insert points to the vertex list of the polygon after index `idx`. The attributes of new border segments are set to the same values as those used when the polygon was created. If new vertices are supplied by coordinates, the default attributes of polygon vertices are taken as their attributes. Therefore, the visual attributes of new vertices and borders may have to be adapted afterwards.

Parameters:
{Number} idx
  The position after which the new vertices are inserted. Setting idx to -1 inserts the new points at the front, i.e. at position 0.
{JXG.Point} p
  Arbitrary number of points or coordinate arrays to insert.

Returns:
  {JXG.Polygon} Reference to the polygon object

Examples:

    var pg = board.create('polygon', [[1,2], [3,4], [-3,1]], {hasInnerPoints: true});
    var newPoint = board.create('point', [-1, -1]);
    pg.insertPoints(0, newPoint, newPoint, [1, -2]);

{Array} intersect(polygon)
Generic method for the intersection of this polygon with another polygon. The parent object is the clipping polygon, it expects as parameter a polygon to be clipped. Both polygons have to be convex. Calls the algorithm by Sutherland, Hodgman, JXG.Polygon#sutherlandHodgman.

An alternative is to use the methods from JXG.Math.Clip, where the algorithm by Greiner and Hormann is used.

Parameters:
{JXG.Polygon} polygon
  Polygon which will be clipped.

Returns:
  {Array} of (normalized homogeneous user) coordinates (i.e. [z, x, y], where z==1 in most cases, representing the vertices of the intersection polygon.

Examples:

     // Static intersection of two polygons pol1 and pol2
     var pol1 = board.create('polygon', [[-2, 3], [-4, -3], [2, 0], [4, 4]], {
                   name:'pol1', withLabel: true,
                   fillColor: 'yellow'
                });
     var pol2 = board.create('polygon', [[-2, -3], [-4, 1], [0, 4], [5, 1]], {
                   name:'pol2', withLabel: true
                });

     // Static version:
     // the intersection polygon does not adapt to changes of pol1 or pol2.
     var pol3 = board.create('polygon', pol1.intersect(pol2), {fillColor: 'blue'});

     // Dynamic intersection of two polygons pol1 and pol2
     var pol1 = board.create('polygon', [[-2, 3], [-4, -3], [2, 0], [4, 4]], {
                   name:'pol1', withLabel: true,
                   fillColor: 'yellow'
                });
     var pol2 = board.create('polygon', [[-2, -3], [-4, 1], [0, 4], [5, 1]], {
                   name:'pol2', withLabel: true
                });

     // Dynamic version:
     // the intersection polygon does adapt to changes of pol1 or pol2.
     // For this a curve element is used.
     var curve = board.create('curve', [[],[]], {fillColor: 'blue', fillOpacity: 0.4});
     curve.updateDataArray = function() {
         var mat = JXG.Math.transpose(pol1.intersect(pol2));

         if (mat.length == 3) {
             this.dataX = mat[1];
             this.dataY = mat[2];
         } else {
             this.dataX = [];
             this.dataY = [];
         }
     };
     board.update();

L()
Alias for Perimeter. For polygons, the perimeter is returned. For polygonal chains the length is returned.

Returns:
  Number

See:
  JXG.Polygon#Perimeter

{Number} Perimeter()
Perimeter of polygon. For a polygonal chain, this method returns its length.

Returns:
  {Number} Perimeter of polygon in user units.

See:
  JXG.Polygon#L

Examples:

    var p = [[0.0, 2.0], [2.0, 1.0], [4.0, 6.0], [1.0, 3.0]];

    var pol = board.create('polygon', p, {hasInnerPoints: true});
    var t = board.create('text', [5, 5, function() { return pol.Perimeter(); }]);

{Boolean} pnpoly(x_in, y_in, coord_type)
Wrapper for JXG.Math.Geometry.pnpoly.

Parameters:
{Number} x_in
  x-coordinate (screen or user coordinates)
{Number} y_in
  y-coordinate (screen or user coordinates)
{Number} coord_type
  (Optional) the type of coordinates used here. Possible values are JXG.COORDS_BY_USER and JXG.COORDS_BY_SCREEN. Default value is JXG.COORDS_BY_SCREEN

Returns:
  {Boolean} if (x_in, y_in) is inside of the polygon.

See:
  JXG.Math.Geometry#pnpoly

Examples:

    var pol = board.create('polygon', [[-1,2], [2,2], [-1,4]]);
    var p = board.create('point', [4, 3]);
    var txt = board.create('text', [-1, 0.5, function() {
      return 'Point A is inside of the polygon = ' +
        pol.pnpoly(p.X(), p.Y(), JXG.COORDS_BY_USER);
    }]);

<private> remove()
This method removes the SVG or VML nodes of the lines and the filled area from the renderer, to remove the object completely you should use JXG.Board#removeObject.

{JXG.Polygon} removePoints(p)
Removes given set of vertices from the polygon

Parameters:
{JXG.Point} p
  Arbitrary number of vertices as JXG.Point elements or index numbers

Returns:
  {JXG.Polygon} Reference to the polygon

{JXG.Polygon} setPositionDirectly(method, coords, oldcoords)
Moves the polygon by the difference of two coordinates.

Parameters:
{Number} method
  The type of coordinates used here. Possible values are JXG.COORDS_BY_USER and JXG.COORDS_BY_SCREEN.
{Array} coords
  coordinates in screen/user units
{Array} oldcoords
  previous coordinates in screen/user units

Returns:
  {JXG.Polygon} this element

showElement(borderless)
Make the element visible.

Parameters:
{Boolean} borderless Optional, Default: false
  If set to true, the polygon is treated as a polygon without borders, i.e. the borders will not be shown.

<private> {Array} sutherlandHodgman(polygon)
Algorithm by Sutherland and Hodgman to compute the intersection of two convex polygons. The polygon itself is the clipping polygon, it expects as parameter a polygon to be clipped. See wikipedia entry. Called by JXG.Polygon#intersect.

Parameters:
{JXG.Polygon} polygon
  Polygon which will be clipped.

Returns:
  {Array} of (normalized homogeneous user) coordinates (i.e. [z, x, y], where z==1 in most cases, representing the vertices of the intersection polygon.

updateRenderer()
Uses the boards renderer to update the polygon.

Documentation generated by JsDoc Toolkit 2.4.0 on Fri Apr 04 2025 09:22:41 GMT+0200 (Mitteleuropäische Sommerzeit)