是否可以使用 EaselJS 将渐变滤镜添加到位图？

Question

我在容器中有一个位图。 Container 具有所有转换属性（这些属性是动态的，它们是从服务器获取的）。

// Container
const display = new createjs.Container();
display.x = 103;
display.y = 44;
display.scaleX = 0.34;
display.scaleY = 0.5;
display.rotation = 35;

// Bitmap
const bitmap = new createjs.Bitmap("trophy.png");

display.addChild(bitmap);

我想对位图应用渐变滤镜，类似于应用颜色滤镜的方式： I would like the end result

bitmap.filters = [
  new createjs.ColorFilter(0,0,0,1, 0,0,255,0)
];

这可能吗？我尝试使用 AlphaMaskFilter，但它似乎不起作用。

谢谢。

Answer 1

您正在寻找的方法是使用图像作为渐变的蒙版。如您所料，您可以使用 AlphaMaskFilter 执行此操作。

加载图像
创建你的渐变形状
添加图像作为 AlphaMaskFilter 的来源
将滤镜应用于形状
缓存形状以应用滤镜。请记住，您正在使用的图像必须完全加载到缓存中，否则过滤器将失败。

var s = new createjs.Shape();
var b = referenceToImage;
s.graphics.beginLinearGradientFill(["#000","#069"], [0, 1], 0, 0, b.width, b.height)
    .drawRect(b.x, b.y, b.width, b.height);

s.filters = [
 new createjs.AlphaMaskFilter(img)
];

s.cache(b.x,b.y,b.width,b.height);

这是一个快速 fiddle 使用带有 alpha 通道的图像 :D https://jsfiddle.net/lannymcnie/m1zps3w7/11/

Answer 2

经过深思熟虑，有一种更高效、更简单的方法来获得效果：使用 composite operation。 AlphaMaskeFilter 实际上在幕后使用它（在 Context2D 中），但如果你自己做，你会有更多的控制权。

与我之前发布的缓存方法相同的第一步，但不是缓存，它只是一行代码。

加载位图
创建渐变叠加层
将位图添加到舞台，然后添加渐变
将 compositeOperation 设置为渐变形状，以便使用“source-in”绘制。形状和渐变必须重叠。

s.compositeOperation = "source-in"

来自文档：

The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent.

这样代码就简单多了。这是更新后的 fiddle： https://jsfiddle.net/lannymcnie/jm5df4kz/1/

此外，由于不再缓存，您可以做一些有趣的事情，例如设置渐变动画。 https://jsfiddle.net/lannymcnie/cjhdn18L/

是否可以使用 EaselJS 将渐变滤镜添加到位图？

Is it possible to add a Gradient Filter to a Bitmap with EaselJS?

canvas

html5-canvas

createjs

easeljs