CODEWITHSUNDEEP
javascripthtmlalphamaskeaseljs
bobismijnnaam
bobismijnnaam

Reputation: 1505

Getting EaselJS AlphaMaskFilter to work

I am stumped. I can't get EaselJS' AlphaMaskFilter to work. I don't think I'm doing anything wrong but it doesn't show what I'm expecting. It should look like you're pointing a flashlight at a google billboard. http://jsfiddle.net/mLn8e/

var stage = new createjs.Stage("c");

var mask = new createjs.Shape();
mask.graphics.beginRadialGradientFill(["rgba(255, 255, 255, 1)","rgba(255, 255, 255, 0)"], [0, 1], 0, 0, 0, 0, 0, 20).drawCircle(0, 0, 20);
mask.cache(-20, -20, 40, 40);
mask.x = 100;
mask.y = 100;

var bg = new createjs.Shape();
bg.graphics.beginFill("#000000").rect(0, 0, 400, 400);

stage.addEventListener("stagemousemove", function(e) {
    mask.x = e.stageX;
    mask.y = e.stageY;
    stage.update();
});

stage.addChild(bg, mask);
stage.update();

var img = new Image();
img.src = "https://www.google.nl/intl/en_ALL/images/logos/images_logo_lg.gif";
img.onload = function (e) {
    var bmp = new createjs.Bitmap(e.target);
    bmp.x = 0;
    bmp.y = 0;

    var amf = new createjs.AlphaMaskFilter(mask.cacheCanvas);
    bmp.filters = [amf];

    stage.addChild(bmp);
    stage.update();   
};

The two most important lines are de var amf = ... line and the bmp.filters = [amf]; line, those two break the program.

Thanks in advance!

Upvotes: 1

Views: 4505

Answers (1)

Olaf Horstmann
Olaf Horstmann

Reputation: 16892

Filters (like createjs.AlphaMaskFilter) are not included in the main package of CreateJS and EaselJS. You have to include them separatly. This information can be found in the docs: http://www.createjs.com/Docs/EaselJS/classes/Filter.html - I know, not very prominent, I had the same issue :)

And the 2nd thing, in the fiddle you var is called amff and in the line below you try to use amf (lines 28 + 29 of the fiddle)

*edit: And what I also just noticed, you don't cache the bmp - in order for a filter to take effect, you have to cache it after applying the filter initially and then use updateCache() in the stagemousemove-listener. Here is an example for a similar use of what you are trying to do: https://github.com/CreateJS/EaselJS/blob/master/examples/AlphaMaskReveal.html

Upvotes: 1

Related Questions