Filters

Filter

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);

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

BlurFilter

对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);

• BlurFilter ( [blurX=0] [blurY=0] [quality=1] )