This page documents how circle element can be drawn and controlled using jsgl.elements.CircleElement
class.
The class inherits from jsgl.elements.AbstractElement.
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.
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 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. |
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 circle's center location.
Name | Type | Description |
---|---|---|
newX | Number | The real number that the X-coordiate will be set to. |
Set the X-coordinate of the circle's center to 200:
myCircle.setCenterX(200);
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!
Sets the Y-coordinate of the circle's center location.
Name | Type | Description |
---|---|---|
newY | Number | The real number that the Y-coordiate will be set to. |
Set the Y-coordinate of the circle's center to 100:
myCircle.setCenterY(100);
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!
Sets the center location to a given couple of real-valued coordinates.
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. |
Set the location of the circle's center to [x=200, y=100]:
myCircle.setCenterLocationXY(200, 100);
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!
Sets the circle's center location to a given jsgl.Vector2D object.
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. |
Set the location of the circle's center to [x=200, y=100]:
myCircle.setCenterLocation(new jsgl.Vector2D(200, 100));
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!
Gets the current X-coordinate of the circle's center location.
Make the X-axis coordinate of myCircle
be the same as that of yourCircle
:
myCircle.setCenterX(yourCircle.getCenterX());
Gets the current Y-coordinate of the circle's center location.
Make the Y-axis coordinate of myCircle
be the same as that of yourCircle
:
myCircle.setCenterY(yourCircle.getCenterY());
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.
Make myCircle
be concentric with yourCircle
:
yourCircle.setZIndex(0); myCircle.setZIndex(1); myCircle.setCenterLocation(yourCircle.getCenterLocation());
Sets the radius of the circle.
Name | Type | Description |
---|---|---|
newRadius | Number | Non-negative real number that the radius will be set to. |
Set the radius of the circle to 50, i.e. set its diameter to 100.
myCircle.setRadius(50);
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!
Gets the current radius of the circle.
Number
Make the radius of myCircle
be the same as the radius of yourCircle
:
myCircle.setRadius(yourCircle.getRadius());
Increase the circle's radius by 10:
myCircle.setRadius(myCircle.getRadius()+10);
TBD.
TBD.
Name | Type | Description |
---|
TBD.
TBD.
Name | Type | Description |
---|
version 1.0