JXG.Polygon - Documentation

Description: 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.
Type: Array
Source: base/polygon.js, line 71

Inherited

_org_type

_pos

Methods

Own

Area() → {Number}

Area of (not self-intersecting) polygon

Returns

Area of (not self-intersecting) polygon

Type: Number

Details

Source: base/polygon.js, line 412

L()

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

Returns

Number

Details

See

JXG.Polygon#Perimeter

Source

base/polygon.js, line 456

Perimeter() → {Number}

Perimeter of polygon. For a polygonal chain, this method returns its length.

Example

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(); }]);

Returns

Perimeter of polygon in user units.

Type: Number

Details

See

JXG.Polygon#L

Source

base/polygon.js, line 438

addPoints(p) → {Polygon}

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.

Example

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]);

Parameters

Name	Type	Description
`p`	Point	Arbitrary number of points or coordinate arrays

Returns

Reference to the polygon

Type: Polygon

Details

Source: base/polygon.js, line 577

boundingBox() → {Array}

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 numbers determine the lower right corner of the bounding box.

The width and height of a polygon can then determined like this:

Example

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

Returns

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

Type: Array

Details

Source: base/polygon.js, line 472

findPoint(Point}) → {Number}

Finds the index to a given point reference.

Parameters

Name	Type	Description
`Point}`		p Reference to an element of type Point

Returns

Index of the point or -1.

Type: Number

Details

Source: base/polygon.js, line 531

getTextAnchor()

return TextAnchor

Details

Overrides: JXG.GeometryElement#getTextAnchor
Source: base/polygon.js, line 304

hasPoint(x, y) → {Boolean}

Checks whether (x,y) is near the polygon.

Parameters

Name	Type	Description
`x`	Number	Coordinate in x direction, screen coordinates.
`y`	Number	Coordinate in y direction, screen coordinates.

Returns

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

Type: Boolean

Details

Overrides: JXG.GeometryElement#hasPoint
Source: base/polygon.js, line 222

hideElement(borderlessopt)

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

Parameters

Name	Type	Attributes	Default	Description
`borderless`	Boolean	<optional>	`false`	If set to true, the polygon is treated as a polygon without borders, i.e. the borders will not be hidden.

Details

Overrides: JXG.GeometryElement#hideElement
Source: base/polygon.js, line 358

insertPoints(idx, p) → {Polygon}

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.

Example

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]);

Parameters

Name	Type	Description
`idx`	Number	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.
`p`	Point	Arbitrary number of points or coordinate arrays to insert.

Returns

Reference to the polygon object

Type: Polygon

Details

Source: base/polygon.js, line 621

intersect(polygon) → {Array}

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.

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();

Parameters

Name	Type	Description
`polygon`	Polygon	Polygon which will be clipped.

Returns

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

Type: Array

Details

Source: base/polygon.js, line 1110

pnpoly(x_in, y_in, coord_type) → {Boolean}

Wrapper for JXG.Math.Geometry.pnpoly.

Example

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);
}]);

Parameters

Name	Type	Description
`x_in`	Number	x-coordinate (screen or user coordinates)
`y_in`	Number	y-coordinate (screen or user coordinates)
`coord_type`	Number	(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

if (x_in, y_in) is inside of the polygon.

Type: Boolean

Details

See

JXG.Math.Geometry#pnpoly

Source

base/polygon.js, line 212

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

Details

Overrides: JXG.GeometryElement#remove
Source: base/polygon.js, line 516

removePoints(p) → {Polygon}

Removes given set of vertices from the polygon

Parameters

Name	Type	Description
`p`	Point	Arbitrary number of vertices as Point elements or index numbers

Returns

Reference to the polygon

Type: Polygon

Details

Source: base/polygon.js, line 698

setPositionDirectly(method, coords, oldcoords) → {JXG.Polygon}

Moves the polygon by the difference of two coordinates.

Parameters

Name	Type	Description
`method`	Number	The type of coordinates used here. Possible values are JXG.COORDS_BY_USER and JXG.COORDS_BY_SCREEN.
`coords`	Array	coordinates in screen/user units
`oldcoords`	Array	previous coordinates in screen/user units

Returns

this element

Type: JXG.Polygon

Details

Overrides: JXG.GeometryElement#setPositionDirectly
Source: base/polygon.js, line 901

showElement(borderlessopt)

Make the element visible.

Parameters

Name	Type	Attributes	Default	Description
`borderless`	Boolean	<optional>	`false`	If set to true, the polygon is treated as a polygon without borders, i.e. the borders will not be shown.

Details

Overrides: JXG.GeometryElement#showElement
Source: base/polygon.js, line 385

(private) sutherlandHodgman(polygon) → {Array}

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

Name	Type	Description
`polygon`	Polygon	Polygon which will be clipped.

Returns

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

Type: Array

Details

Source: base/polygon.js, line 937

updateRenderer()

Uses the boards renderer to update the polygon.

Details

Overrides: JXG.GeometryElement#updateRenderer
Source: base/polygon.js, line 249

Inherited

addParentsFromJCFunctions

Events

Own

none

Inherited

Parameters

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

Details

Source: base/polygon.js, line 55

Extends

JXG.GeometryElement