Basic usage

var MyBubbles = new ComicBubbles(image_id)

or

var MyBubbles = new ComicBubbles(image_id, canvas_settings, bubble_settings)

image_id: String, required
canvas_settings: Object, optional
bubble_settings: Object, optional

Note: If you want to destroy MyBubbles, call DestroyComicBubbles(MyBubbles)

Properties

var canvas_settings = {canvas: canvas_properties}

canvas_properties

property default description
text "" plain text
line break: "\n"
width "140px" text field width
height "65px" text field height
fontFamily 'Arial' valid fonts:
- 'Arial'
- 'Arial Black'
- 'Comic Sans MS'
- 'Courier New'
- 'Georgia'
- 'Impact'
- 'Lucida Console'
- 'Lucida Sans Unicode'
- 'Palatino Linotype'
- 'Tahoma'
- 'Times New Roman'
- 'Trebuchet MS'
- 'Verdana'
Note: You can also use Google fonts (include them inside the <head> section with a stylesheet link)
fontSize "15px" valid values: integers from 8 to 99
fontStyle "normal" "normal" or "italic"
fontWeight "normal" "normal" or "bold"
textAlign "center" "left" or "center" or "right" or "justify"
lineHeight 1.2 0.1 - 3
background "#ffffff" hex value
color "#000000" hex value
opacity 0.8 0 - 1
readonly true set to false to enable mouse actions (comicbubbles_editor.js required)
settable true set to false to hide 's' button
bubbleStyle "none" "none" or "speak" or "think" or "scream" or "arrow"

var bubble_settings = {bubble: bubble_properties}

bubble_properties

property default description
id "b" + new Date().getTime() + number of bubbles can be replaced by any string
name "" can be any string
text canvas_settings.canvas.text plain text
line break: "\n"
x "0px" text field x coordinate
y "0px" text field y coordinate
width canvas_settings.canvas.width text field width
height canvas_settings.canvas.height text field height
fontFamily canvas_settings.canvas.fontFamily valid fonts:
- 'Arial'
- 'Arial Black'
- 'Comic Sans MS'
- 'Courier New'
- 'Georgia'
- 'Impact'
- 'Lucida Console'
- 'Lucida Sans Unicode'
- 'Palatino Linotype'
- 'Tahoma'
- 'Times New Roman'
- 'Trebuchet MS'
- 'Verdana'
Note: You can also use Google fonts (include them inside the <head> section with a stylesheet link)
fontSize canvas_settings.canvas.fontSize valid values: integers from 8 to 99
fontStyle canvas_settings.canvas.fontStyle "normal" or "italic"
fontWeight canvas_settings.canvas.fontWeight "normal" or "bold"
textAlign canvas_settings.canvas.textAlign "left" or "center" or "right" or "justify"
lineHeight canvas_settings.canvas.lineHeight 0.1 - 3
background canvas_settings.canvas.background hex value
color canvas_settings.canvas.color hex value
opacity canvas_settings.canvas.opacity 0 - 1
readonly canvas_settings.canvas.readonly set to false to enable mouse actions (comicbubbles_editor.js required)
settable canvas_settings.canvas.settable set to false to hide 's' button
visible true set to false to hide bubble
bubbleStyle canvas_settings.canvas.bubbleStyle "none" or "speak" or "think" or "scream" or "arrow"
tailLocation "se" valid values:
"nw", "n", "ne", "e", "se", "s", "sw", "w"
tailX tail pointer x coordinate
tailY tail pointer y coordinate

ComicBubbles object methods

getBubbleById(bubble_id)returnsBubble

bubble_id: String, required

getBubblesByName(bubble_name)returnsBubble[]

bubble_name: String, required

getAllBubbles()returnsBubble[]

addBubble(bubble, callback)returnsBubble

bubble: Bubble, required
callback: function, optional

setText(text)returnsComicBubbles

text: String, required

getText()returnsString

setWidth(width)returnsComicBubbles

width: Number, required

getWidth()returnsNumber

setHeight(height)returnsComicBubbles

height: Number, required

getHeight()returnsNumber

setFontFamily(font_family)returnsComicBubbles

font_family: String, required

getFontFamily()returnsString

setFontSize(font_size)returnsComicBubbles

font_size: Number, required

getFontSize()returnsNumber

setFontStyle(font_style)returnsComicBubbles

font_style: String, required

getFontStyle()returnsString

setFontWeight(font_weight)returnsComicBubbles

font_weight: String, required

getFontWeight()returnsString

setTextAlign(text_align)returnsComicBubbles

text_align: String, required

getTextAlign()returnsString

setLineHeight(line_height)returnsComicBubbles

