Skip to content

Filters

Jump to bottom
何波 edited this page Jun 21, 2019 · 13 revisions

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

ColorMatrix

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

ColorMatrix ( brightness, contrast, saturation, hue )

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

ColorMatrixFilter

允许您执行复杂的颜色操作，例如修改饱和度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);

ColorMatrixFilter ( matrix )

  • 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;
};

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

AlphaMaskFilter

Applies the alpha from the mask image (or canvas) to the target, such that the alpha channel of the result will be derived from the mask, and the RGB channels will be copied from the target. This can be used, for example, to apply an alpha mask to a display object. This can also be used to combine a JPG compressed RGB image with a PNG32 alpha mask, which can result in a much smaller file size than a single PNG32 containing ARGB.

var box = new createjs.Shape();
box.graphics.beginLinearGradientFill(["#000000", "rgba(0, 0, 0, 0)"], [0, 1], 0, 0, 100, 100)
box.graphics.drawRect(0, 0, 100, 100);
box.cache(0, 0, 100, 100);

var bmp = new createjs.Bitmap("path/to/image.jpg");
bmp.filters = [
 new createjs.AlphaMaskFilter(box.cacheCanvas)
];
bmp.cache(0, 0, 100, 100);

AlphaMaskFilter ( mask )

  • mask HTMLImageElement | HTMLCanvasElement

This example demonstrates revealing an image using another image as the mask. The mask is created by drawing a shape, and then caching the shape to make an image with an alpha channel. It is then applied to the image as an mask using the AlphaMaskFilter filter. Another copy of the image is added below with a BlurFilter and ColorMatrixFilter to make the effect cooler.

var stage;
var isDrawing;
var drawingCanvas;
var oldPt;
var oldMidPt;
var image;
var bitmap;
var maskFilter;
var cursor;
var text;
var blur;

function init() {
	examples.showDistractor();

	image = new Image();
	image.onload = handleComplete;
	image.src = "../_assets/art/flowers.jpg";

	stage = new createjs.Stage("testCanvas");
	text = new createjs.Text("Loading...", "20px Arial", "#FFF");
	text.set({x: stage.canvas.width / 2, y: stage.canvas.height - 40});
	text.textAlign = "center";
}

function handleComplete() {
	examples.hideDistractor();
	createjs.Touch.enable(stage);
	stage.enableMouseOver();

	stage.addEventListener("stagemousedown", handleMouseDown);
	stage.addEventListener("stagemouseup", handleMouseUp);
	stage.addEventListener("stagemousemove", handleMouseMove);
	drawingCanvas = new createjs.Shape();
	drawingCanvas.cache(0, 0, image.width, image.height);

	bitmap = new createjs.Bitmap(image);
	maskFilter = new createjs.AlphaMaskFilter(drawingCanvas.cacheCanvas);
	bitmap.filters = [maskFilter];
	bitmap.cache(0, 0, image.width, image.height);

	blur = new createjs.Bitmap(image);
	blur.filters = [new createjs.BlurFilter(24, 24, 2), new createjs.ColorMatrixFilter(new createjs.ColorMatrix(60))];
	blur.cache(0, 0, 960, 400);

	text.text = "Click and Drag to Reveal the Image.";

	stage.addChild(blur, text, bitmap);

	cursor = new createjs.Shape(new createjs.Graphics().beginFill("#FFFFFF").drawCircle(0, 0, 25));
	cursor.cursor = "pointer";

	stage.addChild(cursor);
}

function handleMouseDown(event) {
	oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
	oldMidPt = oldPt;
	isDrawing = true;
}

function handleMouseMove(event) {
	cursor.x = stage.mouseX;
	cursor.y = stage.mouseY;

	if (!isDrawing) {
		stage.update();
		return;
	}

	var midPoint = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);

	drawingCanvas.graphics.clear()
			.setStrokeStyle(40, "round", "round")
			.beginStroke("rgba(0,0,0,0.2)")
			.moveTo(midPoint.x, midPoint.y)
			.curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);

	oldPt.x = stage.mouseX;
	oldPt.y = stage.mouseY;

	oldMidPt.x = midPoint.x;
	oldMidPt.y = midPoint.y;

	drawingCanvas.updateCache("source-over");
	bitmap.updateCache();

	stage.update();
}

function handleMouseUp(event) {
	isDrawing = false;
}

Clone this wiki locally