在 EaselJS 或 TweenMax 中使用 Alpha 过滤器蒙版

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

Link: https://jsfiddle.net/Dbardaji/ndmzLt1z/

Answer 1

我想我知道您想要做什么，并且需要几个步骤才能实现。 Alpha 掩码在 canvas 中比在 Animate/Flash 中更复杂，因此设置起来更困难。动画效果也很困难。

正确应用过滤器

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

以下是上述步骤的示例： 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位置，和缓存位置。为了简化，我添加了一个Container，把渐变放在里面，而不是缓存Container。这意味着imgSheen可以自由移动，我们可以随时更新容器缓存。
容器的缓存和过滤器的缓存必须在任何时候更新。

我将 Tween 移出 tick 方法（我们只希望它发生一次 - 而不是每次 tick 都创建），并添加了一个 "change" 侦听器来更新缓存。这是一个更新的演示：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 过滤器蒙版

Mask with Alpha Filter in EaselJS or TweenMax

javascript

mask

filter

createjs

gsap