一起学 pixijs（2）：修改图形属性

yuneu 软件应用 2023-02-21 184 0

各人好，我是前端西瓜哥。

我们做动画、游戏、编纂器，需要按照用户的交互等操做，去实时地改动图形的属性，好比位置，颜色等信息。今天西瓜哥带各人来看看在 pixijs 怎么修改图形的属性。

因为 pixijs 的底层维护了图形树，所以我们能够间接修改图形的属性，让 pixijs 从头计算并衬着出新的画面。

起首我们先绘造一个矩形：

import * as PIXI from 'pixi.js'const app = new PIXI.Application({ width: 640, height: 360 });document.body.apPEnDChild(app.view);const rect = new PIXI.Graphics();rect.beginFill(0xFF0044); // 设置填充色rect.lineStyle(5, 0xFFFFFF); // 设置描边线宽和颜色rect.drawRect(100, 100, 200, 100); // 参数别离为 x, y, width, height// 添加到 stage 下app.stage.addChild(rect);

能够看到，画布绘造出了一个矩形。

需要留意的是，graphics 对象其实是一个容器，固然只拆了一个矩形，但你能够在它下面绘造更多的内容，好比圆形、线条等等。

所以 graphics 的位置默认是 (0, 0)，而不是上面绘造矩形时设置的 (100, 100)。

图形位移rect.x = x;rect.y = y;

顺带一提，上面的 x 和 y 其适用了 getter 和 setter 代办署理了 rect.position 对象。该对象属于 PIXI.ObservablePoint 类，有很多好用的办法，好比判断和另一个点能否相等、乞降另一个点的点积等。

所以还能够如许写：

rect.position.set(x, y);

我写了个 demo，给 app.view 加了个点击事务，点击后修改 x 和 y，效果如下：

图形扭转rect.rotation = radian; // 设置弧度

rotation 利用的值是弧度，学术上和良多 API 都是用弧度的，计算上更便利。

当然也能够用角度 angle，但底层也是做了代办署理：转换成弧度值，然后赋值给 rotation 属性。

rect.angle = angle; // 设置角度

然后很重要一点的是扭转中心的设置。扭转中心默认是 (0, 0)。能够通过 pivot 属性来设置。

rect.pivot.set(cx, cy);

pivot 那个属性比力笼统，它会影响 position 的效果，从表示上，它会将容器下的图形往 (-cx, -cy) 标的目的挪动，所以你还需要通过 rect.position.set(cx, cy) 将容器挪动回本来的位置。

另一种做法是，在绘造矩形的时候，将将此中心点对上 (0, 0)，就不消设置 pivot 了。

图形缩放

用法类似图形扭转。

rect.scale.set(sx, sy)；图形斜切rect.skew.set(skewX, skewY);图形内容更新

前面那些都是物理位置和变形相关的，只需要在本来绘造出来的像素上做一些线性运算的到新的位置就能够了。

但若是你要做改动图形的填充色、线宽等操做时，就不克不及简单地设置一些属性就能够了，而是需要先用 clear 办法清空内容，然后从头定义外形。

rect.clear();// 然后像第一次绘造一样，绘造一个矩形出来// 将此中一些变量设置为新的值就能够了// ...

下面是修改矩形线宽的例子。其他绘造参数好比填充色照旧，但线宽设置了新值。

const rect = new PIXI.Graphics();rect.beginFill(0xFF0044);rect.lineStyle(5, 0xFFFFFF); // 设置描边线宽和颜色rect.drawRect(100, 100, 200, 100);app.view.onclick = () => { // rect.skew.set(1.3, 1) // rect.width = 100; rect.clear(); rect.beginFill(0xFF0044); rect.lineStyle({ width: 10, color: 0xFFFFFF }); rect.drawRect(100, 100, 200, 100); }

效果：