Options
All
  • Public
  • Public/Protected
  • All
Menu

Class SVGForm

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.

Hierarchy

Index

Constructors

constructor

  • Create a new SVGForm. You may also use space.getForm() to get the default form.

    Parameters

    • space: SVGSpace

      an instance of SVGSpace

    Returns SVGForm

Properties

Protected _filled

_filled: boolean = true

Protected _font

_font: Font = new Font( 14, "sans-serif")

Protected _ready

_ready: boolean = false

Protected _space

_space: SVGSpace

Protected _stroked

_stroked: boolean = true

Static domID

domID: number = 0

Static groupID

groupID: number = 0

Accessors

currentFont

  • get currentFont(): Font

filled

  • get filled(): boolean
  • set filled(b: boolean): void

ready

  • get ready(): boolean
  • get whether the Form has received the Space's rendering context

    Returns boolean

space

  • get the SVGSpace instance that this form is associated with

    Returns SVGSpace

stroked

  • get stroked(): boolean
  • set stroked(b: boolean): void

Methods

Protected _multiple

  • _multiple(groups: GroupLike[], shape: string, ...rest: any[]): this

arc

  • arc(pt: PtLike, radius: number, startAngle: number, endAngle: number, cc?: boolean): this
  • Draw an arc.

    Parameters

    • pt: PtLike

      center position

    • radius: number

      radius of the arc circle

    • startAngle: number

      start angle of the arc

    • endAngle: number

      end angle of the arc

    • Optional cc: boolean

      an optional boolean value to specify if it should be drawn clockwise (false) or counter-clockwise (true). Default is clockwise.

    Returns this

circle

circles

cls

  • cls(c: string | boolean): this
  • Add custom class to the created element

    example

    form.fill("#f00").cls("myClass").rects(r) form.cls(false).circles(c)

    Parameters

    • c: string | boolean

      custom class name or false to reset it

    Returns this

fill

  • fill(c: string | boolean): this
  • Set current fill style. Provide a valid color string or false to specify no fill color.

    example

    form.fill("#F90"), form.fill("rgba(0,0,0,.5"), form.fill(false)

    Parameters

    • c: string | boolean

      fill color

    Returns this

fillOnly

  • fillOnly(c: string | boolean): this
  • Set current fill style and without stroke.

    example

    form.fillOnly("#F90"), form.fillOnly("rgba(0,0,0,.5")

    Parameters

    • c: string | boolean

      fill color which can be as color, gradient, or pattern. (See canvas documentation)

    Returns this

font

  • font(sizeOrFont: number | Font, weight?: string, style?: string, lineHeight?: number, family?: string): this
  • Set the current font

    example

    form.font( myFont ), form.font(14, "bold")

    Parameters

    • sizeOrFont: number | Font

      either a number to specify font-size, or a Font object to specify all font properties

    • Optional weight: string

      Optional font-weight string such as "bold"

    • Optional style: string

      Optional font-style string such as "italic"

    • Optional lineHeight: number

      Optional line-height number suchas 1.5

    • Optional family: string

      Optional font-family such as "Helvetica, sans-serif"

    Returns this

line

  • Draw a line or polyline

    Parameters

    • pts: GroupLike | number[][]

      a Group of multiple Pts, or an array of multiple numeric arrays

    Returns this

lines

log

  • log(txt: any): this
  • 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.

    Parameters

    • txt: any

      text

    Returns this

nextID

  • nextID(): string
  • Get next available id in the current group

    Returns string

    an id string

point

  • point(pt: PtLike, radius?: number, shape?: string): this
  • Draws a point

    example

    form.point( p ), form.point( p, 10, "circle" )

    Parameters

    • pt: PtLike
    • Default value radius: number = 5

      radius of the point. Default is 5.

    • Default value shape: string = "square"

      The shape of the point. Defaults to "square", but it can be "circle" or a custom shape function in your own implementation.

    Returns this

points

  • points(pts: GroupLike | number[][], radius: number, shape: string): this
  • Draw multiple points at once

    Parameters

    • pts: GroupLike | number[][]

      an array of Pt or an array of number arrays

    • radius: number

      radius of the point. Default is 5.

    • shape: string

      The shape of the point. Defaults to "square", but it can be "circle" or a custom shape function in your own implementation.

    Returns this

polygon

  • Draw a polygon

    Parameters

    • pts: GroupLike | number[][]

      a Group of multiple Pts, or an array of multiple numeric arrays

    Returns this

polygons

rect

  • rect(pts: number[][] | Pt[]): this
  • Draw a rectangle

    Parameters

    • pts: number[][] | Pt[]

      usually a Group of 2 Pts specifying the top-left and bottom-right positions. Alternatively it can be an array of numeric arrays.

    Returns this

rects

reset

  • reset(): this
  • Reset the context's common styles to this form's styles. This supports using multiple forms on the same canvas context.

    Returns this

scope

  • 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}".

    Parameters

    • item: IPlayer

      a "player" item that's added to space (see space.add(...)) and has an animateID property

    Returns object

    this form's context

square

  • square(pt: PtLike, halfsize: number): this
  • Draw a square, given a center and its half-size

    Parameters

    • pt: PtLike

      center Pt

    • halfsize: number

      half-size

    Returns this

squares

stroke

  • stroke(c: string | boolean, width?: number, linejoin?: string, linecap?: string): this
  • Set current stroke style. Provide a valid color string or false to specify no stroke color.

    example

    form.stroke("#F90"), form.stroke("rgba(0,0,0,.5"), form.stroke(false), form.stroke("#000", 0.5, 'round', 'square')

    Parameters

    • c: string | boolean

      stroke color which can be as color, gradient, or pattern. (See canvas documentation)

    • Optional width: number

      Optional value (can be floating point) to set line width

    • Optional linejoin: string

      Optional string to set line joint style. Can be "miter", "bevel", or "round".

    • Optional linecap: string

      Optional string to set line cap style. Can be "butt", "round", or "square".

    Returns this

