- BB.AFX
- BB.Agent2D
- BB.Audio
- BB.AudioAnalyser
- BB.AudioBase
- BB.AudioBufferLoader
- BB.AudioFX
- BB.AudioNoise
- BB.AudioSampler
- BB.AudioSequencer
- BB.AudioStream
- BB.AudioTone
- BB.BaseBrush2D
- BB.BaseMidiInput
- BB.BrushManager2D
- BB.Color
- BB.Detect
- BB.EventEmitter
- BB.FlowField2D
- BB.ImageBrush2D
- BB.LeapMotion
- BB.LineBrush2D
- BB.MathUtils
- BB.MidiDevice
- BB.MidiInputButton
- BB.MidiInputKey
- BB.MidiInputKnob
- BB.MidiInputPad
- BB.MidiInputSlider
- BB.MouseInput
- BB.Particle2D
- BB.Pointer
- BB.Vector2
BB.BrushManager2D
Basic scene manager for brushes and pointers. BB.BrushManager2D allows a
drawing scene (that uses brushes) to persist while the rest of the canvas is
cleared each frame. It also provides functionality to undo/redo manager to
your drawing actions.
Note: The BB.BrushManager2D class creates a new canvas
that is added to the DOM on top of the canvas object that you pass to its
constructor. This is acheived through some fancy CSS inside of
BB.BrushManager2D.updateCanvasPosition(...). For this reason the canvas
passed to the constructor must be absolutely positioned and
BB.BrushManager2D.updateCanvasPosition(...) should be called each time that
canvas' position or size is updated.
Index
Properties
Constructor
BB.BrushManager2D
(
-
canvas
)
-
canvas
Parameters:
-
canvasHTMLCanvasElementThe HTML5 canvas element for the brush manager to use.
Example:
var brushManager = new BB.BrushManager2D(document.getElementById('canvas'));
Properties
_fboImage
Image
protected
An internal FBO (Frame Buffer Object) that is assigned the pixels from canvas and is drawn during BB.BrushManager2D.draw()
_fboImageLoadWaiting
Boolean
protected
Internal flag checked against in BB.BrushManager2D.draw() that holds wether or not _fboImage is finished loaded. Note: this flag is purposefully not set when _fboImage.src is set from undo() or redo().
_fboImageTemp
Image
protected
default:null
A deep copy of _fboImage that is drawn in BB.BrushManager2D.draw() when _fboImage is reloading
_history
Array
protected
An array of base-64 encoded images that represent undo states.
_needsRedo
Boolean
protected
Internal flag to determine if BB.BrushManager2D.redo() was called since the BB.BrushManager2D.update()
_needsUndo
Boolean
protected
Internal flag to determine if BB.BrushManager2D.undo() was called since the BB.BrushManager2D.update()
_parentCanvas
HTMLCanvasElement
protected
The canvas element passed into the BB.BrushManager2D constructor
_parentContext
CanvasRenderingContext2D
protected
The 2D drawing context of the canvas element passed into the BB.BrushManager2D constructor
_pointers
Array
protected
An array of BB.Pointer object used to control the brushes drawn to brush mananger
_pointerStates
Array
protected
An array of booleans indicating which pointers are currently active (down)
_purgatory
Array
protected
An array of base-64 encoded images that represent redo states.
_secondaryFboImage
Image
protected
A secondary internal FBO (Frame Buffer Object) that is assigned the pixels from _secondaryCanvas
_somePointersDown
Boolean
protected
Boolean that holds true if at least one pointer is active (down)
canvas
HTMLCanvasElement
An in-memory canvas object used internally by BB.BrushManager to draw to and read pixels from
context
CanvasRenderingContext2D
The 2D drawing context of canvas
numUndos
Number
default:5
The number of undo/redo states to save
secondaryCanvas
HTMLCanvasElement
A secondary canvas that is used internally by BB.BrushManager. This canvas is written to the DOM on top of _parentCanvas (the canvas passed into the BB.BaseBrush2D constructor). It is absolutely positioned and has a z-index 1 higher than _parentCanvas.
secondaryContext
CanvasRenderingContext2D
The 2D drawing context of secondaryCanvas
Methods
hasPointers
()
Boolean
A method to determine if the brush manager is currently tracking pointers.
Returns: Boolean
True if brush manager is tracking pointers.
hasRedo
()
Boolean
A method to determine if the brush manager currently has an redo state.
Returns: Boolean
True if brush manager has an redo state in its queue.
hasUndo
()
Boolean
A method to determine if the brush manager currently has an undo state.
Returns: Boolean
True if brush manager has an undo state in its queue.
redo
()
Redo one drawing action if available
trackPointers
(
-
pointers
)
-
pointers
Set the brush manager to use these pointers when drawing. BB.BrushManager2D must be tracking at least one pointer in order to update().
Parameters:
-
pointersArrayAn array of BB.Pointer objects for BB.BrushManager2D to track.
undo
()
Undo one drawing action if available
untrackPointerAtIndex
(
-
index
)
-
index
Untrack one pointer at index. Pointers tracked by BB.BrushManager2D have indexes based on the order they were added by calls to BB.BrushManager2D.trackPointers(...). Untracking a pointer removes it from the internal _pointers array which changes the index of all pointers after it. Keep this in mind when using this method.
Parameters:
-
indexNumberThe index of the pointer to untrack.
untrackPointers
()
Untrack all pointers.
update
()
BB.BrushManager2D's update method. Should be called once per animation frame.
update
(
-
context
)
-
context
Draws the brush manager scene to the canvas supplied in the BB.BrushManager2D constructor or the optionally, "context" if it was provided as a parameter. Should be called once per animation frame.
Parameters:
-
contextCanvasRenderingContext2DAn optional drawing context that will be drawn to if it is supplied.
updateCanvasPosition
()
Notifies brush manager that the canvas passed into the BB.BrushManager2D constructor has been moved or resized. It is important to call this method whenever the positional CSS from the parent canvas is changed so that BB.BrushManager2D's internal canvases may be updated appropriately.
Example:
var canvas = document.getElementById('canvas');
var brushManager = new BB.BrushManager(canvas);
window.onresize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
brushManager.updateCanvasPosition();
}