AlphaMapFilter Class
Applies a greyscale alpha map image (or canvas) to the target, such that the alpha channel of the result will be copied from the red channel of the map, and the RGB channels will be copied from the target.
Generally, it is recommended that you use AlphaMaskFilter, because it has much better performance.
Example
This example draws a red->blue box, caches it, and then uses the cache canvas as an alpha map on a 100x100 image. var box = new createjs.Shape();
box.graphics.beginLinearGradientFill(["#ff0000", "#0000ff"], [0, 1], 0, 0, 0, 100)
box.graphics.drawRect(0, 0, 100, 100);
box.cache(0, 0, 100, 100);
var bmp = new createjs.Bitmap("path/to/image.jpg");
bmp.filters = [
new createjs.AlphaMapFilter(box.cacheCanvas)
];
bmp.cache(0, 0, 100, 100);
stage.addChild(bmp);
See Filter for more information on applying filters.
Constructor
AlphaMapFilter
-
alphaMap
Parameters:
-
alphaMapImage | HTMLCanvasElementThe greyscale image (or canvas) to use as the alpha value for the result. This should be exactly the same dimensions as the target.
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
- _prepAlphaMap
- applyFilter
- clone
- getBounds
- initialize
- shaderParamSetup
- 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 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.
_prepAlphaMap
()
protected
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
()
AlphaMapFilter
Returns a clone of this object.
Returns:
A clone of the current AlphaMapFilter 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
()
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
_alphaMap
HTMLImageElement | HTMLCanvasElement
protected
_mapData
Uint8ClampedArray
protected
alphaMap
Image | HTMLCanvasElement
The greyscale image (or canvas) to use as the alpha value for the result. This should be exactly the same dimensions as the target.
alphaMap
HTMLImageElement | HTMLCanvasElement
The greyscale image (or canvas) to use as the alpha value for the result. This should be exactly the same dimensions as the target.
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