Question

我试图在我的图像上方传递光泽效果，我只是希望这个效果应该显示在我的图像内容而不是所有容器中。我一直在尝试它，我不能使alphaMaskChannel工作。如果有人能帮助我并向我解释我做错了什么，我将不胜感激。

这是我的例子：

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", tick);

var imgSheen = new createjs.Shape();
var bmp = new createjs.Bitmap("http://upload.wikimedia.org/wikipedia/pt/0/02/Homer_Simpson_2006.png");


imgSheen.graphics.beginLinearGradientFill(['rgba(255,255,255,0)', '#000', 'rgba(255,255,255,0)'], [0, 0.5, 1], 0, 0, 50, 0).drawRect(0, 0, 100, 600);
imgSheen.rotation = 18;

imgSheen.filters = [
          new createjs.AlphaMapFilter(bmp)
        ];
stage.addChild(bmp, imgSheen);

function tick(event) {
    createjs.Tween.get(imgSheen).to({x:300}, 4000);
    stage.update();    
}

链接：https://jsfiddle.net/Dbardaji/ndmzLt1z/

Answer 1

我想我知道你要做什么，并且有几个步骤可以实现。 Alpha蒙版在画布上比Animate / Flash更复杂，因此设置更加困难。动画效果也很困难。

正确应用过滤器

您要查找的过滤器是AlphaMaskFilter，而不是AlphaMapFilter。后者使用颜色通道应用滤镜，而不是alpha通道。此外，过滤器采用图像，而不是位图。
您应该等到图像加载后再应用它以避免错误或没有任何显示。
必须缓存DisplayObject才能应用过滤器。这＆＃34;冻结＆＃34;对象，所以只要它改变，就必须重新缓存。
在您的情况下，您将过滤器应用于＆＃34; imgSheen＆＃34;，但您应该使用imgSheen作为源。为此，您必须缓存imgSheen，将其cacheCanvas传递给AlphaMaskFilter，将其应用于bmp，然后缓存bmp以应用过滤器。
不要将imgSheen添加到舞台上。它是应用于Bitmap的过滤器的一部分，不应该是可见的。

以下是上述步骤的示例： https://jsfiddle.net/lannymcnie/ndmzLt1z/3/

关键位：

imgSheen.cache(0,0,100,400); // Cache the sheen so it can be used in the filter
bmp.filters = [
    new createjs.AlphaMaskFilter(imgSheen.cacheCanvas) // Use the right filter
];
bmp.cache(0,0,bmp.image.width,bmp.image.height); // Apply the filter
stage.addChild(bmp); // Don't add imgSheen to the stage

动画效果

为了添加动画，过滤器的位置必须改变。这很难，因为：

您必须在过滤器更改
线性位图填充的工作方式，您只需更改x位置（您必须更新渐变位置，drawRect位置，和缓存位置。它，我添加了一个容器，将渐变放入其中，然后缓存容器。这意味着imgSheen可以自由移动，我们可以随时更新容器缓存。
容器和的缓存必须在更改时随时更新。

我将Tween移出tick方法（我们只希望它发生一次 - 不是每次打勾都创建），并添加了一个＆＃34;更改＆＃34;监听器更新缓存。这是一个更新的演示：https://jsfiddle.net/lannymcnie/ndmzLt1z/4/

关键位：

c = new createjs.Container();
c.addChild(imgSheen);

createjs.Tween.get(imgSheen, {loop:true}).to({x:200}, 2000, createjs.Ease.quadInOut)
    .on("change", function() { 
        c.cache(0,0,250,400); 
        bmp.cache(0,0,bmp.image.width,bmp.image.height);
    });

只是提醒每帧更新缓存并不理想。制作覆盖图像的反向渐变可能会更好，而不是掩盖它（并混合到背景中）。您可以屏蔽渐变和图像以将其约束为图像大小。

希望有所帮助！

在EaselJS或TweenMax中使用Alpha过滤器进行掩码

1 个答案: