Filter Class
Base class that all filters should inherit from. Filters need to be applied to objects that have been cached using the cache method. If an object changes, please cache it again, or use updateCache. Note that the filters must be applied before caching.
Example
myInstance.filters = [
new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0),
new createjs.BlurFilter(5, 5, 10)
];
myInstance.cache(0,0, 100, 100);
Note that each filter can implement a getBounds method, which returns the margins that need to be applied in order to fully display the filter. For example, the BlurFilter will cause an object to feather outwards, resulting in a margin around the shape.
EaselJS Filters
EaselJS comes with a number of pre-built filters:- AlphaMapFilter : Map a greyscale image to the alpha channel of a display object
- AlphaMaskFilter: Map an image's alpha channel to the alpha channel of a display object
- BlurFilter: Apply vertical and horizontal blur to a display object
- ColorFilter: Color transform a display object
- ColorMatrixFilter: Transform an image using a ColorMatrix
Constructor
Filter
()
Item Index
Methods
- _applyFilter
- _createWebGLRenderer
- _getFragmentShader Get fragment shader code in GLSL. Filters are responsible for their own fragment shaders.
- _getVertexShader Get vertex shader in GLSL code. This sets the positions of each point on the context in 3D space.
- _initBuffers
- _initShaders
- _initUniforms
- _initUniforms
- _initUniforms
- applyFilter
- applyFilter
- clone
- clone
- getBounds
- getBounds
- initialize deprecated
- initialize
- shaderParamSetup
- toString
- toString
Properties
Methods
_applyFilter
-
imageData
Parameters:
-
imageDataImageDataTarget ImageData instance.
Returns:
_createWebGLRenderer
()
protected
Attempt to creates a WebGLContextRenderer for fast, efficient filter rendering. Used during filter initialization. If it cannot be done, or this.useGL is set to false, then the filter is rendered normally using a Context2D.
_getFragmentShader
Get fragment shader code in GLSL.
Filters are responsible for their own fragment shaders.
()
String
protected
Returns:
_getVertexShader
Get vertex shader in GLSL code. This sets the positions of each point on the context in 3D space.
()
String
protected
Returns:
_initBuffers
-
ctx
Setup the buffers and camera for the object. In this case, just create a rectangle that occupies the full stage.
Parameters:
-
ctxObjectWebGL Context.
_initShaders
-
ctx
Setup the shaders for WebGL rendering. Each filter is responsible for its own fragment shader.
Parameters:
-
ctxObjectWebGL Context.
_initUniforms
-
ctx
Setup the viewport. May change with canvas size.
Parameters:
-
ctxObjectWebGL Context.
_initUniforms
-
ctx
Pass in textures. May change with updated cache.
Parameters:
-
ctxObjectWebGL Context.
_initUniforms
-
ctx
Setup the uniforms for the fragment shader. Each filter is responsible for its own fragment shader uniforms, as they are responsible for their own fragment shaders.
Parameters:
-
ctxObjectWebGL Context.
applyFilter
-
ctx -
x -
y -
width -
height -
[targetCtx] -
[targetX] -
[targetY]
Applies the filter to the specified context. Filter only works with WebGL - use subclass applyFilter for individual filters.
Parameters:
-
ctxCanvasRenderingContext2DThe 2D context to use as the source.
-
xNumberThe x position to use for the source rect.
-
yNumberThe y position to use for the source rect.
-
widthNumberThe width to use for the source rect.
-
heightNumberThe height to use for the source rect.
-
[targetCtx]CanvasRenderingContext2D optionalThe 2D context to draw the result to. Defaults to the context passed to ctx.
-
[targetX]Number optionalThe x position to draw the result to. Defaults to the value passed to x.
-
[targetY]Number optionalThe y position to draw the result to. Defaults to the value passed to y.
Returns:
If the filter was applied successfully.
applyFilter
-
ctx -
x -
y -
width -
height -
[targetCtx] -
[targetX] -
[targetY]
Applies the filter to the specified context.
Parameters:
-
ctxCanvasRenderingContext2DThe 2D context to use as the source.
-
xNumberThe x position to use for the source rect.
-
yNumberThe y position to use for the source rect.
-
widthNumberThe width to use for the source rect.
-
heightNumberThe height to use for the source rect.
-
[targetCtx]CanvasRenderingContext2D optionalThe 2D context to draw the result to. Defaults to the context passed to ctx.
-
[targetX]Number optionalThe x position to draw the result to. Defaults to the value passed to x.
-
[targetY]Number optionalThe y position to draw the result to. Defaults to the value passed to y.
Returns:
If the filter was applied successfully.
clone
()
Filter
Returns a clone of this Filter instance.
Returns:
A clone of the current Filter instance.
clone
()
Filter
Returns a clone of this Filter instance.
Returns:
A clone of the current Filter instance.
getBounds
-
[rect]
Provides padding values for this filter. That is, how much the filter will extend the visual bounds of an object it is applied to.
Parameters:
-
[rect]Rectangle optionalIf specified, the provided Rectangle instance will be expanded by the padding amounts and returned.
Returns:
If a rect param was provided, it is returned. If not, either a new rectangle with the padding values, or null if no padding is required for this filter.
getBounds
()
Rectangle
Returns a rectangle with values indicating the margins required to draw the filter or null. For example, a filter that will extend the drawing area 4 pixels to the left, and 7 pixels to the right (but no pixels up or down) would return a rectangle with (x=-4, y=0, width=11, height=0).
Returns:
a rectangle object indicating the margins required to draw the filter or null if the filter does not effect bounds.
initialize
()
deprecated
protected
initialize
()
protected
Initialization method.
shaderParamSetup
-
gl -
stage -
shaderProgram
Assign any unique uniforms or other setup functionality here.
Parameters:
-
glWebGLContextThe context associated with the stage performing the render.
-
stageSpriteStageThe stage instance that will be rendering.
-
shaderProgramShaderProgramThe compiled shader that is going to be sued to perform the render.
Properties
FRAG_SHADER
String
Pre-processing shader code, will be parsed before being fed in. This should be based upon SpriteStage.SHADER_FRAGMENT_BODY_REGULAR
VTX_SHADER
String
Pre-processing shader code, will be parsed before being fed in. This should be based upon SpriteStage.SHADER_VERTEX_BODY_REGULAR