Basic usage
var MyBubbles = new ComicBubbles(image_id)
orvar 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" |
| responsive | false | set to true to adjust bubble positions while resizing the image (responsiveness) v1.3 |
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 |
| className | "" | can be used in media queries (e.g. to override fontSize) v1.3 |
| 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
onCanvasLoad(callback) v1.3
callback: function, required
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
setResponsive(responsive)returnsComicBubbles v1.3
responsive: Boolean, required
isResponsive()returnsBoolean v1.3
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
setClassName(class_name, callback)returnsBubble v1.3
class_name: String, required
callback: function, optional
getClassName()returnsString v1.3
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