Javascript EaselJS或TweenMax中带Alpha滤镜的遮罩

我试图在我的图片上方做一个光泽效果，我只是希望这个效果应该显示在我图片的内容中，而不是所有的容器中。我已经试了很多次了，但我无法使用Alphamask频道。如果有人能帮助我并解释我做错了什么，我将不胜感激

这是我的例子：

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

---

链接：

我想我知道你想做什么，要做到这一点有几个步骤。在画布中，Alpha遮罩比动画/Flash更复杂，因此设置更困难。为效果设置动画也很困难

正确应用过滤器

您要查找的过滤器是，而不是AlphaMapFilter。后者使用颜色通道应用过滤器，而不是alpha通道。此外，过滤器获取图像，而不是位图

您应该等到图像加载后再应用它，以避免出现错误或什么也不显示

为了应用过滤器，必须缓存DisplayObjects。这会“冻结”对象，因此每当对象发生更改时，都必须重新缓存该对象

在您的例子中，您将过滤器应用于“imgSheen”，但您应该使用imgSheen作为源。为此，您必须缓存imgSheen，将其

cacheCanvas

传递给AlphaMaskFilter，将其应用于bmp，然后缓存bmp以应用过滤器

不要在舞台上添加

imgSheen

。它是应用于位图的过滤器的一部分，不应可见

以下是上述步骤的示例：

关键位：

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

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

设置效果动画

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

当过滤器更改时，必须重新缓存位图

按照线性位图填充的方式，您不能只更改x位置（您必须更新渐变位置、drawRect位置和缓存位置。为了简化它，我添加了一个容器，将渐变放在其中，然后缓存容器。这意味着

imgSheen

可以自由移动，我们可以随时更新容器缓存

容器的缓存和过滤器的缓存在任何时候发生更改时都必须更新

我将Tween移出了tick方法（我们只希望它发生一次，而不是每次tick都创建），并添加了一个“更改”侦听器来更新缓存。下面是一个更新的演示：

关键位：

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

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

只是提醒一下，每帧更新一次缓存并不理想。最好制作一个覆盖图像的反向渐变，而不是遮罩它（并融入背景）。您可以遮罩渐变和图像，以将其约束到图像大小

---

希望有帮助！

这是一个多么漂亮的解决方案