Shape Element (jsgl.elements.ShapeElement)

To draw a general shape, use the .createShape() method of a jsgl.Panel object and add it to its viewport:

var myShape = myPanel.createShape();
myPanel.addElement(myShape);

The object created provides a cross-browser API described below.

Equivalent to SVG path command M.

The effect is as if the ā€�penā€¯ were lifted and moved to a new location, given by absolute coordinates in the parent container.

To create new Absolute Move-To path command object, use the jsgl.path.AbsoluteMoveTo(x: Number, y: Number) constructor:

var mySegment = new jsgl.path.AbsoluteMoveTo(30,20);  // absolute move to [30,20]

If no arguments are passed to the constructor, implicit target point is [0,0]:

var mySegment = new jsgl.path.AbsoluteMoveTo();  // absolute move to [0,0]

The object created can be controlled using its setter/getter methods.

http://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

Equivalent to SVG path command m.

The effect is as if the ā€�penā€¯ were lifted and moved to a new location, given by relative coordinates in the parent container.

To create new Relative Move-To path command, use the jsgl.path.RelativeMoveTo(x: Number, y: Number) constructor:

var mySegment = new jsgl.path.RelativeMoveTo(10,-5);  // relative move to [10,-5]

If no arguments are passed to the constructor, implicit target point is [0,0]:

var mySegment = new jsgl.path.RelativeMoveTo();  // relative move to [0,0]; has no effect

The object created can be controlled using its setter/getter methods.

http://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

Equivalent to SVG path command L.

Draws straight line from the current point to a new location, given by absolute coordinates within the parent container.

To create new Absolute Line-To command object, use the jsgl.path.AbsoluteLineTo(x: Number, y: Number) constructor:

var mySegment = new jsgl.path.AbsoluteLineTo(40,30);  // absolute line to [40,30]

It the constructor is not supplied with any arguments, the implicit target point is [0,0]:

var mySegment = new jsgl.path.AbsoluteLineTo();  // absolute line to [0,0]

The object created can be controlled using the setter/getter methods listed below.

http://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

Equivalent to SVG path command l.

Draws straight line from the current point to a new location, given by relative coordinates within the parent container.

To create new Relative Line-To command object, use the jsgl.path.RelativeLineTo(x: Number, y: Number) constructor:

var mySegment = new jsgl.path.RelativeLineTo(5,-10);  // relative line to [5,-10]

It the constructor is not supplied with any arguments, the implicit target point is [0,0]:

var mySegment = new jsgl.path.RelativeLineTo();  // relative line to [0,0]; has no effect

http://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

Equivalent to SVG path command H.

Draws a horizontal line from the current point (currX,currY) to new point (x,currY), where x is an absolute horizontal coordinate in the parent container.

To create new Absolute Horizontal-Line-To path command object, use the jsgl.path.AbsoluteHorizontalLineTo(x: Number) constructor:

// absolute horizontal line to [50,currY]
var mySegment = new jsgl.path.AbsoluteHorizontalLineTo(50);

If the constructor is not supplied with argument, default value of 0 will be set:

// absolute horizontal line to [0,currY]
var mySegment = new jsgl.path.AbsoluteHorizontalLineTo();

http://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

Equivalent to SVG path command h.

Draws a horizontal line from the current point (currX,currY) to new point (currX+x,currY), where x is a relative horizontal coordinate in the parent container.

To create new Relative Horizontal-Line-To path command object, use the jsgl.path.RelativeHorizontalLineTo(x: Number) constructor:

// relative horizontal line to [currX-30,currY]
var mySegment = new jsgl.path.RelativeHorizontalLineTo(-30);

If the constructor is not supplied with the argument, default value of 0 (which has, initially, no effect) will be used:

// relative horizontal line to [currX+0,currY]=[currX,currY]=no effect
var mySegment = new jsgl.path.RelativeHorizontalLineTo();

The object created can be controlled using the setter/getter methods listed below.

http://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

Equivalent to SVG path command V.

Draws a vertical line from the current point (currX,currY) to new point (currX,y), where y is an absolute vertical coordinate in the parent container.

To create new Absolute Vertical-Line-To path command object, use the jsgl.path.AbsoluteVerticalLineTo(x: Number) constructor:

// absolute vertical line to [currX,25]
var mySegment = new jsgl.path.AbsoluteVerticalLineTo(25);

If the constructor is not supplied with argument, default value of 0 will be used:

// absolute vertical line to [currX,0]
var mySegment = new jsgl.path.AbsoluteVerticalLineTo();

The object created can be controlled using the setter/getter methods listed below.

http://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

Equivalent to SVG path command v.

Draws a vertical line from the current point (currX,currY) to new point (currX,currY+y), where y is a relative vertical coordinate in the parent container.

To create new Relative Vertical-Line-To path command object, use the jsgl.path.RelativeVerticalLineTo(x: Number) constructor:

// relative vertical line to [currX,currY+15]
var mySegment = new jsgl.path.RelativeVerticalLineTo(15);

If the constructor is not supplied with the argument, default value of 0 (which has, initially, no effect) will be used:

// relative vertical line to [currX,currY+0]=[currX,currY]=no effect
var mySegment = new jsgl.path.RelativeVerticalLineTo();

The object created can be controlled using the setter/getter methods listed below.

http://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands