Filter Class
Base class that all filters should inherit from. Appli
When on a regular Stage apply the Filters and then cache the object using the cache method.
When a cached object changes, please use updateCache.
When on a StageGL simply setting content in the .filters
array will trigger an automatic and constantly updated cache.
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.
Any filter that consumes an external image stretches the image to cover the cached bounds. If this is an undesired visual result, then use an intermediary cache to properly size and layout your data before passing it to a filter.
EaselJS Filters
EaselJS comes with a number of pre-built filters:- AberrationFilter : Shift the RGB components separately along a given vector
- 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
- DisplacementFilter: Create localized distortions in supplied display object
Constructor
Filter
()
Item Index
Properties
Methods
_applyFilter
-
imageData
Parameters:
-
imageData
ImageDataTarget ImageData instance.
Returns:
applyFilter
-
ctx
-
x
-
y
-
width
-
height
-
[targetCtx=ctx]
Applies the filter to the specified context.
Parameters:
-
ctx
CanvasRenderingContext2DThe 2D context to use as the source.
-
x
NumberThe x position to use for the source rect.
-
y
NumberThe y position to use for the source rect.
-
width
NumberThe width to use for the source rect.
-
height
NumberThe height to use for the source rect.
-
[targetCtx=ctx]
CanvasRenderingContext2D optionalThe 2D context to draw the result to. Defaults to the context passed to ctx.
Returns:
If the filter was applied successfully.
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.
shaderParamSetup
-
gl
-
stage
-
shaderProgram
Assign any unique uniforms or other setup functionality here.
Parameters:
-
gl
WebGLContextThe context associated with the stage performing the render.
-
stage
StageGLThe stage instance that will be rendering.
-
shaderProgram
ShaderProgramThe compiled shader that is going to be used to perform the render.
Properties
_multiPass
Filter
private
Another filter that is required to act as part of this filter and created and managed under the hood.
Default: null
FRAG_SHADER
String
readonly
Pre-processed template shader code. It will be parsed before being fed in into the shader compiler. This should be based upon StageGL.SHADER_FRAGMENT_BODY_REGULAR
usesContext
Boolean
A flag stating that this filter uses a context draw mode and cannot be batched into imageData processing.
Default: false
VTX_SHADER
String
readonly
Pre-processed template shader code. It will be parsed before being fed in into the shader compiler. This should be based upon StageGL.SHADER_VERTEX_BODY_REGULAR