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 = ... line和bmp.filters = [amf];这两行打破了这个计划。

提前致谢！

Answer 1

过滤器（如createjs.AlphaMaskFilter）未包含在CreateJS和EaselJS的主程序包中。你必须分开包括它们。这些信息可以在文档中找到：http://www.createjs.com/Docs/EaselJS/classes/Filter.html - 我知道，不是很突出，我有同样的问题：）

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

*编辑：我还注意到，你没有缓存bmp - 为了使过滤器生效，你必须在最初应用过滤器之后缓存它，然后使用updateCache（）在stagemousemove-listener中。以下是您尝试执行此操作的类似示例：https://github.com/CreateJS/EaselJS/blob/master/examples/AlphaMaskReveal.html

让EaselJS AlphaMaskFilter工作

1 个答案: