API Docs for: 0.99.4
Show:

Polygon Class

PSEUDO

Extends JXG.Polygon
Module: JXG

A polygon is an area enclosed by a set of border lines which are determined by

  • a list of points or
  • a list of coordinate arrays or
  • a function returning a list of coordinate arrays.

Each two consecutive points of the list define a line.

Constructor

Polygon

(
  • vertices
)

Parameters:

  • vertices Array

    The polygon's vertices. If the first and the last vertex don't match the first one will be added to the array by the creator.

Throws:

Exception:

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

Example:

 var p1 = board.create('point', [0.0, 2.0]);
         var p2 = board.create('point', [2.0, 1.0]);
         var p3 = board.create('point', [4.0, 6.0]);
         var p4 = board.create('point', [1.0, 4.0]);
        
         var pol = board.create('polygon', [p1, p2, p3, p4]);
        
 var p = [[0.0, 2.0], [2.0, 1.0], [4.0, 6.0], [4.0, 6.0], [1.0, 3.0]];
        
         var pol = board.create('polygon', p, {hasInnerPoints: true});
        
 var f1 = function() { return [0.0, 2.0]; },
             f2 = function() { return [2.0, 1.0]; },
             f3 = function() { return [4.0, 6.0]; },
             f4 = function() { return [1.0, 4.0]; },
             cc1 = board.create('polygon', [f1, f2, f3, f4]);
        

Methods

_set

(
  • property
  • value
)
private chainable

Sets the value of property property to value.

Parameters:

  • property String

    The property's name.

  • value Object

    The new value

addChild

(
  • obj
)
chainable

Add an element as a child to the current element. Can be used to model dependencies between geometry elements.

Parameters:

addDescendants

(
  • obj
)
private chainable

Adds the given object to the descendants list of this object and all its child objects.

Parameters:

addParents

(
  • parents
)
JXG.Object chainable

Adds ids of elements to the array this.parents. This method needs to be called if some dependencies can not be detected automatically by JSXGraph. For example if a function graph is given by a function which referes to coordinates of a point, calling addParents() is necessary.

Parameters:

  • parents Array

    Array of elements or ids of elements. Alternatively, one can give a list of objects as parameters.

Returns:

JXG.Object:

reference to the object itself.

Example:

// Movable function graph
                    var A = board.create('point', [1, 0], {name:'A'}),
                        B = board.create('point', [3, 1], {name:'B'}),
                        f = board.create('functiongraph', function(x) {
                                 var ax = A.X(),
                                     ay = A.Y(),
                                     bx = B.X(),
                                     by = B.Y(),
                                    a = (by - ay) / ( (bx - ax) * (bx - ax) );
                                 return a * (x - ax) * (x - ax) + ay;
                             }, {fixed: false});
                    f.addParents([A, B]);
                    

addPoint

(
  • p
)
JXG.Polygon chainable

Add more points to the polygon. The new points will be inserted at the end.

Parameters:

Returns:

JXG.Polygon:

Reference to the polygon

addRotation

(
  • angle
)
chainable

Rotate texts or images by a given degree. Works only for texts where JXG.Text#display equal to "internal".

Parameters:

  • angle Number

    The degree of the rotation (90 means vertical text).

See also:

  • JXG.GeometryElement#rotate

addTransform

(
  • transform
)
JXG.GeometryElement chainable

Add transformations to this element.

Parameters:

  • transform JXG.Transformation | Array

    Either one {@link JXG.Transformation} or an array of {@link JXG.Transformation}s.

Returns:

JXG.GeometryElement:

Reference to the element.

animate

(
  • hash
  • time
  • [options]
)
JXG.GeometryElement chainable

Animates properties for that object like stroke or fill color, opacity and maybe even more later.

Parameters:

  • hash Object

    Object containing properties with target values for the animation.

  • time Number

    Number of milliseconds to complete the animation.

  • [options] Object optional

    Optional settings for the animation:

    • callback: A function that is called as soon as the animation is finished.

Returns:

JXG.GeometryElement:

A reference to the object

Area

() Number

Area of (not self-intersecting) polygon

Returns:

Number:

Area of (not self-intersecting) polygon

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

Returns:

Array:

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

Example:

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

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

bounds

() Array

Dimensions of the smallest rectangle enclosing the element.

Returns:

Array:

