-
Notifications
You must be signed in to change notification settings - Fork 0
Filters
何波 edited this page Jun 21, 2019
·
13 revisions
Base class that all filters should inherit from. Filters need to be applied to objects that have been cached using the cache method. If an object changes, please cache it again, or use updateCache. Note that the filters must be applied before caching.
myInstance.filters = [
new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0),
new createjs.BlurFilter(5, 5, 10)
];
myInstance.cache(0,0, 100, 100);对DisplayObjects进行着色
var shape = new createjs.Shape().set({x:100,y:100});
shape.graphics.beginFill("#ff0000").drawCircle(0,0,50);
shape.filters = [
new createjs.ColorFilter(0,0,0,1, 0,0,255,0)
];
shape.cache(-50, -50, 100, 100);ColorFilter ( [redMultiplier=1] [greenMultiplier=1] [blueMultiplier=1] [alphaMultiplier=1] [redOffset=0] [greenOffset=0] [blueOffset=0] [alphaOffset=0] )
p._applyFilter = function(imageData) {
var data = imageData.data;
var l = data.length;
for (var i=0; i<l; i+=4) {
data[i] = data[i]*this.redMultiplier+this.redOffset;
data[i+1] = data[i+1]*this.greenMultiplier+this.greenOffset;
data[i+2] = data[i+2]*this.blueMultiplier+this.blueOffset;
data[i+3] = data[i+3]*this.alphaMultiplier+this.alphaOffset;
}
return true;
};从源码可知ColorFilter主要原理就是更改图片每个像素的rgba的值。Multiplier是对当前通道颜色从0 ~ 1的一个比值，Offset是在当前色值上再加的色值，范围为-255 ~ 255。
如果我们直接给图片添加新的固定色值，就把各通道的Multiplier设为0，只用Offset就行了。比如网易这个案例
createCanvas: function(f) {
this.clickObject = [];
var c = this;
for (var b = 0; b < this.canvasElement[this.gameIndex].lay3.length; b++) {
var a = this.getBitmap(this.canvasElement[this.gameIndex].lay3[b]);
a.x = 0;
a.y = 0;
this.setBitmapScaleByWidth(a, 640);
this.fillContentContain.addChild(a);
this.clickObject.push({
object: a,
name: this.canvasElement[this.gameIndex].lay3[b]
})
}
for (var b = 0; b < this.clickObject.length; b++) {
this.clickObject[b].object.imageName = this.clickObject[b].name;
this.clickObject[b].object.addEventListener("click", function(g) {
console.log(g.target.imageName);
if (c.sacleMode != "none") {
console.log("return");
return
}
if (c.currentColor == null) {} else {
var h = c.getRBGFromHex(c.currentColor);
if (g.target.chooseColor == c.currentColor) {
h = {
r: 255,
g: 255,
b: 255
};
g.target.chooseColor = null
} else {
g.target.chooseColor = c.currentColor
}
// 改变图片颜色
g.target.filters = [new createjs.ColorFilter(0,0,0,1,h.r,h.g,h.b,0)];
g.target.cache(0, 0, g.target.image.width, g.target.image.height);
c.stage.update()
}
})
}
var d = this.getBitmap(this.canvasElement[this.gameIndex].lay2);
d.x = 0;
d.y = 0;
this.setBitmapScaleByWidth(d, 640);
this.fillContentContain.addChild(d);
var e = this.getBitmap(this.canvasElement[this.gameIndex].lay1);
e.x = 0;
e.y = 0;
this.setBitmapScaleByWidth(e, 640);
this.fillContentContain.addChild(e);
if (f) {
this.stage.update()
}
},Provides helper functions for assembling a matrix for use with the ColorMatrixFilter. Most methods return the instance to facilitate chained calls.
colorMatrix = new createjs.ColorMatrix();
colorMatrix.adjustHue(20).adjustBrightness(50);
var colorMatrixFilter = new createjs.ColorMatrixFilter(colorMatrix);
bmp.filters = [colorMatrixFilter];
function handleSliderChange(evt) {
colorMatrix.setColor(
sliders.brightness.value * 200 - 100,
sliders.contrast.value * 200 - 100,
sliders.saturation.value * 200 - 100,
sliders.hue.value * 360 - 180);
bmp.updateCache();
stage.update();
}- brightness: Number 明度 -100 ~ 100
- contrast : Number 对比度 -100 ~ 100
- hue : Number 色相 -180 ~ 180
- saturation : Number 饱和度 -100 ~ 100
- adjustBrightness(brightness) -255 ~ 255
- adjustContrast(contrast)
- adjustHue(hue)
- adjustSaturation(saturation)
- adjustColor(brightness, contrast, saturation, hue)
允许您执行复杂的颜色操作，例如修改饱和度saturation、明度brightness或反向inverting。有关更改颜色的详细信息，请参见ColorMatrix。为了更容易进行颜色转换，请考虑ColorMatrix。
This example creates a red circle, inverts its hue, and then saturates it to brighten it up.
var shape = new createjs.Shape().set({x:100,y:100});
shape.graphics.beginFill("#ff0000").drawCircle(0,0,50);
var matrix = new createjs.ColorMatrix().adjustHue(180).adjustSaturation(100);
shape.filters = [
new createjs.ColorMatrixFilter(matrix)
];
shape.cache(-50, -50, 100, 100);- matrix Array | ColorMatrix A 4x5 matrix describing the color operation to perform. See also the ColorMatrix class.
源码分析
p._applyFilter = function(imageData) {
var data = imageData.data;
var l = data.length;
var r,g,b,a;
var mtx = this.matrix;
var m0 = mtx[0], m1 = mtx[1], m2 = mtx[2], m3 = mtx[3], m4 = mtx[4];
var m5 = mtx[5], m6 = mtx[6], m7 = mtx[7], m8 = mtx[8], m9 = mtx[9];
var m10 = mtx[10], m11 = mtx[11], m12 = mtx[12], m13 = mtx[13], m14 = mtx[14];
var m15 = mtx[15], m16 = mtx[16], m17 = mtx[17], m18 = mtx[18], m19 = mtx[19];
for (var i=0; i<l; i+=4) {
r = data[i];
g = data[i+1];
b = data[i+2];
a = data[i+3];
data[i] = r*m0+g*m1+b*m2+a*m3+m4; // red
data[i+1] = r*m5+g*m6+b*m7+a*m8+m9; // green
data[i+2] = r*m10+g*m11+b*m12+a*m13+m14; // blue
data[i+3] = r*m15+g*m16+b*m17+a*m18+m19; // alpha
}
return true;
};对DisplayObjects显示对象在canvas context 2d中运用方框模糊box blur，对webgl环境中用高斯模糊Gaussian blur。请注意，此模糊滤镜相当密集，特别是当质量设置高于1时。
var shape = new createjs.Shape().set({x:100,y:100});
shape.graphics.beginFill("#ff0000").drawCircle(0,0,50);
var blurFilter = new createjs.BlurFilter(5, 5, 1);
shape.filters = [blurFilter];
var bounds = blurFilter.getBounds();
shape.cache(-50+bounds.x, -50+bounds.y, 100+bounds.width, 100+bounds.height);