# 滤镜效果

PixiJS 内置了多种滤镜，可以为显示对象添加视觉效果。

# 使用滤镜 {#using-filters}

import { BlurFilter, DropShadowFilter, GlowFilter } from 'pixi.js';

// 模糊滤镜
const blurFilter = new BlurFilter();
blurFilter.blur = 5;  // 模糊强度

sprite.filters = [blurFilter];

1
2
3
4
5
6
7

# 常用内置滤镜 {#built-in-filters}

# 模糊滤镜 (BlurFilter) {#blur-filter}

const blur = new BlurFilter();
blur.blur = 10;        // 模糊强度
blur.quality = 4;      // 质量（值越大越平滑）
sprite.filters = [blur];

1
2
3
4

# 发光滤镜 (GlowFilter) {#glow-filter}

// 需要额外安装 @pixi/filter-glow
const glow = new GlowFilter({
    distance: 15,      // 发光距离
    outerStrength: 2,  // 外部强度
    innerStrength: 1,  // 内部强度
    color: 0xffff00,   // 发光颜色
});
sprite.filters = [glow];

1
2
3
4
5
6
7
8

# 颜色矩阵滤镜 (ColorMatrixFilter) {#color-matrix-filter}

const colorMatrix = new ColorMatrixFilter();

// 灰度
colorMatrix.greyscale(1);

// 色调
colorMatrix.hue(180);

// 亮度
colorMatrix.brightness(1.5);

// 黑白
colorMatrix.blackAndWhite(true);

// 组合效果
colorMatrix. Technicolor(true);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 投影滤镜 (DropShadowFilter) {#drop-shadow-filter}

const shadow = new DropShadowFilter({
    color: 0x000000,
    alpha: 0.5,
    blur: 4,
    distance: 5,
    offsetX: 3,
    offsetY: 3,
});
sprite.filters = [shadow];

1
2
3
4
5
6
7
8
9

# 动画滤镜 {#animated-filters}

const blurFilter = new BlurFilter();
sprite.filters = [blurFilter];

let blurAmount = 0;
app.ticker.add(() => {
    blurAmount = Math.sin(Date.now() * 0.003) * 5 + 5;
    blurFilter.blur = blurAmount;
});

1
2
3
4
5
6
7
8

# 多个滤镜叠加 {#multiple-filters}

sprite.filters = [
    new BlurFilter(),
    new ColorMatrixFilter(),
    new DropShadowFilter(),
];

1
2
3
4
5

# 在线 Demo {#online-demo}

← 粒子系统小游戏实战 →