Ellipse Element (jsgl.elements.EllipseElement)

This page documents how ellipse element can be drawn and manipulated using JSGL.

The class inherits from jsgl.elements.AbstractElement.

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

var myEllipse = myPanel.createEllipse();
myPanel.addElement(myEllipse);

The object created is of type jsgl.elements.EllipseElement and provides a cross-browser API presented below.

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.

Sets the X-coordinate of the ellipse's center location.

Set the horizontal coordinate of the ellipse's center to be at x=200 in the coordinate system:

myEllipse.setCenterX(200);

version 1.0

Sets the Y-coordinate of the ellipse's center location.

Set the vertical coordinate of the ellipse's center to be at y=150 in the coordinate system:

myEllipse.setCenterY(150);

version 1.0

Sets the center location of the ellipse to a given couple of real-valued coordinates.

Move the center of the ellipse to [x=200,y=150]

myEllipse.setCenterLocationXY(200,150);

version 1.0

Sets the ellipse's center location to a given jsgl.Vector2D object. The object given as parameter is copied, hence future changes in it will not affect behavior of the ellipse.

Move the center of the ellipse to [x=200,y=150]

myEllipse.setCenterLocation(new jsgl.Vector2D(200,150));

version 1.0

Gets the current X-coordinate of the ellipse's center location.

Number

Set the X-coordinate of myEllipse's center location to be the same as of yourEllipse:

myEllipse.setCenterX(yourEllipse.getCenterX());

version 1.0

Gets the current Y-coordinate of the ellipse's center location.

Number

Set the Y-coordinate of myEllipse's center location to be the same as of yourEllipse:

myEllipse.setCenterY(yourEllipse.getCenterY());

version 1.0

Gets the current location of the ellipse's center as jsgl.Vector2D. The object returned is a copy of the EllipseElement's internal representation, so eventual changes in it will not affect behavior of the ellipse.

jsgl.Vector2D

Set the center location of myEllipse to be the same as of yourEllipse, i.e. make both ellipses concentric:

myEllipse.setCenterLocation(yourEllipse.getCenterLocation());

version 1.0

Sets the width of the ellipse. If the ellipse is rotated, this is the width before the rotation.

Set the width of the ellipse to 100:

myEllipse.setWidth(100);

version 1.0

Sets the height of the ellipse. If the ellipse is rotated, this is the height before the rotation.

Set the height of the ellipse to 50:

myEllipse.setHeight(50);

version 1.0

Sets the size of the elllipse to a given couple of real values. If the ellipse is rotated, then this is the size before the rotation.

Set the size of the ellipse to [width=100,height=50]:

myEllipse.setSizeWH(100,50);

version 2.0

Sets the size of the ellipse to a given jsgl.Vector2D object. The X-coordinate of the object means width, while the Y-coordinate means height. If the ellipse is rotated, then this is the size before the rotation. The object given as parameter is copied, hence future changes in it will not affect behavior of the ellipse.

Set the size of the ellipse to [width=100,height=50]:

myEllipse.setSize(new jsgl.Vector2D(100,50));

version 1.0

Gets the current width of the ellipse. If the ellipse is rotated, then this is the width before the rotation.

Number

Make myEllipse be of the same width as yourEllipse:

myEllipse.setWidth(yourEllipse.getWidth());

version 1.0

Gets the current height of the ellipse. If the ellipse is rotated, then this is the height before the rotation.

Number

Make myEllipse be of the same height as yourEllipse:

myEllipse.setHeight(yourEllipse.getHeight());

version 1.0

Gets the current size of the ellipse as jsgl.Vector2D object. The X-coordinate of the object means width, while the Y-coordinate means height. If the ellipse is rotated, this is the size before the rotation. The object returned is a copy of the EllipseElement's internal representation, hence eventual changes in it will not affect behavior of the ellipse.

jsgl.Vector2D

Make myEllipse be of same size (width and height before eventual rotation) as your yourEllipse:

myEllipse.setSize(yourEllipse.getSize());

version 1.0

Sets the new clockwise rotation of the ellipse in degrees.

Rotate the ellipse by 45 degrees:

myEllipse.setRotation(45);

If your application works with radians, you can use the 180*x/Math.PI formula. This may especially be useful when mouse events are involved. The following example shows how to make the ellipse turn to follow the mouse pointer whenever the panel is clicked:

myPanel.addClickListener(function(mouseEvent) {
    var angle = Math.atan2(mouseEvent.getY()-myEllipse.getCenterY(), mouseEvent.getX()-myEllipse.getCenterX());
    myEllipse.setRotation(180*angle/Math.PI);
  });

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

version 1.0

Gets the current clockwise rotation of the ellipse in degrees.

Number

Make the rotation of myEllipse to be the same as of yourEllipse:

myEllipse.setRotation(yourEllipse.getRotation());

version 1.0

TBD.

version 1.0

TBD.

version 1.0

TBD.

version 1.0

TBD.

version 1.0