-
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);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.
将遮罩图像（或画布）中的alpha应用于目标target，这样结果的alpha通道将从遮罩派生，而RGB通道将从目标复制。即目标target的rgb通道不变，而alpha通道来自遮罩的image或canvas
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);- 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);
// 创建cache canvas
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;
// globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。
// 在目标（已有）图像上显示源（新的）图像
drawingCanvas.updateCache("source-over");
bitmap.updateCache();
stage.update();
}
function handleMouseUp(event) {
isDrawing = false;
}