EvolveJS

Class: ElementHelpers

ElementHelpers

all the helpers we need to draw the elements

new ElementHelpers()

Methods

<static> align(element, parent, mode, regPoint, regPointMode)

Aligns an element (horizontally, vertically or both) based on it's parent bounds.
Parameters:
Name Type Description
element Object | Container | Element can be an Object, an EaselJS instance, a CreateJS Core Elements instance
parent null | Object | Container | Element can be an Object, an EaselJS instance, a CreateJS Core Elements instance
if null, it takes automatically the parent property of element parameter
mode String can be a couple of word for horizontal or vertical align, in any order
accepts the following modes
  • Horizontal Modes: left, center, right
  • Vertical Modes: top, middle, bottom
regPoint Boolean enabled alignment also on registration point
regPointMode null | String can be a couple of word for horizontal or vertical align, in any order
accepts the following modes
  • Horizontal Modes: left, center, right
  • Vertical Modes: top, middle, bottom

if null it considers mode parameter as fallback
Returns:
Type
Object | Container | Element

<static> alignRegPoint(element, mode)

aligns the reg point or an element
Parameters:
Name Type Description
element Object | Container | Element can be an Object, an EaselJS instance, a CreateJS Core Elements instance
mode String can be a couple of word for horizontal or vertical align, in any order
accepts the following modes
  • Horizontal Modes: left, center, right
  • Vertical Modes: top, middle, bottom
Returns:
Type
Object | Container | Element

<static> createCircle(options, bounds)

creates an EaselJS Circle Shape instance
Parameters:
Name Type Description
options Object the options can contain
Properties
Name Type Description
fill String | Object color for filling graphics
Properties
Name Type Description
colors Array colors to create a linear gradient fill
ratios Array color ratios to create a linear gradient fill
points Array start & stop points to create a linear gradient fill
stroke String | Object stroke options, if string it creates a stroke with size 1
Properties
Name Type Description
size Number the size
color String the color
radius Number the radius of the circle
bounds Arguments the bounds parameter will be passed to setBounds method of EaselJS Container class
so it has to be an array with this sequence
  • {Number} x
  • {Number} y
  • {Number} width
  • {Number} height
Returns:
Type
Shape

<static> createContainer(bounds)

creates an EaselJS Container instance based on bounds parameters
Parameters:
Name Type Description
bounds Arguments the bounds parameter will be passed to setBounds method of EaselJS Container class
so it has to be an array with this sequence
  • {Number} x
  • {Number} y
  • {Number} width
  • {Number} height
Returns:
Type
Container

<static> createGraphics(options, bounds)

creates an EaselJS Graphics instance
Parameters:
Name Type Description
options Object the options can contain
Properties
Name Type Description
fill String | Object color for filling graphics
Properties
Name Type Description
colors Array colors to create a linear gradient fill
ratios Array color ratios to create a linear gradient fill
points Array start & stop points to create a linear gradient fill
stroke String | Object stroke options, if string it creates a stroke with size 1
Properties
Name Type Description
size Number the size
color String the color
bounds Arguments the bounds parameter will be passed to setBounds method of EaselJS Container class
so it has to be an array with this sequence
  • {Number} x
  • {Number} y
  • {Number} width
  • {Number} height
Returns:
Type
Graphics

<static> createImage(image)

creates an EaselJS Bitmap instance
Parameters:
Name Type Description
image HTMLElement the preloaded DOM element representing the image
Returns:
Type
Bitmap

<static> createRect(options, bounds)

creates an EaselJS Rect Shape instance
Parameters:
Name Type Description
options Object the options can contain
Properties
Name Type Description
fill String | Object color for filling graphics
Properties
Name Type Description
colors Array colors to create a linear gradient fill
ratios Array color ratios to create a linear gradient fill
points Array start & stop points to create a linear gradient fill
stroke String | Object stroke options, if string it creates a stroke with size 1
Properties
Name Type Description
size Number the size
color String the color
radius Boolean | Number | Array
if false it draws a rect
if Number it draws a round rect
if Array it draws a round rect complex (array has to respect the arguments sequence of drawRoundRectComplex method of EaselJS Graphics class
bounds Arguments the bounds parameter will be passed to setBounds method of EaselJS Container class
so it has to be an array with this sequence
  • {Number} x
  • {Number} y
  • {Number} width
  • {Number} height
Returns:
Type
Shape

<static> createSprite(spritesheet)

creates an EaselJS Sprite instance
Parameters:
Name Type Description
spritesheet HTMLElement the preloaded DOM element representing the sprite
Returns:
Type
Sprite

<static> createText(text, font, color)

creates an EaselJS Text instance
Parameters:
Name Type Description
text String the text to be rendered
font String font options as expected by the EaselJS Text class
color String the color of the text
Returns:
Type
Text

<static> scale(element, scale)

sets the scale factor of an EaselJS element
Parameters:
Name Type Description
element Object | Container | Element can be an Object, an EaselJS instance, a CreateJS Core Elements instance
scale Number | Object the scale factor to be used for both scaleX and scaleY
Returns:
Type
Object | Container | Element

<static> setBoxSize(element, width, height, css)

sets the box size of an EaselJS element
Parameters:
Name Type Description
element Object | Container | Element can be an Object, an EaselJS instance, a CreateJS Core Elements instance
width Number the width
height Number the height
css Boolean specity if you want to override also the css box size properties
Returns:
Type
Object | Container | Element