前言
在 Web 开发中，有时我们需要使用图片进行展示，但有些时候，我们需要对图片进行一些特殊的变换，比如旋转、扭曲、拉伸等等，这时候，@pixi/filter-twist 包就派上了用场，它是 pixi.js 中的滤镜，可以对图片进行扭曲等变化。
安装
使用 npm 安装 @pixi/filter-twist ：
npm install @pixi/filter-twist --save
使用
需要先实例化一个 Filter 类的对象，然后将其添加到渲染器中，最后就可以对图片进行扭曲等变换了。
-- -------------------- ---- ------- ------ - ----------- - ---- ---------- ------ - ----------- - ---- --------------------- ----- --- - --- -------------- ----- ----- - --- ------------------------------------------------------------------------------------------ ----- ------ - --- -------------- ------------- - --------- --------------------------
在上面的代码中，我们创建了一个 TwistFilter 的对象 filter ，并将其添加到了 image.filters 中，从而实现了对图片的扭曲而不是对整个场景或者容器进行滤镜操作。
如何使用 TwistFilter 进行扭曲呢？在 Filter 类下，有许多参数可以进行设置：
const filter = new TwistFilter({
angle: Math.PI, //旋转角度
radius: 200, //扭曲半径
offset: { x: 0.5, y: 0.5 }, //扭曲中心点位置
radiusScale: 1, //扭曲程度
});下面分别详细介绍一下参数的作用：
angle
该参数表示扭曲的角度，可以设置为弧度或者度数，如果设置为 Math.PI ，那么图片就会被扭曲成一个螺旋形状。
radius
该参数表示扭曲的半径，它能决定扭曲的程度，半径越大，扭曲程度越深。
offset
该参数表示扭曲的中心点位置，这个中心点通常设置为图片的中心点位置，使用一个包含 x 和 y 坐标的对象进行设置。
radiusScale
该参数表示扭曲的程度，可将其设置为小于1的数，当其为0时，图片将不会被扭曲。
示例
下面是一个简单的示例代码，演示了如何使用 @pixi/filter-twist 包实现图片的扭曲效果。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ------ ------------
---- -- ------- - ---
------- -----------------------------------------------------------
---- -- ------------------ - ---
------- -----------------------------------------------------------------------
-------
------
--------
----- --- - --- ------------------
---------------- ---------
------ ----
------- ---
---
------------------------------------
------------------------------- -------------------------------------------------------------------------------------- ---------- -- -
----- ----- - --- --------------------------------------
----- ------ - --- ---------------------------
----------------------
------- - ---------------- - --
------- - ----------------- - --
------------- - ---------
--------------------------
-------------------- -- -
------------ -- -----
---
---
---------
-------
-------总结
@pixi/filter-twist 包为开发者提供了一个简单而强大的工具，可以轻松实现对图片的扭曲、旋转等操作，当然，它也是直接使用 pixi.js 中的滤镜的一个 npm 包的例子，学习这一包的使用能够帮助我们更深入、更广泛地掌握 pixi.js 库的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcae8b5cbfe1ea06124fc