前言
随着 Web 技术的不断发展，前端工程师的工作范围也变得越来越广。在前端开发中，处理图片是必不可少的一项任务。而 PixiJS 是一款流行的 WebGL 2D 渲染引擎，可以帮助前端工程师更方便地处理图片。其中，@pixi/filter-adjustment 是 PixiJS 提供的一个 npm 包，可以帮助我们实现图片的调整滤镜效果，本文主要介绍它的使用方法。
安装
@pixi/filter-adjustment 是 PixiJS 的一个 npm 包，它的安装非常简单，只需要在终端中运行以下命令：
npm install @pixi/filter-adjustment
然后，在代码中引入它即可开始使用。
import { AdjustmentFilter } from "@pixi/filter-adjustment";使用方法
创建滤镜
首先，我们需要创建一个调整滤镜实例，可以使用 AdjustmentFilter 构造函数来创建滤镜实例，示例如下：
const adjustmentFilter = new AdjustmentFilter({
gamma: 1.5,
contrast: 1.3,
});上面的代码创建了一个调整滤镜实例，其中 gamma 和 contrast 是我们打算调整的参数。在这个示例中，它们的值分别设为了 1.5 和 1.3，表示对原始图片进行了一些参数调整。
应用滤镜
当我们创建好滤镜实例后，需要将其应用到某个图片上。通常情况下，我们会使用 PixiJS 的 Sprite 对象来显示图片，可以通过 filters 属性将滤镜应用到 Sprite 上。示例如下：
import { Sprite } from "pixi.js";
const image = new Sprite(...); // 创建图片
image.filters = [adjustmentFilter]; // 应用滤镜在上面的示例中，我们创建了一个 Sprite 对象 image，然后将滤镜实例 adjustmentFilter 应用到这个 Sprite 对象上。这样，图片就显示了调整滤镜效果。
修改参数值
有时候，我们需要动态地修改滤镜的参数值，以达到更好的滤镜效果。可以通过修改滤镜实例的属性值来实现，示例如下：
adjustmentFilter.gamma = 1.8; adjustmentFilter.contrast = 1.5;
上面的代码可以修改滤镜实例 adjustmentFilter 的 gamma 和 contrast 属性值，从而达到动态调整滤镜的目的。
示例代码
下面提供一个完整的示例代码，以便读者更好地理解 @pixi/filter-adjustment 的使用方法：
-- -------------------- ---- -------
------ - ------------ ------ - ---- ----------
------ - ---------------- - ---- --------------------------
----- --- - --- -------------
------ ----
------- ----
---
------------------------------------
----- ----- - --------------------------------------------- -- ------
----- ---------------- - --- ------------------
------ ----
--------- ----
---
------------- - ------------------- -- ----
-------------------------- -- ------
-- ---------------
---------------------------------- ------- -- -
-- ----------- --- -------- -
---------------------- - ------------- - --
------------------------- - ------------- - --
-
---在以上示例代码中，我们首先创建了一个 PixiJS 应用实例 app，然后加载了一张图片，创建了一个调整滤镜实例 adjustmentFilter，并应用到了图片上。最后，我们通过监测空格键的按下事件，动态调整了滤镜的参数值。
总结
以上就是 @pixi/filter-adjustment 的使用教程，通过使用它，我们可以更方便地处理图片，并达到想要的效果。当然，@pixi/filter-adjustment 只是 PixiJS 提供的众多 npm 包之一，PixiJS 还有更多丰富的功能等待我们去探索，希望本文可以对读者有所帮助，也希望读者能够善用 PixiJS，为前端开发贡献一份力量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcaddb5cbfe1ea06124d3