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

 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()
    }
},