让 EaselJS AlphaMaskFilter 工作

Question

我被难住了。我无法让 EaselJS 的 AlphaMaskFilter 工作。我不认为我做错了什么，但这并没有显示出我的期望。它应该看起来像您将手电筒指向谷歌广告牌。 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();   
};

最重要的两行是 de var amf = ... 行和 bmp.filters = [amf];行，那两个破坏了程序。

提前致谢！

Answer 1

过滤器（如createjs.AlphaMaskFilter）不包含在 CreateJS 和 EaselJS 的主包中。您必须分别包含它们。此信息可以在文档中找到：http://www.createjs.com/Docs/EaselJS/classes/Filter.html - 我知道，不是很突出，我遇到了同样的问题 :)

第二件事，在小提琴中你的 var 被称为amff，在下面的行中你尝试使用amf（小提琴的第 28 行 + 29 行）

*edit：我也刚刚注意到，您没有缓存 bmp - 为了使过滤器生效，您必须在最初应用过滤器后缓存它，然后在stagemousemove 监听器。这是您尝试做的类似使用的示例：https://github.com/CreateJS/EaselJS/blob/master/examples/AlphaMaskReveal.html