Filters

ColorFilter

对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就行了。比如网易这个案例