JavaScript Graphics Library (JSGL.org) Draw and move interactive vector graphics easily in Javascript!

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.

UML

jsgl.elements.CircleElement class diagram

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

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.

Returns

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.

Returns

Example

Since

version 1.0

setStroke(newStroke: jsgl.stroke.AbstractStroke)

TBD.

Parameters

Name Type Description

Example

Since

version 1.0

getFill() : jsgl.fill.AbstractFill

TBD.

Returns

Example

Since

version 1.0

setFill(newFill: jsgl.fill.AbstractFill)

TBD.

Parameters

Name Type Description

Example

Since

version 1.0

See also

 
circle-element.txt · Last modified: 2013/03/18 13:40 by Tomas Rehorek
 
Except where otherwise noted, content on this wiki is licensed under the following license: GNU Free Documentation License 1.3
Driven by DokuWiki Powered by PHP Valid XHTML 1.0 Valid CSS