让EaselJS AlphaMaskFilter工作

我很难过。我无法使EaselJS的AlphaMaskFilter工作。我认为我没有做错什么，但没有显示出我的期望。它应该看起来像你在谷歌广告牌上指着手电筒。 http://jsfiddle.net/mLn8e/让EaselJS AlphaMaskFilter工作

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(); 
};

两个最重要的线是德VAR AMF = ...线和bmp.filters = [AMF];行，这两个打破该计划。

在此先感谢！

来源

2013-04-21 bobismijnnaam

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

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

*编辑：而且我也注意到，你不要缓存bmp - 为了让过滤器生效，你必须在应用最初过滤，然后在stagemousemove-listener中使用updateCache（）。下面是一个类似使用你正在尝试做的例子：https://github.com/CreateJS/EaselJS/blob/master/examples/AlphaMaskReveal.html

来源

2013-04-21 15:22:45 olsn

谢谢！我总是喜欢这些东西，只要我到达电脑，我会立即尝试！ – bobismijnnaam 2013-04-21 16:02:23

此外，您将不得不缓存位图才能工作。 GitHub上的examples文件夹中有一个AlphaMaskFilter，更新后的文档有一些代码示例。 http://www.createjs.com/Docs/EaselJS/classes/AlphaMaskFilter.html – Lanny 2013-04-22 01:04:29

让EaselJS AlphaMaskFilter工作

回答

相关问题