strokeOnly

  • strokeOnly(c: string | boolean, width?: number, linejoin?: string, linecap?: string): this
  • Set current stroke style and without fill.

    example

    form.strokeOnly("#F90"), form.strokeOnly("#000", 0.5, 'round', 'square')

    Parameters

    • c: string | boolean

      stroke color which can be as color, gradient, or pattern. (See canvas documentation

    • Optional width: number
    • Optional linejoin: string
    • Optional linecap: string

    Returns this

Protected styleTo

  • styleTo(k: any, v: any): void
  • Update a style in _ctx context or throw an Erorr if the style doesn't exist

    Parameters

    • k: any

      style key

    • v: any

      style value

    Returns void

text

  • text(pt: PtLike, txt: string): this

updateScope

  • updateScope(group_id: string, group?: Element): object
  • 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().

    Parameters

    • group_id: string

      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 group: Element

      Optional DOM or SVG element to define this group's parent element

    Returns object

    this form's context

Static _checkSize

  • _checkSize(pts: GroupLike | number[][], required?: number): boolean
  • Check number of items in a Group against a required number

    Parameters

    • pts: GroupLike | number[][]
    • Default value required: number = 2

    Returns boolean

Static _poly

  • A static helper function to draw polyline or polygon

    Parameters

    • ctx: DOMFormContext

      a context object of SVGForm

    • pts: GroupLike | number[][]

      a Group of multiple Pts, or an array of multiple numeric arrays

    • Default value closePath: boolean = true

      a boolean to specify if the polygon path should be closed

    Returns SVGElement

Static arc

  • arc(ctx: DOMFormContext, pt: PtLike, radius: number, startAngle: number, endAngle: number, cc?: boolean): SVGElement
  • A static function to draw an arc.

    Parameters

    • ctx: DOMFormContext

      a context object of SVGForm

    • pt: PtLike

      center position

    • radius: number

      radius of the arc circle

    • startAngle: number

      start angle of the arc

    • endAngle: number

      end angle of the arc

    • Optional cc: boolean

      an optional boolean value to specify if it should be drawn clockwise (false) or counter-clockwise (true). Default is clockwise.

    Returns SVGElement

Static circle

  • A static function to draw a circle

    Parameters

    • ctx: DOMFormContext

      a context object of SVGForm

    • pt: PtLike

      center position of the circle

    • Default value radius: number = 10

      radius of the circle

    Returns SVGElement

Static getID

  • getID(ctx: any): string
  • A static function to generate an ID string based on a context object

    Parameters

    • ctx: any

      a context object for an SVGForm

    Returns string

Static line

  • A static function to draw a line

    Parameters

    • ctx: DOMFormContext

      a context object of SVGForm

    • pts: GroupLike | number[][]

      a Group of multiple Pts, or an array of multiple numeric arrays

    Returns SVGElement

Static point

  • Draws a point

    example

    SVGForm.point( p ), SVGForm.point( p, 10, "circle" )

    Parameters

    • ctx: DOMFormContext

      a context object of SVGForm

    • pt: PtLike

      a Pt object or numeric array

    • Default value radius: number = 5

      radius of the point. Default is 5.

    • Default value shape: string = "square"

      The shape of the point. Defaults to "square", but it can be "circle" or a custom shape function in your own implementation.

    Returns SVGElement

Static polygon

  • A static function to draw polygon

    Parameters

    • ctx: DOMFormContext

      a context object of SVGForm

    • pts: GroupLike | number[][]

      a Group of multiple Pts, or an array of multiple numeric arrays

    Returns SVGElement

Static rect

  • A static function to draw a rectangle

    Parameters

    • ctx: DOMFormContext

      a context object of SVGForm

    • pts: GroupLike | number[][]

      usually a Group of 2 Pts specifying the top-left and bottom-right positions. Alternatively it can be an array of numeric arrays.

    Returns SVGElement

Static scopeID

  • A static function to generate an ID string for a scope, based on a "player" item in the Space

    Parameters

    • item: IPlayer

      a "player" item that's added to space (see space.add(...)) and has an animateID property

    Returns string

Static square

  • A static function to draw a square

    Parameters

    • ctx: DOMFormContext

      a context object of SVGForm

    • pt: PtLike

      center position of the square

    • halfsize: number

      half size of the square

    Returns SVGElement

Static style

  • style(elem: SVGElement, styles: object): Element
  • 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.

    example

    SVGForm.style(elem, {fill: "#f90", stroke: false})

    Parameters

    • elem: SVGElement

      A DOM element to add to

    • styles: object

      an object of style properties

    Returns Element

    this DOM element

Static text

  • A static function to draw text

    Parameters

    Returns SVGElement

Object literals

Protected _ctx

_ctx: object

currentClass

currentClass: string = ""

currentID

currentID: string = "pts0"

font

font: string = "11px sans-serif"

fontFamily

fontFamily: string = "sans-serif"

fontSize

fontSize: number = 11

group

group: null = null

groupCount

groupCount: number = 0

groupID

groupID: string = "pts"

style

style: object

fill

fill: string = "#f03"

filled

filled: boolean = true

stroke

stroke: string = "#fff"

stroke-linecap

stroke-linecap: string = "sqaure"

stroke-linejoin

stroke-linejoin: string = "bevel"

stroke-width

stroke-width: number = 1

stroked

stroked: boolean = true

Generated using TypeDoc