line_height: Number, required

getLineHeight()returnsNumber

setBackground(background_color)returnsComicBubbles

background_color: String, required

getBackground()returnsString

setColor(text_color)returnsComicBubbles

text_color: String, required

getColor()returnsString

setOpacity(opacity)returnsComicBubbles

opacity: Number, required

getOpacity()returnsNumber

setReadonly(readonly)returnsComicBubbles

readonly: Boolean, required

isReadonly()returnsBoolean

setSettable(settable)returnsComicBubbles

settable: Boolean, required

isSettable()returnsBoolean

setBubbleStyle(bubble_style)returnsComicBubbles

bubble_style: String, required

getBubbleStyle()returnsString

getDefaultSettings()returnsObject

onBubbleStateChange(callback)

callback: function, required

getBubblesData()returnsObject

Bubble object methods

setId(id, callback)returnsBubble

id: String, required
callback: function, optional

getId()returnsString

setName(name, callback)returnsBubble

name: String, required
callback: function, optional

getName()returnsString

setText(text, callback)returnsBubble

text: String, required
callback: function, optional

getText()returnsString

setX(x, callback)returnsBubble

x: Number, required
callback: function, optional

getX()returnsNumber

setY(y, callback)returnsBubble

y: Number, required
callback: function, optional

getY()returnsNumber

setWidth(width, callback)returnsBubble

width: Number, required
callback: function, optional

getWidth()returnsNumber

setHeight(height, callback)returnsBubble

height: Number, required
callback: function, optional

getHeight()returnsNumber

setFontFamily(font_family, callback)returnsBubble

font_family: String, required
callback: function, optional

getFontFamily()returnsString

setFontSize(font_size, callback)returnsBubble

font_size: Number, required
callback: function, optional

getFontSize()returnsNumber

setFontStyle(font_style, callback)returnsBubble

font_style: String, required
callback: function, optional

getFontStyle()returnsString

setFontWeight(font_weight, callback)returnsBubble

font_weight: String, required
callback: function, optional

getFontWeight()returnsString

setTextAlign(text_align, callback)returnsBubble

text_align: String, required
callback: function, optional

getTextAlign()returnsString

setLineHeight(line_height, callback)returnsBubble

line_height: Number, required
callback: function, optional

getLineHeight()returnsNumber

setBackground(background_color, callback)returnsBubble

background_color: String, required
callback: function, optional

getBackground()returnsString

setColor(text_color, callback)returnsBubble

text_color: String, required
callback: function, optional

getColor()returnsString

setOpacity(opacity, callback)returnsBubble

opacity: Number, required
callback: function, optional

getOpacity()returnsNumber

setReadonly(readonly, callback)returnsBubble

readonly: Boolean, required
callback: function, optional

isReadonly()returnsBoolean

setSettable(settable, callback)returnsBubble

settable: Boolean, required
callback: function, optional

isSettable()returnsBoolean

setTailLocation(tail_location, callback)returnsBubble

tail_location: String, required
callback: function, optional

getTailLocation()returnsString

setTailX(tail_x, callback)returnsBubble

tail_x: Number, required
callback: function, optional

getTailX()returnsNumber

setTailY(tail_y, callback)returnsBubble

tail_y: Number, required
callback: function, optional

getTailY()returnsNumber

setBubbleStyle(bubble_style, callback)returnsBubble

bubble_style: String, required
callback: function, optional

getBubbleStyle()returnsString

show(callback)returnsBubble

callback: function, optional

hide(callback)returnsBubble

callback: function, optional

isVisible()returnsBoolean

fadeIn(miliseconds, callback)returnsBubble

miliseconds: Number, optional
callback: function, optional

fadeOut(miliseconds, callback)returnsBubble

miliseconds: Number, optional
callback: function, optional

moveTo(x, y, speed, callback)returnsBubble

x: Number, required
y: Number, required
speed: 'slowest'|'slower'|'slow'|'fast'|'faster'|'fastest', optional
callback: function, optional

pumpUp(speed, callback)returnsBubble

speed: 'slowest'|'slower'|'slow'|'fast'|'faster'|'fastest', optional
callback: function, optional

delay(miliseconds, callback)returnsBubble

miliseconds: Number, optional
callback: function, optional

remove(callback)

callback: function, optional

onMouseEvent(callback, event)returnsBubble

callback: function, required
event: 'click'|'mousedown'|'mouseup'|'mouseover'|'mouseout', optional

offMouseEvent(callback, event)returnsBubble

callback: function, required
event: 'click'|'mousedown'|'mouseup'|'mouseover'|'mouseout', optional

getBubbleSettings()returnsObject