1

私は困惑しています。EaselJS の AlphaMaskFilter が機能しません。私は何か間違ったことをしているとは思いませんが、私が期待していることを示していません。Google ビルボードに懐中電灯を向けているように見えるはずです。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();   
};

最も重要な 2 行は、de var amf = ... 行と bmp.filters = [amf]; です。行、これら 2 つはプログラムを中断します。

前もって感謝します！

4

1 に答える 1

1

フィルタ ( などcreatejs.AlphaMaskFilter) は、CreateJS および EaselJS のメイン パッケージには含まれていません。それらを個別に含める必要があります。この情報はドキュメントにあります: http://www.createjs.com/Docs/EaselJS/classes/Filter.html

そして2つ目は、フィドルでvarが呼び出さamffれ、下の行で使用しようとしていますamf（フィドルの28 + 29行目）

*編集: またbmp、フィルターを有効にするには、最初にフィルターを適用した後にフィルターをキャッシュしてから、stagemousemove-listener で updateCache() を使用する必要があります。これは、あなたがやろうとしていることの同様の使用例です: https://github.com/CreateJS/EaselJS/blob/master/examples/AlphaMaskReveal.html

于 2013-04-21T15:22:45.680 に答える