讓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工作

回答

相關問題