PixiJs 滤镜特效 ​

// 导入pixi
import * as PIXI from "pixi.js";

// 创建应用
const app = new PIXI.Application({
	width: window.innerWidth,
	height: window.innerHeight,
	backgroundColor: 0x1099bb,
	resolution: window.devicePixelRatio || 1, // 像素比
});

// 将应用画布添加到DOM中
document.body.appendChild(app.view as any);

// 创建一个纹理
const texture = PIXI.Texture.from("https://img14.360buyimg.com/pop/jfs/t1/23739/35/2224/12087/5c1b0581E1fa6c1c3/58519cee2a0039e0.jpg");

// 创建一个精灵
const sprite = PIXI.Sprite.from(texture);
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;

// 设置精灵的锚点
sprite.anchor.set(0.3);
// 将精灵添加到舞台
app.stage.addChild(sprite);

// 创建模糊滤镜
const blurFilter = new PIXI.BlurFilter()
// 设置模糊滤镜的模糊程度
blurFilter.blur = 10
// 将模糊滤镜添加到精灵上
sprite.filters = [blurFilter]

// 监听鼠标是否进入精灵
sprite.interactive = true
sprite.on('pointerover', () => {
  // 设置模糊滤镜的模糊程度
  blurFilter.blur = 0
})
sprite.on('pointerout', () => {
  // 设置模糊滤镜的模糊程度
  blurFilter.blur = 10
})

// 创建轮廓滤镜
const outlineFilter = new OutlineFilter(5, 0xffff00) // 轮廓宽度，颜色
// 创建发光滤镜
const glowFilter = new GlowFilter({
  distance: 15, // 虚化
  outerStrength: 1, // 强度
  innerStrength: 0,
  color: 0xff0000,
  quality: 0.5
})
// 将轮廓滤镜添加到精灵上
sprite.filters = [outlineFilter, glowFilter]