Pixi.js 滤镜特效

布尔模糊

import * as PIXI from "pixi.js"

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x1099bb,
  resolution: window.devicePixelRatio || 1, // 像素比
  antialias: true, // 抗锯齿
})

document.documentElement.appendChild(app.view as any)

// 创建一个精灵
const sprite = PIXI.Sprite.from(
  "https://p7.itc.cn/images01/20210825/6dae02ab52594d13805694ab6c4921cb.jpeg"
)
sprite.x = app.screen.width / 2
sprite.y = app.screen.height / 2
sprite.anchor.set(0.5)
sprite.scale.set(0.3)
app.stage.addChild(sprite)

// 创建一个滤镜
const blueFilter = new PIXI.BlurFilter() // 模糊滤镜
blueFilter.blur = 20 // 值越大越模糊
// 将模糊滤镜添加到精灵上
sprite.filters = [blueFilter]

// 监听鼠标事件
sprite.interactive = true
sprite.on("pointerenter", () => {
  // 设置模糊程度
  blueFilter.blur = 0
})
sprite.on("pointerout", () => {
  // 设置模糊程度
  blueFilter.blur = 20
})

pixi-filters滤镜库

• pixi官方提供了许多滤镜效果，点我查看
• 需要安装npm i pixi-filters

import * as PIXI from "pixi.js"
import { OutlineFilter, GlowFilter } from "pixi-filters"

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x1099bb,
  resolution: window.devicePixelRatio || 1, // 像素比
  antialias: true, // 抗锯齿
})

document.documentElement.appendChild(app.view as any)

// 创建一个精灵
const sprite = PIXI.Sprite.from(
  "https://p7.itc.cn/images01/20210825/6dae02ab52594d13805694ab6c4921cb.jpeg"
)
sprite.x = app.screen.width / 2
sprite.y = app.screen.height / 2
sprite.anchor.set(0.5)
sprite.scale.set(0.3)
app.stage.addChild(sprite)

// 创建一个轮廓滤镜
const outlineFilter = new OutlineFilter(2, 0x0000ff)

// 创建发光滤镜
const glowFilter = new GlowFilter({
  distance: 15, // 虚化
  outerStrength: 1, // 强度
  innerStrength: 0,
  color: 0xff0000,
  quality: 0.5,
})

sprite.filters = [outlineFilter, glowFilter]