Как применить цвет градиента для изображения с помощью createjs? - PullRequest
Новая
       25

Как применить цвет градиента для изображения с помощью createjs?

0 голосов
/ 01 января 2019

Как применить градиентную заливку с помощью 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);

1 Ответ

0 голосов
/ 01 января 2019

Что именно вы пытаетесь сделать?Применить градиент к изображению с цветным фильтром?

Подход, который вы можете использовать:

  1. Нарисуйте прямоугольник с градиентом
  2. Кэшируйте его, чтобы оно моглоиспользоваться как AlphaMaskFilter
  3. Применить его к растровому изображению в качестве фильтра
  4. Кэшировать растровое изображение для применения фильтра.

Я сделал демонстрацию, чтобы показать, как этобудет работать: 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 внизу, который не фильтруется
  • Анимациякоэффициент градиента (требует повторного кэширования)

Надеюсь, это поможет вам в вашем вопросе.Если у вас есть какой-то конкретный код или примеры, с которыми вам нужна помощь, пожалуйста, уточните.

Cheers,

...