get whether the Form has received the Space's rendering context
get the SVGSpace instance that this form is associated with
Draw an arc.
center position
radius of the arc circle
start angle of the arc
end angle of the arc
an optional boolean value to specify if it should be drawn clockwise (false
) or counter-clockwise (true
). Default is clockwise.
Draw a circle
usually a Group of 2 Pts, but it can also take an array of two numeric arrays [ [position], [size] ]
Draw multiple circles at once
an array of Groups that defines multiple circles
Add custom class to the created element
custom class name or false
to reset it
Set current fill style. Provide a valid color string or false
to specify no fill color.
fill color
Set current fill style and without stroke.
fill color which can be as color, gradient, or pattern. (See canvas documentation)
Set the current font
either a number to specify font-size, or a Font
object to specify all font properties
Optional font-weight string such as "bold"
Optional font-style string such as "italic"
Optional line-height number suchas 1.5
Optional font-family such as "Helvetica, sans-serif"
Draw a line or polyline
a Group of multiple Pts, or an array of multiple numeric arrays
Draw multiple lines at once
An array of Groups of Pts
A convenient way to draw some text on canvas for logging or debugging. It'll be draw on the top-left of the canvas as an overlay.
text
Get next available id in the current group
an id string
Draws a point
radius of the point. Default is 5.
The shape of the point. Defaults to "square", but it can be "circle" or a custom shape function in your own implementation.
Draw multiple points at once
an array of Pt or an array of number arrays
radius of the point. Default is 5.
The shape of the point. Defaults to "square", but it can be "circle" or a custom shape function in your own implementation.
Draw a polygon
a Group of multiple Pts, or an array of multiple numeric arrays
Draw multiple polygons at once
An array of Groups of Pts
Draw a rectangle
usually a Group of 2 Pts specifying the top-left and bottom-right positions. Alternatively it can be an array of numeric arrays.
Draw multiple rectangles at once
An array of Groups of Pts
Reset the context's common styles to this form's styles. This supports using multiple forms on the same canvas context.
Set the current group scope to an item added into space, in order to keep track of any point, circle, etc created within it. The item must have an animateID
property, so that elements created within the item will have generated IDs like "item-{animateID}-{count}".
a "player" item that's added to space (see space.add(...)
) and has an animateID
property
this form's context
Draw a square, given a center and its half-size
center Pt
half-size
Draw multiple squares at once
an array of Groups that defines multiple circles
Set current stroke style. Provide a valid color string or false
to specify no stroke color.
stroke color which can be as color, gradient, or pattern. (See canvas documentation)
Optional value (can be floating point) to set line width
Optional string to set line joint style. Can be "miter", "bevel", or "round".
Optional string to set line cap style. Can be "butt", "round", or "square".
Set current stroke style and without fill.
stroke color which can be as color, gradient, or pattern. (See canvas documentation
Update a style in _ctx context or throw an Erorr if the style doesn't exist
style key
style value
Draw text on canvas
Set this form's group scope by an ID, and optionally define the group's parent element. A group scope keeps track of elements by their generated IDs, and updates their properties as needed. See also scope()
.
a string to use as prefix for the group's id. For example, group_id "hello" will create elements with id like "hello-1", "hello-2", etc
Optional DOM or SVG element to define this group's parent element
this form's context
Check number of items in a Group against a required number
A static helper function to draw polyline or polygon
a context object of SVGForm
a Group of multiple Pts, or an array of multiple numeric arrays
a boolean to specify if the polygon path should be closed
A static function to draw an arc.
a context object of SVGForm
center position
radius of the arc circle
start angle of the arc
end angle of the arc
an optional boolean value to specify if it should be drawn clockwise (false
) or counter-clockwise (true
). Default is clockwise.
A static function to draw a circle
a context object of SVGForm
center position of the circle
radius of the circle
A static function to generate an ID string based on a context object
a context object for an SVGForm
A static function to draw a line
a context object of SVGForm
a Group of multiple Pts, or an array of multiple numeric arrays
Draws a point
a context object of SVGForm
a Pt object or numeric array
radius of the point. Default is 5.
The shape of the point. Defaults to "square", but it can be "circle" or a custom shape function in your own implementation.
A static function to draw polygon
a context object of SVGForm
a Group of multiple Pts, or an array of multiple numeric arrays
A static function to draw a rectangle
a context object of SVGForm
usually a Group of 2 Pts specifying the top-left and bottom-right positions. Alternatively it can be an array of numeric arrays.
A static function to generate an ID string for a scope, based on a "player" item in the Space
a "player" item that's added to space (see space.add(...)
) and has an animateID
property
A static function to draw a square
a context object of SVGForm
center position of the square
half size of the square
A static function to help adding style object to an element. This put all styles into style
attribute instead of individual attributes, so that the styles can be parsed by Adobe Illustrator.
A DOM element to add to
an object of style properties
this DOM element
A static function to draw text
a context object of SVGForm
Generated using TypeDoc
SVGForm is an implementation of abstract class VisualForm. It provide methods to express Pts on SVGSpace. You may extend SVGForm to implement your own expressions for SVGSpace.