The coordinates of the enclosing rectangle in a format like the bounding box in {@link JXG.Board#setBoundingBox}.

clearTrace

() chainable

Removes all objects generated by the trace function.

cloneToBackground

() chainable

Copy the element to background. This is used for tracing elements.

countChildren

() Number private

Counts the direct children of an object without counting labels.

Returns:

Number:

Number of children

createGradient

() private chainable

Creates a gradient nodes in the renderer.

See also:

  • JXG.SVGRenderer#setGradient

createLabel

() chainable

Creates a label element for this geometry element.

See also:

  • #addLabelToElement

dash

(
  • d
)
deprecated chainable

Inherited from JXG.GeometryElement: src/base/element.js:1703

Deprecated: Use {@link #setAttribute}

Set the dash type of an element

Parameters:

  • d Number

    Integer which determines the way of dashing an element's outline.

See also:

draggable

() Boolean private

Decides whether an element can be dragged. This is used in JXG.GeometryElement#setPositionDirectly methods where all parent elements are checked if they may be dragged, too.

Returns:

fillColor

(
  • fColor
)
deprecated chainable

Inherited from JXG.GeometryElement: src/base/element.js:1657

Deprecated: Use {@link #setAttribute}

Set the fillColor of an element

Parameters:

  • fColor String

    String which determines the fill color of an object.

See also:

findPoint

(
  • p
)
Number

Finds the index to a given point reference.

Parameters:

  • p JXG.Point

    Reference to an element of type {@link JXG.Point}

Returns:

Number:

Index of the point in vertices or -1 if not found.

generatePolynomial

() Array

Array of strings containing the polynomials defining the element. Used for determining geometric loci the groebner way.

Returns:

Array:

An array containing polynomials describing the locus of the current object.

getAttribute

(
  • key
)

Get the value of the property key.

Parameters:

  • key String

    The name of the property you are looking for

Returns:

The value of the property

getAttributes

() Object

Retrieve a copy of the current visProp.

Returns:

getLabelAnchor

() JXG.Coords

Returns the coords object where the label of the element shall be drawn. Differs in some cases from the values that getTextAnchor returns.

Returns:

JXG.Coords:

JXG.Coords Place where the text shall be drawn.

See also:

getName

() String

Returns the elements name, used in JessieCode.

Returns:

getParents

() Array

List of the element ids resp. values used as parents in JXG.Board#create.

Returns:

getProperty

() deprecated

Inherited from JXG.GeometryElement: src/base/element.js:1237

Deprecated: Use {@link JXG.GeometryElement#getAttribute}.

Deprecated alias for JXG.GeometryElement#getAttribute.

getTextAnchor

() JXG.Coords

Returns the coords object where a text that is bound to the element shall be drawn. Differs in some cases from the values that getLabelAnchor returns.

Returns:

JXG.Coords:

JXG.Coords Place where the text shall be drawn.

See also:

getTpye

() String

The type of the element as used in JXG.Board#create.

Returns:

handleSnapToGrid

(
  • force
)
JXG.GeometryElement chainable

Move an element to its nearest grid point. The function uses the coords object of the element as its actual position. If there is no coords object, nothing is done.

Parameters:

  • force Boolean

    force snapping independent from what the snaptogrid attribute says

Returns:

JXG.GeometryElement:

Reference to this element

hasPoint

(
  • x
  • y
)
Boolean

Inherited from JXG.GeometryElement but overwritten in src/base/polygon.js:166

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

Parameters:

  • x Number

    Coordinate in x direction, screen coordinates.

  • y Number

    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=false]
)
JXG.Polygon chainable

Inherited from JXG.GeometryElement but overwritten in src/base/polygon.js:274

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

Parameters:

  • [borderless=false] Boolean optional

    If set to true, the polygon is treated as a polygon without borders, i.e. the borders will not be hidden.

Returns:

JXG.Polygon:

Reference to this polygon

highlight

(
  • [force=false]
)
chainable

Highlights the element.

Parameters:

  • [force=false] Boolean optional

    Force the highlighting

highlightFillColor

(
  • fColor
)
deprecated chainable

Inherited from JXG.GeometryElement: src/base/element.js:1673

Deprecated: Use {@link #setAttribute}

Set the highlightFillColor of an element

Parameters:

  • fColor String

    String which determines the fill color of an object when its highlighted.

See also:

highlightStrokeColor

(
  • sColor
)
deprecated chainable

Inherited from JXG.GeometryElement: src/base/element.js:1611

Deprecated: Use {@link #setAttribute}

Set the highlightStrokeColor of an element

Parameters:

  • sColor String

    String which determines the stroke color of an object when its highlighted.

See also:

insertPoints

(
  • idx
  • p
)
JXG.Polygon chainable

Adds more points to the vertex list of the polygon, starting with index <i

Parameters:

  • idx Number

    The position where the new vertices are inserted, starting with 0.

  • p JXG.Point

    Arbitrary number of points to insert.

Returns:

JXG.Polygon:

Reference to the polygon object

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 JXG.Polygon#sutherlandHodgman.

Parameters:

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.

Example:

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

labelColor

(
  • lColor
)
deprecated chainable

Inherited from JXG.GeometryElement: src/base/element.js:1688

Deprecated: Use {@link #setAttribute}

Set the labelColor of an element

Parameters:

  • lColor String

    String which determines the text color of an object's label.

See also:

noHighlight

() chainable

Uses the "normal" properties of the element.

normalize

() private chainable

Normalize the element's standard form.

prepareUpdate

() private chainable

Notify all child elements for updates.

remove

() private

Inherited from JXG.GeometryElement but overwritten in src/base/polygon.js:395

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.

removeChild

(
  • obj
)
chainable

Remove an element as a child from the current element.

Parameters:

removeDescendants

(
  • obj
)
private chainable

Removes the given object from the descendants list of this object and all its child objects.

Parameters:

removePoints

(
  • p
)
JXG.Polygon chainable

Removes given set of vertices from the polygon

Parameters:

  • p JXG.Point

    Arbitrary number of vertices as {@link JXG.Point} elements or index numbers

Returns:

JXG.Polygon:

Reference to the polygon

resolveShortcuts

(
  • properties
)
Object

Resolves property shortcuts like color and expands them, e.g. strokeColor and fillColor. Writes the expanded properties back to the given properties.

Parameters:

Returns:

Object:

The given parameter with shortcuts expanded.

setArrow

(
  • firstArrow
  • lastArrow
)
chainable

Determines whether the element has arrows at start or end of the arc.

Parameters:

  • firstArrow Boolean

    True if there is an arrow at the start of the arc, false otherwise.

  • lastArrow Boolean

    True if there is an arrow at the end of the arc, false otherwise.

setAttribute

(
  • attributes
)
chainable

Sets an arbitrary number of attributes.

Parameters:

  • attributes Object

    An object with attributes.

Example:

// Set property directly on creation of an element using the attributes object parameter
                    var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 5, 5, 1]};
                    var p = board.create('point', [2, 2], {visible: false});
                    
                    // Now make this point visible and fixed:
                    p.setAttribute({
                        fixed: true,
                        visible: true
                    });

setDash

(
  • dash
)
private chainable

Set the dash style of an object. See undefined for a list of available dash styles. You should use undefined instead of this method.

Parameters:

  • dash Number

    Indicates the new dash style

setLabel

(
  • str
)
chainable

Sets a label and it's text If label doesn't exist, it creates one

Parameters:

setLabelText

(
  • str
)
chainable

Updates the element's label text, strips all html.

Parameters:

setName

(
  • str
)
chainable

Updates the element's label text and the element's attribute "name", strips all html.

Parameters:

setParents

(
  • parents
)
JXG.Object chainable

Sets ids of elements to the array this.parents. First, this.parents is cleared. See undefined.

Parameters:

  • parents Array

    Array of elements or ids of elements. Alternatively, one can give a list of objects as parameters.

Returns:

JXG.Object:

reference to the object itself.

setPosition

(
  • method
  • coords
)
JXG.GeometryElement chainable

Translates the object by (x, y). In case the element is defined by points, the defining points are translated, e.g. a circle constructed by a center point and a point on the circle line.

Parameters:

  • method Number

    The type of coordinates used here. Possible values are {@link JXG.COORDS_BY_USER} and {@link JXG.COORDS_BY_SCREEN}.

  • coords Array

    array of translation vector.

Returns:

JXG.GeometryElement:

Reference to the element object.

setPositionDirectly

(
  • method
  • coords
  • oldcoords
)
JXG.Polygon chainable

Inherited from JXG.GeometryElement but overwritten in src/base/polygon.js:645

Moves the polygon by the difference of two coordinates.

Parameters:

  • method Number

    The type of coordinates used here. Possible values are {@link JXG.COORDS_BY_USER} and {@link JXG.COORDS_BY_SCREEN}.

  • coords Array

    coordinates in screen/user units

  • oldcoords Array

    previous coordinates in screen/user units

Returns:

JXG.Polygon:

this element

setProperty

() deprecated

Inherited from JXG.GeometryElement: src/base/element.js:1030

Deprecated: Use {@link JXG.GeometryElement#setAttribute}.

Deprecated alias for JXG.GeometryElement#setAttribute.

shadow

(
  • s
)
deprecated chainable

Inherited from JXG.GeometryElement: src/base/element.js:1733

Deprecated: Use {@link #setAttribute}

Set the shadow of an element

Parameters:

  • s Boolean

    Boolean which determines whether the element has a shadow or not.

See also:

showElement

(
  • [borderless=false]
)
JXG.Polygon chainable

Inherited from JXG.GeometryElement but overwritten in src/base/polygon.js:305

Make the element visible.

Parameters:

  • [borderless=false] Boolean optional

    If set to true, the polygon is treated as a polygon without borders, i.e. the borders will not be shown.

Returns:

JXG.Polygon:

Reference to this polygon

snapToGrid

() JXG.GeometryElement chainable

Snaps the element to the grid. Only works for points, lines and circles. Points will snap to the grid as defined in their properties undefined and undefined. Lines and circles will snap their parent points to the grid, if they have undefined set to true.

Returns:

JXG.GeometryElement:

Reference to the element.

snapToPoints

() JXG.GeometryElement chainable

Snaps the element to points. Only works for points. Points will snap to the next point as defined in their properties undefined and undefined. Lines and circles will snap their parent points to points.

Returns:

JXG.GeometryElement:

Reference to the element.

strokeColor

(
  • sColor
)
deprecated chainable

Inherited from JXG.GeometryElement: src/base/element.js:1626

Deprecated: Use {@link #setAttribute}

Set the strokeColor of an element

Parameters:

  • sColor String

    String which determines the stroke color of an object.

See also:

strokeWidth

(
  • width
)
deprecated chainable

Inherited from JXG.GeometryElement: src/base/element.js:1641

Deprecated: Use {@link #setAttribute}

Set the strokeWidth of an element

Parameters:

  • width Number

    Integer which determines the stroke width of an outline.

See also:

sutherlandHodgman

(
  • polygon
)
Array private

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:

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.

toJSON

() private

EXPERIMENTAL. Generate JSON object code of visProp and other properties.

Returns:

JSON string containing element's properties.

update

() chainable

Update method. Position and content of the element are updated. The element is redrawn by a subsequent call of {@see #updateRenderer}. Can be used sometimes to commit changes to the object.

updateRenderer

() private chainable

Provide updateRenderer method.

visible

(
  • v
)
deprecated chainable

Inherited from JXG.GeometryElement: src/base/element.js:1718

Deprecated: Use {@link #setAttribute}

Set the visibility of an element

Parameters:

  • v Boolean

    Boolean which determines whether the element is drawn.

See also:

Properties

_org_type

Number final

Original type of the element at construction time. Used for removing glider property.

_pos

Number private

The position of this element inside the undefined.

Default: -1

ancestors

Object

Elements on which this element depends on are stored here.

baseElement

JXG.GeometryElement private

Default: null

board

JXG.Board

Reference to the board associated with the element.

borders

Array

References to the border lines of the polygon.

childElements

Object

Stores all dependent objects to be updated when this point is moved.

descendants

Object

Elements depending on this element are stored here.

dump

Boolean

The element is saved with an explicit entry in the file (true) or implicitly via a composition.

Default: true

elementClass

Number final

The element's class.

elType

String

The string used with JXG.Board#create

hasLabel

Boolean

If element has a label subelement then this property will be set to true.

Default: false

highlighted

Boolean

True, if the element is currently highlighted.

Default: false

id

String

Unique identifier for the element. Equivalent to id-attribute of renderer element.

isDraggable

Boolean

Controls if this element can be dragged. In GEONExT only free points and gliders can be dragged.

Default: false

isReal

Boolean

If element is in two dimensional real space this is true, else false.

Default: true

lastDragTime

Date

Time stamp containing the last time this element has been dragged.

Default: creation time

methodMap

Object

The methodMap determines which methods can be called from within JessieCode and under which name it can be used. The map is saved in an object, the name of a property is the name of the method used in JessieCode, the value of a property is the name of the method in JavaScript.

mouseover

Boolean

Is the mouse over this element?

Default: false

name

String

Not necessarily unique name for the element.

Default: Name generated by {@link JXG.Board#generateName}.

See also:

needsUpdate

Boolean

Controls if updates are necessary

Default: true

notExistingParents

Object

Stores all Intersection Objects which in this moment are not real and so hide this element.

numTraces

Number

Counts the number of objects drawn as part of the trace of the element.

See also:

parents

Object

Ids of elements on which this element depends directly are stored here.

quadraticform

Array

Quadratic form representation of circles (and conics)

Default: [[1,0,0],[0,1,0],[0,0,1]]

rendNode

Object

Stores the rendering node for the element.

stdform

Array

[c,b0,b1,a,k,r,q0,q1]

See A.E. Middleditch, T.W. Stacey, and S.B. Tor: "Intersection Algorithms for Lines and Circles", ACM Transactions on Graphics, Vol. 8, 1, 1989, pp 25-40.

The meaning of the parameters is: Circle: points p=[p0,p1] on the circle fulfill a<p,p> + <b,p> + c = 0 For convenience we also store r: radius k: discriminant = sqrt(<b,b>-4ac) q=[q0,q1] center

Points have radius = 0. Lines have radius = infinity. b: normalized vector, representing the direction of the line.

Should be put into Coords, when all elements possess Coords.

Default: [1, 0, 0, 0, 1, 1, 0, 0]

subs

Object

Subs contains the subelements, created during the create method.

symbolic

Object

Stores variables for symbolic computations

traces

Object

Keeps track of all objects drawn as part of the trace of the element.

See also:

transformations

Array

Stores the transformations which are applied during update in an array

See also:

type

Number final

Type of the element.

vertices

Array

References to the points defining the polygon. The last vertex is the same as the first vertex.

visProp

Object

An associative array containing all visual properties.

Default: empty object

withLines

Boolean private

If false the polygon has no edges (borders).

Events

attribute

Notify everytime an attribute is changed.

Event Payload:

  • o Object

    A list of changed attributes and their new value.

  • el Object

    Reference to the element

attribute:<attribute>

This is a generic event handler. It exists for every possible attribute that can be set for any element, e.g. if you want to be notified everytime an element's strokecolor is changed, is the event attribute:strokecolor.

Event Payload:

down

Whenever the user starts to touch or click an element.

Event Payload:

  • e Event

    The browser's event object.

drag

This event is fired whenever the user drags an element.

Event Payload:

  • e Event

    The browser's event object.

mousedown

Whenever the user starts to click an element.

Event Payload:

  • e Event

    The browser's event object.

mousedrag

This event is fired whenever the user drags the element with a mouse.

Event Payload:

  • e Event

    The browser's event object.

mousemove

This event is fired whenever the user is moving the mouse over an element.

Event Payload:

  • e Event

    The browser's event object.

mouseout

This event is fired whenever the user puts the mouse away from an element.

Event Payload:

  • e Event

    The browser's event object.

mouseover

This event is fired whenever the user puts the mouse over an element.

Event Payload:

  • e Event

    The browser's event object.

mouseup

Whenever the user releases the mousebutton over an element.

Event Payload:

  • e Event

    The browser's event object.

move

This event is fired whenever the user is moving over an element.

Event Payload:

  • e Event

    The browser's event object.

out

This event is fired whenever the user is leaving an element.

Event Payload:

  • e Event

    The browser's event object.

over

This event is fired whenever the user is hovering over an element.

Event Payload:

  • e Event

    The browser's event object.

touchdown

Whenever the user starts to touch an element.

Event Payload:

  • e Event

    The browser's event object.

touchdrag

This event is fired whenever the user drags the element on a touch device.

Event Payload:

  • e Event

    The browser's event object.

touchup

Whenever the user stops touching an element.

Event Payload:

  • e Event

    The browser's event object.

up

Whenever the user stops to touch or click an element.

Event Payload:

  • e Event

    The browser's event object.