ColorFilter Class
Applies a color transform to DisplayObjects.
Example
This example draws a red circle, and then transforms it to Blue. This is accomplished by multiplying all the channels to 0 (except alpha, which is set to 1), and then adding 255 to the blue channel. var shape = new createjs.Shape().set({x:100,y:100});
shape.graphics.beginFill("#ff0000").drawCircle(0,0,50);
shape.filters = [
new createjs.ColorFilter(0,0,0,1, 0,0,255,0)
];
shape.cache(-50, -50, 100, 100);
See Filter for an more information on applying filters.
Constructor
ColorFilter
-
[redMultiplier=1] -
[greenMultiplier=1] -
[blueMultiplier=1] -
[alphaMultiplier=1] -
[redOffset=0] -
[greenOffset=0] -
[blueOffset=0] -
[alphaOffset=0]
Parameters:
-
[redMultiplier=1]Number optionalThe amount to multiply against the red channel. This is a range between 0 and 1.
-
[greenMultiplier=1]Number optionalThe amount to multiply against the green channel. This is a range between 0 and 1.
-
[blueMultiplier=1]Number optionalThe amount to multiply against the blue channel. This is a range between 0 and 1.
-
[alphaMultiplier=1]Number optionalThe amount to multiply against the alpha channel. This is a range between 0 and 1.
-
[redOffset=0]Number optionalThe amount to add to the red channel after it has been multiplied. This is a range between -255 and 255.
-
[greenOffset=0]Number optionalThe amount to add to the green channel after it has been multiplied. This is a range between -255 and 255.
-
[blueOffset=0]Number optionalThe amount to add to the blue channel after it has been multiplied. This is a range between -255 and 255.
-
[alphaOffset=0]Number optionalThe amount to add to the alpha channel after it has been multiplied. This is a range between -255 and 255.
Item Index
Methods
- _applyFilter
- _createWebGLRenderer
- _getFragmentShader Get fragment shader code in GLSL.
- _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
- applyFilter
- clone
- getBounds
- initialize
- shaderParamSetup
- toString
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 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.
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.
-
targetCtxCanvasRenderingContext2DOptional. The 2D context to draw the result to. Defaults to the context passed to ctx.
-
targetXNumberOptional. The x position to draw the result to. Defaults to the value passed to x.
-
targetYNumberOptional. The y position to draw the result to. Defaults to the value passed to y.
Returns:
clone
()
ColorFilter
Returns a clone of this ColorFilter instance.
Returns:
A clone of the current ColorFilter instance.
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
-
[redMultiplier=1] -
[greenMultiplier=1] -
[blueMultiplier=1] -
[alphaMultiplier=1] -
[redOffset=0] -
[greenOffset=0] -
[blueOffset=0] -
[alphaOffset=0]
Initialization method.
Parameters:
-
[redMultiplier=1]Number optionalThe amount to multiply against the red channel. This is a range between 0 and 1.
-
[greenMultiplier=1]Number optionalThe amount to multiply against the green channel. This is a range between 0 and 1.
-
[blueMultiplier=1]Number optionalThe amount to multiply against the blue channel. This is a range between 0 and 1.
-
[alphaMultiplier=1]Number optionalThe amount to multiply against the alpha channel. This is a range between 0 and 1.
-
[redOffset=0]Number optionalThe amount to add to the red channel after it has been multiplied. This is a range between -255 and 255.
-
[greenOffset=0]Number optionalThe amount to add to the green channel after it has been multiplied. This is a range between -255 and 255.
-
[blueOffset=0]Number optionalThe amount to add to the blue channel after it has been multiplied. This is a range between -255 and 255.
-
[alphaOffset=0]Number optionalThe amount to add to the alpha channel after it has been multiplied. This is a range between -255 and 255.
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