In this section, we will utilize the cache
method with Bitmap and AlphaMaskFilter
to develop a reflection effect in EaselJS. The target is to load an image and create a Bitmap
class to draw the image. Then, clone the Bitmap
image, change the rotation and add a gradient background, and use AlphaMaskFilter
to create the reflection effect.
The following screenshot is a preview of the result:
The following is the source code of this example:
function init() { var canvas = document.getElementById("canvas"); var stage = new createjs.Stage(canvas); var image = new Image(); image.src = "easeljs.png"; //wait to load the image image.onload = function(evt) { var bitmap = new createjs.Bitmap(evt.target); var width = bitmap.image.width; var height = bitmap.image.height; //clone the existing bitmap to use as reflection var reflectBitmap = bitmap.clone(); reflectBitmap.regY = height; reflectBitmap.rotation = 180; //to add a padding from the main bitmap reflectBitmap.y = height + 2; reflectBitmap.scaleX = -1; var maskShape = new createjs.Shape(); var graphics = maskShape.graphics; //add reflection effect graphics.beginLinearGradientFill(["rgba(255, 255, 255, 0)", "rgba(255, 255, 255, 0.6)"], [0.5, 1], 0, 10, 0, height); graphics.drawRect(0, 0, width, height); graphics.endFill(); maskShape.cache(0, 0, width, height); reflectBitmap.filters = [new createjs.AlphaMaskFilter(maskShape.cacheCanvas)]; reflectBitmap.cache(0, 0, width, height); //add both pictures stage.addChild(bitmap); stage.addChild(reflectBitmap); stage.update(); } }
As seen in previous examples, firstly, we created the Stage
class. Then, in order to load the image, we used the Image
class and passed the address of the image to the src
property. The Image
class has an onload
event, which helps developers know when the image is loaded completely. We used this event to execute other parts of the application correctly.
After that, we used a Bitmap
class and passed the image parameter from the Image
class to it. Because we need the width and height of the picture, we saved them into two different variables called width
and height
. At this moment, we have the first picture but we should have one more picture to create the reflection effect. So, we used the clone
function to duplicate the image. In order to change the rotation, scale, and coordination of the second image, we changed the regY
, rotation
, y
, and scaleX
properties.
After that, a new shape is created using the Shape
class. This is the mask layer that will be used for the AlphaMaskFilter
. Then, we added a linear background to it to create the reflection effect and cached it using the cache
function. Finally, an AlphaMaskFilter
is added to the second picture (a cloned Bitmap
class) and this shape is used as the mask layer. The second picture is also cached again. Both pictures are added to Stage
using the addChild
function and Stage
is also updated with the update
function.
3.137.188.201