如何使用 Easel.js 在 Flash CC 中应用 alphaMaskFilter？答案

【问题标题】：How to apply the alphaMaskFilter in Flash CC using Easel.js?如何使用 Easel.js 在 Flash CC 中应用 alphaMaskFilter？
【发布时间】：2016-05-03 05:59:53
【问题描述】：

我正在使用 Flash CC 在画布文档中工作，并且在舞台 mask_mc（这是一个带有 alpha 渐变的影片剪辑）和徽标上有以下标记的移动剪辑。目标是在徽标上创建一个光泽。

var mask_mc = this.mask_mc; 
mask_mc.cache(0, 0, 232, 196);

var logo = this.logo;
logo.cache(0, 0, 271, 40);

logo.filters = [
new createjs.AlphaMaskFilter(mask_mc.cacheCanvas)
];

我要做的只是模拟使用 AS3 的 alpha 渐变蒙版，但无法使其与上述代码一起使用：

//Original AS3 code
mask_mc.cacheAsBitmap = true;
logo.cacheAsBitmap = true;
logo.mask = mask_mc;

谢谢！

【问题讨论】：

标签： mask alpha createjs easeljs flash-cc

【解决方案1】：

您必须在应用过滤器之后缓存（或更新缓存）

var logo = this.logo;
logo.filters = [
    new createjs.AlphaMaskFilter(mask_mc.cacheCanvas)
];
logo.cache(0, 0, 271, 40);

您的第二个示例将不起作用，因为 mask 属性需要 Shape，并且不适用于画布/缓存。

【讨论】：

我真正想要实现的是让 alpha 渐变显示对象 (mask_mc) 被徽标实例掩盖，这工作正常，但是似乎有另一个徽标实例出现在被掩盖的下方内容，尽管舞台上仅有的 2 个实例是 mask_mc 和 logo。这是我的代码：var mask_mc = this.mask_mc; var logo = this.logo; logo.x = 0; mask_mc.x = 0; logo.cache(0, 0, 271, 40); mask_mc.filters = [ new createjs.AlphaMaskFilter(logo.cacheCanvas) ]; mask_mc.cache(0, 0, 232, 196);