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

Shape Element (jsgl.elements.ShapeElement)

Creation

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.

Method Summary

Path

Name Description
addPathSegment(newSegment: jsgl.path.AbstractPathSegment) Appends a new path segment to the list of the Shape's path segment commands.
clearPath() Removes all the path segments from the Shape's path segment commands list.
getPathSegmentAt(index: Number) : jsgl.path.AbstractPathSegment Gets the path segment at given index from the list of the Shape's path segment commands.
getPathSize() : Number Gets the current length of the shape's path segment commands list.
insertPathSegmentAt(newSegment: jsgl.path.AbstractPathSegment, index: Number) Inserts a new path segment to the list of the shape's path segment commands.
setPathSegmentAt(newSegment: jsgl.path.AbstractPathSegment, index: Number) Replaces a path segment in the list of the Shape's path segment commands at the given index.
removePathSegmentAt(index: Number) Removes a path segment from the list of the shape's path segment commands list at the given index.

Stroke, Fill

Getters
getStroke() : jsgl.stroke.AbstractStroke Gets the stroke object that is currently used for rendering the outline of the shape.
getFill() : jsgl.fill.AbstractFill Gets the fill object that is currently used for rendering the interior of the shape.
Setters
setStroke(newStroke: jsgl.stroke.AbstractStroke) Sets the new stroke object to be used for rendering the outline of the shape.
setFill(newFill: jsgl.fill.AbstractFill) Sets the new fill object to be used for rendering the interior of the shape.

Path Segment Commands

Absolute Move-To (class jsgl.path.AbsoluteMoveTo)

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.

Creation

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.

Methods

Setters
setX(newX: Number) Sets the new X-axis coordinate of the absolute target point.
setY(newY: Number) Sets the new Y-axis coordinate of the absolute target point.
setLocationXY(newX: Number, newY: Number) Sets the new absolute target point using a couple of real-valued coordinates [newX,newY].
setLocation(newLocation: jsgl.Vector2D) Sets the new absolute target point using a jsgl.Vector2D object.
Getters
getX() : Number Gets the current X-axis coordinate of the absolute target point.
getY() : Number Gets the current Y-axis coordinate of the absolute target point.
getLocation() : Number Gets the current absolute target point as a jsgl.Vector2D object.

Example

See Also

Relative Move-To (class jsgl.path.RelativeMoveTo)

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.

Creation

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.

Methods

Setters
setX(newX: Number) Sets the new X-axis coordinate of the relative target point.
setY(newY: Number) Sets the new Y-axis coordinate of the relative target point.
setLocationXY(newX: Number, newY: Number) Sets the new relative target point using a couple of real-valued coordinates [newX,newY].
setLocation(newLocation: jsgl.Vector2D) Sets the new relative target point using a jsgl.Vector2D object.
Getters
getX() : Number Gets the current X-axis coordinate of the relative target point.
getY() : Number Gets the current Y-axis coordinate of the relative target point.
getLocation() : Number Gets the current relative target point as a jsgl.Vector2D object.

Example

See Also

Absolute Line-To (class jsgl.path.AbsoluteLineTo)

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.

Creation

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.

Methods

Setters
setX(newX: Number) Sets the new X-axis coordinate of the absolute end point.
setY(newY: Number) Sets the new Y-axis coordinate of the absolute end point.
setEndPointXY(newX: Number, newY: Number) Sets the new absolute end point using a couple of real-valued coordinates [newX,newY].
setEndPoint(newPoint: jsgl.Vector2D) Sets the new absolute end point using a jsgl.Vector2D object.
Getters
getX() : Number Gets the current X-axis coordinate of the absolute end point.
getY() : Number Gets the current Y-axis coordinate of the absolute end point.
getEndPoint() : Number Gets the current absolute end point as a jsgl.Vector2D object.

Example

See Also

Relative Line-To (class jsgl.path.RelativeLineTo)

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.

Creation

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

Methods

Setters
setX(newX: Number) Sets the new X-axis coordinate of the absolute target point.
setY(newY: Number) Sets the new Y-axis coordinate of the absolute target point.
setEndPointXY(newX: Number, newY: Number) Sets the new absolute target point using a couple of real-valued coordinates [newX,newY].
setEndPoint(newPoint: jsgl.Vector2D) Sets the new absolute target point using a jsgl.Vector2D object.
Getters
getX() : Number Gets the current X-axis coordinate of the absolute target point.
getY() : Number Gets the current Y-axis coordinate of the absolute target point.
getEndPoint() : Number Gets the current absolute target point as a jsgl.Vector2D object.

Example

See Also

Absolute Horizontal-Line-To (class jsgl.path.AbsoluteHorizontalLineTo)

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.

Creation

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();

Methods

Setters
setX(newX: Number) Sets the new absolute X-axis coordinate for the line's target.
Getters
getX() : Number Gets the current absolute X-axis coordinate of the line's target.

Example

See Also

Relative Horizontal-Line-To (class jsgl.path.RelativeHorizontalLineTo)

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.

Creation

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.

Methods

Setters
setX(newX: Number) Sets the new relative X-axis coordinate for the line's target.
Getters
getX() : Number Gets the current relative X-axis coordinate of the line's target.

Example

See Also

Absolute Vertical-Line-To (class jsgl.path.AbsoluteVerticalLineTo)

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.

Creation

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.

Methods

Setters
setY(newY: Number) Sets the new absolute Y-axis coordinate for the line's target.
Getters
getY() : Number Gets the current absolute Y-axis coordinate of the line's target.

Example

See Also

Relative Vertical-Line-To (class jsgl.path.RelativeVerticalLineTo)

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.

Creation

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.

Methods

Setters
setY(newY: Number) Sets the new relative Y-axis coordinate for the line's target.
Getters
getY() : Number Gets the current relative Y-axis coordinate of the line's target.

Example

See Also

Absolute Cubic-Bezièr-To (class jsgl.path.AbsoluteCubicBezier)

Relative Cubic-Bezièr-To (class jsgl.path.RelativeCubicBezier)

Absolute Quadratic-Bezièr-To (class jsgl.path.AbsoluteQuadraticBezier)

Relative Quadratic-Bezièr-To (class jsgl.path.RelativeQuadraticBezier)

Absolute Smooth-Cubic-Bezièr-To (class jsgl.path.AbsoluteSmoothCubicBezier)

Relative Smooth-Cubic-Bezièr-To (class jsgl.path.RelativeSmoothCubicBezier)

Absolute Smooth-Quadratic-Bezièr-To (class jsgl.path.AbsoluteSmoothQuadraticBezier)

Relative Smooth-Quadratic-Bezièr-To (class jsgl.path.RelativeSmoothQuadraticBezier)

Absolute Elliptical-Arc-To (class jsgl.path.AbsoluteEllipticalArc)

Relative Elliptical-Arc-To (class jsgl.path.RelativeEllipticalArc)

Close Path (class jsgl.path.ClosePath)

 
shape-element.txt · Last modified: 2013/03/14 03:17 (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