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

Class jsgl.elements.AbstractElement

In JSGL API, jsgl.elements.AbstractElement is a base class from which all the elements (graphic primitives) are inherited.

Following JSGL elements inherit from and hence implement the methods of jsgl.elements.AbstractElement:

The methods centralized in jsgl.elements.AbstractElement cover:

  • z-index positioning of the elements,
  • mouse events handling, allowing the application to add interactivity.

Method Summary

Z-index, Cursor

Setters
setZIndex(newZIndex: Number) Sets the new Z-axis index of the element.
setCursor(newCursor: jsgl.Cursor) Sets the new mouse cursor for the element.
Getters
getZIndex() : Number Gets the curent Z-axis index of the element.
getCursor() : jsgl.Cursor Gets the current mouse cursor of the element.

Mouse Events

Adding Listeners
addMouseMoveListener(listener: Function) Adds a listener function for handling mouse move events on the element.
addMouseDownListener(listener: Function) Adds a listener function for handling mouse down events on the element.
addMouseUpListener(listener: Function) Adds a listener function for handling mouse up events on the element.
addMouseOverListener(listener: Function) Adds a listener function for handling mouse over events on the element.
addMouseOutListener(listener: Function) Adds a listener function for handling mouse out events on the element.
addClickListener(listener: Function) Adds a listener function for handling click events on the element.
addDoubleClickListener(listener: Function) Adds a listener function for handling double click events on the element.
Removing Listeners
removeMouseMoveListener(listener: Function) Removes a listener function from the pool of mouse move event listeners.
removeMouseDownListener(listener: Function) Removes a listener function from the pool of mouse down event listeners.
removeMouseUpListener(listener: Function) Removes a listener function from the pool of mouse up event listeners.
removeMouseOverListener(listener: Function) Removes a listener function from the pool of mouse over event listeners.
removeMouseOutListener(listener: Function) Removes a listener function from the pool of mouse out event listeners.
removeClickListener(listener: Function) Removes a listener function from the pool of click event listeners.
removeDoubleClickListener(listener: Function) Removes a listener function from the pool of double click event listeners.

Method Detail

setZIndex(newZIndex: Number)

Sets the new Z-axis index of the element. This allows you to specify the order in which the elements will be painted.

Parameters

Name Type Description
newZIndex Number The new z-index.

Example

Set the Z-axis index of myElement to 5:

myElement.setZIndex(5);

Demo

You can see how the z-index positioning works on the following demonstration:

circle.setZIndex();
triangle.setZIndex();
square.setZIndex();

Since

version 1.0 (correction done in version 2.0)

getZIndex() : Number

Gets the curent Z-axis index of the element.

Returns

Number

Example

Increase the myElement's z-index by one:

myElement.setZIndex(myElement.getZIndex()+1);

Since

version 1.0

setCursor(newCursor: jsgl.Cursor)

Sets the new mouse cursor for the element.

Parameters

Name Type Description
newCursor jsgl.Cursor The new cursor.

Example

Set various cursors:

myCircle.setCursor(jsgl.Cursor.POINTER);
myPolygon.setCursor(jsgl.Cursor.CROSSHAIR);
myRect.setCursor(jsgl.Cursor.HELP);

The above code can be used to produce the following result. Move your mouse over the elements!

Since

version 2.0

getCursor() : jsgl.Cursor

Gets the current mouse cursor of the element.

Returns

Example

Set the cursor of myRect be the same as of myCircle:

myRect.setCursor(myCircle.getCursor());

Since

version 2.0

addMouseMoveListener(listener: Function)

Adds a listener function for handling mouse move events on the element.

Parameters

Name Type Description
listener Function([eventArgs: jsgl.MouseEvent]) The listening function.
Note

If the listener should be executed as a method of some specific object, jsgl.util.delegate(obj, function(eventArgs) {…}) can be used.

Example

Move the circle whenever the mouse is moved over the Bezièr curve:

myCurve.addMouseMoveListener(function(eventArgs) {
    myCircle.setCenterLocation(eventArgs.getLocation());
  });

The above code can be used to produce the following result:

removeMouseMoveListener(listener: Function)

Removes a listener function from the pool of mouse move event listeners.

Parameters

Name Type Description
listener Function([eventArgs: jsgl.MouseEvent]) The listener function that should not listen to mouse move events on the element anymore.

Example

Move the circle whenever the mouse is moved over the Bezièr curve (see above), but stop doing so when the panel is clicked:

var moveHandler = function(eventArgs) {
  myCircle.setCenterLocation(eventArgs.getLocation());
}
myCurve.addMouseMoveListener(moveHandler);
myPanel.addClickListener(function(eventArgs) {
    myCurve.getStroke().setColor('black');
    myCurve.removeMouseMoveListener(moveHandler);
  });

The above code can be used to produce the following result:

Since

version 2.0

addMouseDownListener(listener: Function)

Adds a listener function for handling mouse down events on the element.

Parameters

Name Type Description
listener Function([eventArgs: jsgl.MouseEvent]) The listening function.
Note

If the listener should be executed as a method of some specific object, jsgl.util.delegate(obj, function(eventArgs) {…}) can be used.

Example

Move the circle whenever the mouse is pushed down on the rectangle:

myRect.addMouseDownListener(function(eventArgs) {
    myCircle.setCenterLocation(eventArgs.getLocation());
  });

The above code can be used to produce the following rectangle:

Since

version 2.0

removeMouseDownListener(listener: Function)

Removes a listener function from the pool of mouse down event listeners.

Parameters

Name Type Description
listener Function([eventArgs: jsgl.MouseEvent]) The listener function that should not listen to mouse down events on the element anymore.

Example

Move the circle whenever the mouse is pushed down on the rectangle (see above), but stop doing so when the panel is clicked outside of the rectangle:

function downHandler(eventArgs) {
  myCircle.setCenterLocation(eventArgs.getLocation());
}
myRect.addMouseDownListener(downHandler);
myPanel.addClickListener(function(eventArgs) {
    if(eventArgs.getSourceElement() == null) {
      myRect.getFill().setColor('black');
      myRect.removeMouseDownListener(downHandler);
    }
  });

The above code can be used to produce the following result:

Since

version 2.0

addMouseUpListener(listener: Function)

 
abstract-element.txt · Last modified: 2013/03/14 03:16 (external edit)
 
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