JSGL 2.0 beta released!
This is a documentation for JSGL 2.0. Version 2.0 is backward compatible with JSGL 1.0. You are advised to upgrade to JSGL 2.0 in your applications. If you wish to keep using JSGL 1.0 anyway, keep an eye on the “Since” flags in the documentation.
Check the Hello World! application!
Shows how to include necessary tags to your HTML in order to make JSGL work.
A complete HTML/JSGL example is provided.
Demonstrates how to instantiate jsgl.Panel
object, which many examples rely on.
jsgl.Panel
is the core class providing interconnection between HTML and the JSGL API.
You can create jsgl.Panel
by passing reference to a holder <div>
element to its constructor.
After you have jsgl.Panel
created, you can work with all the graphics features described below.
Overview of JSGL base elements follows. Click the image at left to see the full reference and examples.
Simple line drawn from start-point [start-x,start-y] to end-point [end-x,end-y].
The line is styled by a stroke object of variable properties.
Rectangle of given width and height, decorated with stroke and fill objects.
It can be positioned relatively to and rotated around its anchor point (x,y).
Also, the rectangle supports rounded corners specified by x-radius and y-radius.
Ellipse of given center-x, center-y, width and height.
The ellipse can be styled with stroke and fill object.
It is possible to rotate the ellipse by specified angle.
Multi-segment line defined by a sequence of points (vertices), which can be expressed as [(x1,y1),…,(xn,yn)].
The points can be manipulated by standard List operations, such as add, insertAt, removeAt, clear, etc.
There is a stroke object associated for styling the polyline.
Similar to polyline (see above), but its path is closed.
The polygon can be styled by stroke and fill objects.
Allows drawing of raster images given by source URL.
The image is of specified width and height (determined automatically or set manually).
It can be positioned relatively to and rotated around its anchor point (x,y).
Outline of the image can be decorated by a stroke object.
Allows putting simple text labels into the drawing.
The text is of specified font-family and can be set bold, italics, underlined, overlined, or struck-through.
Cubic Bezièr curve given by start point [x,y], control point #1 [x,y], control point #2 [x,y], and end point.
TBD
Allows drawing of arbitrarily-complex general shapes by implementing SVG path segment commands.
The path consists of ordered list of path segment objects such as move-to, line-to, elliptical-arc-to, etc.
Each segment's object can be dynamically modified, as well as the segments can be added to/removed from the list.
Allows hierarchical composition of elements, which is especially useful for:
Completely prevents the stroke from being painted.
Instance accessible via jsgl.stroke.DISABLED
:
myElement.setStroke(jsgl.stroke.DISABLED);
Completely prevents the fill from being painted.
Instance available via jsgl.fill.DISABLED
:
myElement.setFill(jsgl.fill.DISABLED);
Each JSGL element provides an interface for adding listeners to mouse events.
The events include mouse-over, mouse-out, click, double-click, mouse-move and context-menu (right-click).
Event-arguments object provides coordinates (x,y) of the event in scopes of both the parent coordinate system and the panel object.
jsgl.util.Animator
will simplify your animation tasks:
jsgl.util.delegate – object-method pairing
jsgl.util.EventRaiser – MVC architecture utility class
jsgl.util.ArrayList – simple arraylist implementation
Function.prototype.jsglExtend – classical inheritance utility