BB.LineBrush2D
A 2D brush module for drawing contiguous lines in a stamp-like fashion. What makes BB.LineBrush2D fundamentally different from BB.BaseBrush is that each new drawing instance is influenced by the previous position of the brush (usually to adjust for drawing angle or brush width).
Index
Methods
- BB.LineBrush2D constructor
- draw
- scale
- update
Constructor
BB.LineBrush2D
(
-
[config]
)
-
[config]
Parameters:
-
[config]
Object optionalA optional config hash to initialize any of BB.LineBrush2D's public properties.
Example:
var lineBrush = new BB.LineBrush2D({ width: 100,
height: 100, variant: "soft" });
Properties
color
BB.Color
default:null
The brush's color.
height
Number
default:10
The brush's height.
hidden
Boolean
default:false
Wether or not to draw the brush to the screen. Toggle this variable to hide and show the brush.
prevX
Number
default:null
The brush's previous x position. This property is unique to BB.LineBrush.
prevY
Number
default:null
The brush's previous y position. This property is unique to BB.LineBrush.
rotation
Number
default:0
The brush's rotation in degrees. This property is not always used with each brush variant.
type
String
default:"line"
The type of brush. This property should be treated as read-only.
variant
String
default:solid
The current brush variant.
variants
Array
An array of all supported variants.
variants
Boolean
protected
Keeps track of wether or not the controllerModule passed into update was made active (for instance if it was pressed) this frame.
weight
Number
default:1
The brush's line weight.
width
Number
default:10
The brush's width.
x
Number
default:0
The brush's x position.
y
Number
default:0
The brush's y position.
Methods
draw
(
-
context
)
-
context
Draws the brush to the context. Usually called once per animation frame.
Parameters:
-
context
ObjectThe HTML5 canvas context you would like to draw to.
scale
(
-
amount
)
-
amount
Multiplies width and height properties by amount.
Parameters:
-
amount
NumberAmount to scale width and height by
Example:
var brush = new BB.BaseBrush2D({ width: 50, height: 100 });
brush.scale(2);
brush.width // 100
brush.height // 200
update
(
-
controllerModule
)
-
controllerModule
Update method. Usually called once per animation frame.
Parameters:
-
controllerModule
ObjectAn object with x and y properties and optionally an isDown boolean (used for beginning and ending strokeds/marks).
Example:
var mouseInput = new BB.MouseInput(document.getElementById('canvas'));
var pointer = new BB.Pointer(mouseInput);
var brush = new BB.LineBrush2D();
// called once per animation frame (from somewhere else in your app)
function update() {
mouseInput.update();
pointer.update();
brush.update(pointer); // update the brush using the pointer
}