Polygon Element (jsgl.elements.PolygonElement)

This page document how the polygon element can be drawn and manipulated using JSGL.

The element is somehow similar to polyline in the sense of working with ordered collection of vertices. However, the polygon differs from polyline in that it's path is closed and that it can be filled.

The class inherits from jsgl.elements.AbstractElement.

To create a polygon element, use the .createPolygon() method of a jsgl.Panel object, and add it to its viewport:

var myPolygon = myPanel.createPolygon();
myPanel.addElement(myPolygon);

The polygon element works with an ordered collection of vertices that define its shape.

The API of the polygon element hence contains methods for working with this ordered collection: there are methods for appending, inserting, deleting, and updating the points in the list.

Following methods are inherited from jsgl.elements.AbstractElement:

setZIndex, getZIndex, setCursor, getCursor, addMouseMoveListener, removeMouseMoveListener, addMouseDownListener, removeMouseDownListener, addMouseUpListener, removeMouseUpListener, addMouseOverListener, removeMouseOverListener, addMouseOutListener, removeMouseOutListener, addClickListener, removeClickListener, addDoubleClickListener, and removeDoubleClickListener.

Appends a point to the list of polygon's vertices. The point is specified as a couple of coordinates.

Append vertex (x=50,y=70) the polygon:

myPolygon.addPointXY(50,70)

Add new vertices on mouse clicks:

myPolygon.clearPoints();
 
myPanel.setCursor(jsgl.Cursor.CROSSHAIR);
myPanel.addClickListener(function(eventArgs) {
    myPolygon.addPointXY(eventArgs.getX(), eventArgs.getY());
  });

The above code produces the following result. Click the below panel several times!

Check the mouse events reference to get more info on adding interactivity.

version 1.0

Appends a point to the list of the polygon's vertices. The point is specified as a jsgl.Vector2D object.

Append vertex (x=50,y=70) the list of the polygon's vertices:

myPolygon.addPoint(new jsgl.Vector2D(50,70));

Add new points on mouse clicks:

myPolygon.clearPoints();
 
myPanel.setCursor(jsgl.Cursor.CROSSHAIR);
myPanel.addClickListener(function(eventArgs) {
    myPolygon.addPoint(eventArgs.getLocation());
  });

The above code produces the following result. Click the below panel several times!

Check the mouse events reference to get more info on adding interactivity.

version 1.0

Clears the list of the polygon's vertices. This serves as a reset function if entirely new list of vertices is to be built.

Draw a random polygon whenever the panel is clicked. It is straightforward to use the clearPoints() method every time:

var myPolygon = myPanel.createPolygon();
myPanel.addElement(myPolygon);
 
with(myPolygon.getStroke()) {
  setColor('#396');
  setWeight(2);
}
myPolygon.getFill().setColor('#cfe');
 
/* The draw function. Before entirely new list of points is
   built randomly, clearPoints() is called to empty the list. */
var draw = function() {
  myPolygon.clearPoints();
 
  var numPoints = Math.ceil(3*Math.random())+2;
  for(var i=0; i<numPoints; i++) {
    myPolygon.addPointXY(300*Math.random(), 200*Math.random());
  }
}
 
draw(); // draw some initial polygon
 
/* register draw() as a listener to myPanel's click events */
myPanel.setCursor(jsgl.Cursor.POINTER);
myPanel.addClickListener(draw);

The above code produces the following result:

version 1.0

Gets a point from the list of polygon's vertices at specified index.

jsgl.Vector2D

Alert the 3rd point in the list:

myPolygon.clearPoints();
myPolygon.addPointXY(10,10);
myPolygon.addPointXY(20,10);
myPolygon.addPointXY(30,20);
myPolygon.addPointXY(20,30);
myPolygon.addPointXY(10,30);
 
window.alert(myPolygon.getPointAt(2)); // will show "30 20"

version 1.0

Inserts a new point to the list of the polygon's vertices at the specified index. All the vertices starting at the index up to the end of the list are shifted right. The new point is specified as a couple of real-valued coordinates.

Insert a point at the 3rd position in the list:

