Options
All
  • Public
  • Public/Protected
  • All
Menu

Class HTMLForm

Form for HTMLSpace. Note that this is currently experimental and may change in future.

Hierarchy

Index

Constructors

constructor

Properties

Protected _filled

_filled: boolean = true

Protected _font

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

Protected _ready

_ready: boolean = false

Protected _space

_space: HTMLSpace

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

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
  • Arc is not implemented in HTMLForm

    Parameters

    • pt: PtLike
    • radius: number
    • startAngle: number
    • endAngle: number
    • Optional cc: boolean

    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

fillText

  • fillText(c: string): this
  • Set current text color style. Provide a valid color string.

    example

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

    Parameters

    • c: string

      fill color

    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

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

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

      not implemented in HTMLForm

    • Optional linecap: string

      not implemented in HTMLForm

    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, unit?: string): 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

    • Default value unit: string = ""

      Optional unit like 'px' to append to 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 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 circle

  • A static function to draw a circle

    Parameters

    • ctx: DOMFormContext

      a context object of HTMLForm

    • pt: PtLike

      center position of the circle

    • Default value radius: number = 10

      radius of the circle

    Returns Element

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 HTMLForm

    Returns string

Static point

  • Draws a point

    example

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

    Parameters

    • ctx: DOMFormContext

      a context object of HTMLForm

    • 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 Element

Static rect

  • A static function to draw a rectangle

    Parameters

    • ctx: DOMFormContext

      a context object of HTMLForm

    • 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 Element

Static rectStyle

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 HTMLForm

    • pt: PtLike

      center position of the square

    • halfsize: number

      half size of the square

    Returns HTMLElement

Static style

  • style(elem: Element, 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

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

    Parameters

    • elem: Element

      A DOM element to add to

    • styles: object

      an object of style properties

    Returns Element

    DOM element

Static text

  • A static function to draw text

    Parameters

    Returns Element

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

background

background: string = "#f03"

border-color

border-color: string = "#fff"

border-radius

border-radius: string = "0"

border-style

border-style: string = "solid"

border-width

border-width: string = "1px"

color

color: string = "#000"

filled

filled: boolean = true

height

height: number = 0

left

left: number = 0

position

position: string = "absolute"

stroked

stroked: boolean = true

top

top: number = 0

width

width: number = 0

Generated using TypeDoc