Documentation

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.

Circle of given center-x, center-y, and radius.

It can be styled with stroke and fill objects.

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:

• moving multiple elements at once,
• capturing mouse events on groups of elements,
• working with z-indices in hierarchical manner.

Allows you to specify:

• Color and opacity of the outline,
• Dash style (pattern of dashes and gaps),
• Endcap type (the shape to be used at the end of open subpaths),
• Join styles (shape to be used at the corners of paths).

Completely prevents the stroke from being painted.

Instance accessible via jsgl.stroke.DISABLED:

myElement.setStroke(jsgl.stroke.DISABLED);

Allows you to specify:

• Color of the interior,
• Opacity of the interior.

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.delegate – object-method pairing

jsgl.util.EventRaiser – MVC architecture utility class

jsgl.util.ArrayList – simple arraylist implementation

Function.prototype.jsglExtend – classical inheritance utility