Circle Element (jsgl.elements.CircleElement)

This page documents how circle element can be drawn and controlled using jsgl.elements.CircleElement class.

The class inherits from jsgl.elements.AbstractElement.

Creation

To create a circle object, use the .createCircle() factory method of a jsgl.Panel object and add it to its viewport:

var myCircle = myPanel.createCircle();
myPanel.addElement(myCircle);

The object created is of type jsgl.elements.CircleElement and provides cross-browser API described below.

Method Summary

Location, Radius

Setters
`setCenterX(newX: Number)`	Sets the X-coordinate of the circle's center location.
`setCenterY(newY: Number)`	Sets the Y-coordinate of the circle's center location.
`setCenterLocationXY(newX: Number, newY: Number)`	Sets the center location to a given couple of real-valued coordinates.
`setCenterLocation(newLocation: jsgl.Vector2D)`	Sets the circle's center location to a given `jsgl.Vector2D` object.
`setRadius(newRadius: Number)`	Sets the radius of the circle.
Getters
`getCenterX() : Number`	Gets the current X-coordinate of the circle's center location.
`getCenterY() : Number`	Gets the current Y-coordinate of the circle's center location.
`getCenterLocation() : jsgl.Vector2D`	Gets the current location of the circle's center as `jsgl.Vector2D` object.
`getRadius`() : Number	Gets the current radius of the circle.

Stroke, Fill

Stroke object
`getStroke() : jsgl.stroke.AbstractStroke`	Gets the current stroke object that is used for styling circle's outline.
`setStroke(newStroke: jsgl.stroke.AbstractStroke)`	Sets the new stroke object to be applied for styling outline of the circle.
Fill object
`getFill() : jsgl.fill.AbstractFill`	Gets the current fill object that is used for styling circle's interior.
`setFill(newFill: jsgl.fill.AbstractFill)`	Sets the new fill object to be applied for styling interior of the circle.

Inherited

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.

Method Detail



setCenterX(newX: Number)

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

Parameters

Name	Type	Description
newX	Number	The real number that the X-coordiate will be set to.

Example 1

Set the X-coordinate of the circle's center to 200:

myCircle.setCenterX(200);

Example 2

Move the circle horizontally on mouse clicks:

myCircle.setCenterLocationXY(150,75);
 
myPanel.setCursor(jsgl.Cursor.W_RESIZE);
myPanel.addClickListener(function(eventArgs) {
    myCircle.setCenterX(eventArgs.getX());
  });

The above code can be used to produce the following result. Click the panel to move the circle horizontally!

Since

version 1.0



setCenterY(newY: Number)

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

Parameters

Name	Type	Description
newY	Number	The real number that the Y-coordiate will be set to.

Example 1

Set the Y-coordinate of the circle's center to 100:

myCircle.setCenterY(100);

Example 2

Move the circle horizontally on mouse clicks:

myCircle.setCenterLocationXY(75,125);
 
myPanel.setCursor(jsgl.Cursor.N_RESIZE);
myPanel.addClickListener(function(eventArgs) {
    myCircle.setCenterY(eventArgs.getY());
  });

The above code can be used to produce the following result. Click the panel to move the circle horizontally!

Since

version 1.0



setCenterLocationXY(newY: Number, newY: Number)

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

Parameters

Name	Type	Description
newX	Number	The real number that the X-coordiate will be set to.
newY	Number	The real number that the Y-coordiate will be set to.

Example 1

Set the location of the circle's center to [x=200, y=100]:

myCircle.setCenterLocationXY(200, 100);

Example 2

Move the circle's center on mouse clicks:

myCircle.setCenterLocationXY(100, 100);
 
myPanel.setCursor(jsgl.Cursor.CROSSHAIR);
myPanel.addClickListener(function(eventArgs) {
    myCircle.setCenterLocationXY(eventArgs.getX(), eventArgs.getY());
  });

The above code can be used to produce the following result. Click the panel to move the circle!

Since

version 1.0



setCenterLocation(newLocation: jsgl.Vector2D)

Sets the circle's center location to a given jsgl.Vector2D object.

Parameters

Name	Type	Description
newLocation	`jsgl.Vector2D`	The location that the circle's center will be moved to. The parameter object is copied, hence further changes in it will not affect the circle.

Example 1

Set the location of the circle's center to [x=200, y=100]:

myCircle.setCenterLocation(new jsgl.Vector2D(200, 100));

Example 2

Move the circle's center on mouse clicks:

myCircle.setCenterLocationXY(100, 100);
 
myPanel.setCursor(jsgl.Cursor.CROSSHAIR);
myPanel.addClickListener(function(eventArgs) {
    myCircle.setCenterLocation(eventArgs.getLocation());
  });

The above code can be used to produce the following result. Click the panel to move the circle!

Since

version 1.0



getCenterX() : Number

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

Example

Make the X-axis coordinate of myCircle be the same as that of yourCircle:

myCircle.setCenterX(yourCircle.getCenterX());

Since

version 1.0



getCenterY() : Number

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

Example

Make the Y-axis coordinate of myCircle be the same as that of yourCircle:

myCircle.setCenterY(yourCircle.getCenterY());

Since

version 1.0



getCenterLocation() : jsgl.Vector2D

Gets the current location of the circle's center as jsgl.Vector2D object.

jsgl.Vector2D object holding current coordinates of the circle's center. This object is a copy of the circle element's internal representation, hence future changes in it will not affect the circle's behavior.

Example

Make myCircle be concentric with yourCircle:

yourCircle.setZIndex(0);
myCircle.setZIndex(1);
myCircle.setCenterLocation(yourCircle.getCenterLocation());

Since

version 1.0



setRadius(newRadius: Number)

Sets the radius of the circle.

Parameters

Name	Type	Description
newRadius	Number	Non-negative real number that the radius will be set to.

Example 1

Set the radius of the circle to 50, i.e. set its diameter to 100.

myCircle.setRadius(50);

Example 2

Set the circle's radius on mouse clicks. Indeed, Pythagorean theorem needs to be used to accomplish this:

myCircle.setCenterLocationXY(100, 100);
myCircle.setRadius(30);
 
myPanel.setCursor(jsgl.Cursor.CROSSHAIR);
myPanel.addClickListener(function(eventArgs) {
    var x = eventArgs.getX(),
        y = eventArgs.getY();
    myCircle.setRadius(Math.sqrt((100-x)*(100-x)+(100-y)*(100-y)));
  });

The above code can be used to produce the following result. Click the panel to change the circle's radius!

Since

version 1.0



getRadius() : Number

Gets the current radius of the circle.

Returns

Number

Example 1

Make the radius of myCircle be the same as the radius of yourCircle:

myCircle.setRadius(yourCircle.getRadius());

Example 2

Increase the circle's radius by 10:

myCircle.setRadius(myCircle.getRadius()+10);

Since

version 1.0



getStroke() : jsgl.stroke.AbstractStroke

TBD.



setStroke(newStroke: jsgl.stroke.AbstractStroke)

TBD.

Parameters

Name	Type	Description

Example

Since

version 1.0



getFill() : jsgl.fill.AbstractFill

TBD.



setFill(newFill: jsgl.fill.AbstractFill)

TBD.

Parameters

Name	Type	Description

Example

Since

version 1.0