Question

如何使用createjs应用渐变填充？以下是用于创建加载图像的代码，我已经使用滤色器更改了颜色，但是我想应用渐变颜色

 let rightContainer = new createjs.Container();
                let rightMain = new window.createjs.Bitmap(rightImage);
                // leftMain.scaleX = 800 / leftMain.image.width;
                rightMain.scaleY = 800 / rightMain.image.height;
                rightContainer.addChild(rightMain);
                rightMain.x = 300;
                rightMain.y = 0;
                this.layerImage = rightMain.clone();
                this.layerImage.alpha = 0.15;
                rightContainer.addChild(this.layerImage);
                rightMain.filters = [new window.createjs.ColorFilter(0, 0, 0, 1, 117, 111, 115, 0)];
                rightContainer.main = rightMain;
                rightMain.cache(0, 0, rightMain.image.width, rightMain.image.height);
                rightContainer.visible = false;
                this.stage.addChild(rightContainer);

Answer 1

您到底想做什么？在滤色的图像上应用渐变？

您可以使用的一种方法是：

绘制一个带有渐变的框
对其进行缓存，以便可用作AlphaMaskFilter
将其作为过滤器应用于位图
缓存位图以应用过滤器。

我做了一个演示，演示了它如何工作： https://jsfiddle.net/lannymcnie/uog3hkpd/2/

// Draw a gradient in a shape:
s.graphics.lf(["#000", "rgba(0,0,0,0)"], [0, 0], 0,0,960,0);

// Cache the shape
s.cache(0,0,960,400);

// Add the alphamaskfilter + a color adjustment for fun
var col = new createjs.ColorMatrix().adjustHue(180);
bmp.filters = [
    new createjs.AlphaMaskFilter(s.cacheCanvas), 
    new createjs.ColorMatrixFilter(col)
];

// Cache it to apply filters
bmp.cache(0,0,960,400);

该演示还做了其他一些事情，例如

在未过滤的下方添加第二个bmp
动画化渐变比例（需要重新缓存）

希望对您的问题有所帮助。如果您有任何特定的代码或示例需要帮助，请随时进行澄清。

干杯

如何使用createjs为图像应用渐变颜色？

1 个答案: