Polyline Element (jsgl.elements.Polyline)

This page documents how polyline (i.e. multi-segment line) can be drawn and manipulated using JSGL.

The class inherits from jsgl.elements.AbstractElement.

To create polyline element, use the .createPolyline() method of a jsgl.Panel object. To make the polyline visible, add it to the panel's viewport:

var myPolyline = myPanel.createPolyline();
myPanel.addElement(myPolyline);

The polyline element works with an ordered collection of vertices that define the set of line segments that the polyline consists of.

The API of the polyline 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 polyline's vertices. The point is specified as a couple of coordinates.

Append vertex (x=30,y=50) the polyline:

myPolyline.addPointXY(30,50)

Add new points on mouse clicks:

var myPolyline = myPanel.createPolyline();
myPanel.addElement(myPolyline);
with(myPolyline.getStroke()) {
  setColor('red');
  setWeight(2);
}
 
myPanel.setCursor(jsgl.Cursor.CROSSHAIR);
myPanel.addClickListener(function(eventArgs) {
    myPolyline.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 polyline's vertices. The point is specified as a jsgl.Vector2D object.

Append vertex (x=30,y=50) the polyline:

myPolyline.addPoint(new jsgl.Vector2D(30,50));

Add new points on mouse clicks:

var myPolyline = myPanel.createPolyline();
myPanel.addElement(myPolyline);
with(myPolyline.getStroke()) {
  setColor('red');
  setWeight(2);
}
 
myPanel.setCursor(jsgl.Cursor.CROSSHAIR);
myPanel.addClickListener(function(eventArgs) {
    myPolyline.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 polyline's vertices. This serves as a reset function if entirely new list of vertices is to be built.

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

var myPolyline = myPanel.createPolyline();
myPanel.addElement(myPolyline);
 
with(myPolyline.getStroke()) {
  setColor('#369');
  setWeight(2);
}
 
/* The draw function. Before entirely new list of points is
   built randomly, clearPoints() is called to empty the list. */
var draw = function() {
  myPolyline.clearPoints();
 
  var numPoints = Math.ceil(50*Math.random())+1;
  for(var i=0; i<numPoints; i++) {
    myPolyline.addPointXY(300*Math.random(), 200*Math.random());
  }
}
 
draw(); // draw some initial polyline
 
/* 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:

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

version 1.0

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

jsgl.Vector2D

Alert the 3rd point in the list:

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

version 1.0

Gets the current number of the polyline's vertices.

Show the number of points that the polyline currently consists of:

myPolyline.clearPoints();
window.alert(myPolyline.getPointsCount()); // will show "0"
 
myPolyline.addPointXY(10,10);
myPolyline.addPointXY(20,10);
myPolyline.addPointXY(30,20);
myPolyline.addPointXY(20,30);
myPolyline.addPointXY(10,30);
window.alert(myPolyline.getPointsCount()); // will show "5"

version 1.0

Inserts a new point to the list of the polyline's vertices at the specified index. All the points 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:

myPolyline.clearPoints();
myPolyline.addPointXY(50,150);
myPolyline.addPointXY(50,50);
myPolyline.addPointXY(250,50);
myPolyline.addPointXY(250,150);
// now the points are: [(50,150), (50,50), (250,50), (250,150)]
 
myPolyline.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 polyline:

myPolyline.insertPointXYAt(150,100,0);

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

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

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

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

version 1.0

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

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

myPolyline.clearPoints();
myPolyline.addPointXY(50,150);
myPolyline.addPointXY(50,50);
myPolyline.addPointXY(250,50);
myPolyline.addPointXY(250,150);
// now the points are: [(50,150), (50,50), (250,50), (250,150)]
 
myPolyline.insertPointAt(new jsgl.Vector2D(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 polyline:

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

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

myPolyline.clearPoints();
myPolyline.addPointXY(50,150);
myPolyline.addPointXY(50,50);
myPolyline.addPointXY(250,50);
myPolyline.addPointXY(250,150);
 
myPanel.addClickListener(function(eventArgs) {
    myPolyline.insertPointXYAt(eventArgs.getLocation(), 2);
  });

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

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

version 1.0

Removes a point from the list of the polyline'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 point from the list:

myPolyline.removePointAt(2);

version 1.0

Updates the coordinates of a point in the list of the polyline'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 point in the list on mouse clicks:

myPolyline.clearPoints();
myPolyline.addPointXY(50,150);
myPolyline.addPointXY(50,50);
myPolyline.addPointXY(150,100);
myPolyline.addPointXY(250,50);
myPolyline.addPointXY(250,150);
 
myPanel.addClickListener(function(eventArgs) {
    myPolyline.setPointXYAt(eventArgs.getX(), eventArgs.getY(), 2);
  });

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

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

version 1.0

Updates the coordiates of a point in the list of the polyline'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 point in the list on mouse clicks:

myPolyline.clearPoints();
myPolyline.addPointXY(50,150);
myPolyline.addPointXY(50,50);
myPolyline.addPointXY(150,100);
myPolyline.addPointXY(250,50);
myPolyline.addPointXY(250,150);
 
myPanel.addClickListener(function(eventArgs) {
    myPolyline.setPointAt(eventArgs.getLocation(), 2);
  });

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

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

version 1.0