myPolygon.clearPoints();
myPolygon.addPointXY(50,150);
myPolygon.addPointXY(50,50);
myPolygon.addPointXY(250,50);
myPolygon.addPointXY(250,150);
// now the points are: [(50,150), (50,50), (250,50), (250,150)]
 
myPolygon.insertPointXYAt(150,100,2);
// now the points are: [(50,150), (50,50), (150,100), (250,50), (250,100)]

Insert point (150,100) at the beginning of the list of vertices:

myPolygon.insertPointXYAt(150,100,0);

Insert points at the 3rd position in the list on mouse clicks:

myPolygon.clearPoints();
myPolygon.addPointXY(50,150);
myPolygon.addPointXY(50,50);
myPolygon.addPointXY(250,50);
myPolygon.addPointXY(250,150);
 
myPanel.addClickListener(function(eventArgs) {
    myPolygon.insertPointXYAt(eventArgs.getX(), eventArgs.getY(), 2);
  });

The above code produces the following result. Use the mouse to click the panel!

version 1.0

Inserts a new point to the list of the polygon's vertices at the specified index. All the vertices starting at the index up to the end of the list are shifted right. The new vertex is specified as a jsgl.Vector2D object.

Insert a point at the 3rd position in the list:

myPolygon.clearPoints();
myPolygon.addPointXY(50,150);
myPolygon.addPointXY(50,50);
myPolygon.addPointXY(250,50);
myPolygon.addPointXY(250,150);
// now the vertices are: [(50,150), (50,50), (250,50), (250,150)]
 
myPolygon.insertPointAt(new jsgl.Vector2D(150,100), 2);
// now the vertices are: [(50,150), (50,50), (150,100), (250,50), (250,100)]

Insert point (150,100) at the beginning of the list of the polygon's vertices:

myPolygon.insertPointAt(new jsgl.Vector2D(150,100), 0);

Insert vertices at the 3rd position in the list on mouse clicks:

myPolygon.clearPoints();
myPolygon.addPointXY(50,150);
myPolygon.addPointXY(50,50);
myPolygon.addPointXY(250,50);
myPolygon.addPointXY(250,150);
 
myPanel.setCursor(jsgl.Cursor.CROSSHAIR);
myPanel.addClickListener(function(eventArgs) {
    myPolygon.insertPointXYAt(eventArgs.getLocation(), 2);
  });

The above code produces the following result. Use the mouse to click the panel!

Removes a point from the list of the polygon's vertices at the specified index. The rest of the list is shifted left after the point is removed. There must be a point present at the index given!

Remove the 3rd vertex from the list:

myPolygon.removePointAt(2);

version 1.0

Updates the coordinates of a point in the list of the polygon's vertices at the specified index to new values. The coordinates are given as a couple of real numbers. Note that the vertex must already be present in the list at given position.

Update the 3rd vertex in the list on mouse clicks:

myPolygon.clearPoints();
myPolygon.addPointXY(50,150);
myPolygon.addPointXY(50,50);
myPolygon.addPointXY(150,100);
myPolygon.addPointXY(250,50);
myPolygon.addPointXY(250,150);
 
myPanel.setCursor(jsgl.Cursor.CROSSHAIR);
myPanel.addClickListener(function(eventArgs) {
    myPolygon.setPointXYAt(eventArgs.getX(), eventArgs.getY(), 2);
  });

The above code will produce the following result. Use the mouse to click the panel!

version 1.0

Updates the coordiates of a point in the list of polygon's vertices at the specified index to new values. The coordinates are specified as jsgl.Vector2D object. Note that the vertex must already be present in the list at given position.

Update the 3rd vertex in the list on mouse clicks:

myPolygon.clearPoints();
myPolygon.addPointXY(50,150);
myPolygon.addPointXY(50,50);
myPolygon.addPointXY(150,100);
myPolygon.addPointXY(250,50);
myPolygon.addPointXY(250,150);
 
myPanel.setCursor(jsgl.Cursor.CROSSHAIR);
myPanel.addClickListener(function(eventArgs) {
    myPolygon.setPointAt(eventArgs.getLocation(), 2);
  });

The above code will produce the following result. Use the mouse to click the panel!

version 1.0