如何使用 createjs 为图像应用渐变颜色?
How to apply gradient color for an image using createjs?
如何使用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);
你到底想做什么?在滤色图像上应用渐变?
您可以使用的方法是:
- 画一个带有渐变的盒子
- 缓存它以便它可以用作 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应用渐变填充?下面是创建加载图像的代码,我已经使用滤色器更改了颜色,但我想应用渐变颜色
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);
你到底想做什么?在滤色图像上应用渐变?
您可以使用的方法是:
- 画一个带有渐变的盒子
- 缓存它以便它可以用作 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
- 动画渐变比例(需要重新缓存)
希望对您的问题有所帮助。如果您有任何特定的代码或示例需要帮助,请随时澄清。
干杯,