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
:
jsgl.elements.LineElement
),jsgl.elements.RectangleElement
),jsgl.elements.CircleElement
),jsgl.elements.EllipseElement
),jsgl.elements.PolylineElement
),jsgl.elements.PolygonElement
),jsgl.elements.ImageElement
),jsgl.elements.LabelElement
),jsgl.elements.CurveElement
),jsgl.elements.ShapeElement
), andjsgl.elements.GroupElement
).
The methods centralized in jsgl.elements.AbstractElement
cover:
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. |
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. |
Sets the new Z-axis index of the element. This allows you to specify the order in which the elements will be painted.
Name | Type | Description |
---|---|---|
newZIndex | Number | The new z-index. |
Set the Z-axis index of myElement
to 5:
myElement.setZIndex(5);
You can see how the z-index positioning works on the following demonstration:
circle.setZIndex(); | |
triangle.setZIndex(); | |
square.setZIndex(); |
Gets the curent Z-axis index of the element.
Number
Increase the myElement
's z-index by one:
myElement.setZIndex(myElement.getZIndex()+1);
Sets the new mouse cursor for the element.
Name | Type | Description |
---|---|---|
newCursor | jsgl.Cursor | The new cursor. |
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!
Gets the current mouse cursor of the element.
Set the cursor of myRect
be the same as of myCircle
:
myRect.setCursor(myCircle.getCursor());
Adds a listener function for handling mouse move events on the element.
Name | Type | Description |
---|---|---|
listener | Function([eventArgs: jsgl.MouseEvent]) | The listening function. |
If the listener
should be executed as a method of some specific object, jsgl.util.delegate(obj, function(eventArgs) {…})
can be used.
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:
Removes a listener function from the pool of mouse move event listeners.
Name | Type | Description |
---|---|---|
listener | Function([eventArgs: jsgl.MouseEvent]) | The listener function that should not listen to mouse move events on the element anymore. |
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:
Adds a listener function for handling mouse down events on the element.
Name | Type | Description |
---|---|---|
listener | Function([eventArgs: jsgl.MouseEvent]) | The listening function. |
If the listener
should be executed as a method of some specific object, jsgl.util.delegate(obj, function(eventArgs) {…})
can be used.
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:
Removes a listener function from the pool of mouse down event listeners.
Name | Type | Description |
---|---|---|
listener | Function([eventArgs: jsgl.MouseEvent]) | The listener function that should not listen to mouse down events on the element anymore. |
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: