前言
@pixi/filter-radial-blur 是一个非常强大的用于前端开发的 npm 包。 它是基于 PIXI.js 开发的，能够为图片应用径向模糊效果。本文将全面介绍如何使用这个 npm 包。
安装
使用 npm 安装 @pixi/filter-radial-blur 包
npm install @pixi/filter-radial-blur --save
创建 PIXI.js 的基本场景
-- -------------------- ---- ------- ----- --- - --- ------------------ ------ ---- ------- ---- ---------------- -------- --- ------------------------------------ ----- --------- - --- ----------------- ------------------------------ ----- ------- - --------------------------------- ----- ------ - --- --------------------- -------- - ---- -------- - ---- ----------------------- ---------------------------
上面的代码创建了一个 PIXI.js 应用程序，宽度和高度均为 512 像素，并将背景颜色设置为 #333333。接着创建了一个容器，添加了一个图像，位于中心位置并引用了一张名为 image.jpg 的图片。
应用径向模糊效果
照片有一个很好的径向模糊效果，非常适合用在描绘唯美情感的文件上面。接下来我们就要使用 @pixi/filter-radial-blur 这个 npm 包应用它的效果。
-- -------------------- ---- ------- ------ - ---------------- - ---- --------------------------- ----- ------ - --- ------------------ ------ --- ----- -- ------- ----- ----- ------- --- --- -------------- - ---------
上面的代码中我们引入了 RadialBlurFilter 类，它是 @pixi/filter-radial-blur 包的核心组件。接着新建了一个 filter 对象，并设置四个参数。
- angle：角度值，表示径向模糊的旋转角度，这里设置 30 度。
- blur：模糊半径，值越大则图片越模糊。这里设置为 7。
- center：中心点，以 x 和 y 的百分比表示中心位置。默认情况下为 0.5 0.5，这里也设置为中心位置。
- radius：半径大小，以图像的短边为基础，半径以百分比表示。默认情况下为 0.5，这里也设置为半径大小。
最后一行代码将 filter 对象设置成了 sprite 的 filters 属性。在实践中，你可以应用多个 filters 属性，只需将几个 filter 对象放在一个数组中即可。
完整代码
-- -------------------- ---- ------- ------ - ---------------- - ---- --------------------------- ----- --- - --- ------------------ ------ ---- ------- ---- ---------------- -------- --- ------------------------------------ ----- --------- - --- ----------------- ------------------------------ ----- ------- - --------------------------------- ----- ------ - --- --------------------- -------- - ---- -------- - ---- ----------------------- --------------------------- ----- ------ - --- ------------------ ------ --- ----- -- ------- ----- ----- ------- --- --- -------------- - ---------
结论
@pixi/filter-radial-blur 是一个非常简单易用的 npm 包，它可以让你在前端应用中用径向模糊效果提升你应用的用户体验。带着本篇文章所述的知识，你现在可以毫不费力地应用这个 npm 包以创建出更为唯美的图像了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcae5b5cbfe1ea06124f1