大家好，我是前端西瓜哥。

我們做動畫、游戲、編輯器，需要根據(jù)用戶的交互等操作，去實(shí)時(shí)地改變圖形的屬性，比如位置，顏色等信息。今天西瓜哥帶大家來看看在 pixijs 怎么修改圖形的屬性。

因?yàn)?pixijs 的底層維護(hù)了圖形樹，所以我們可以直接修改圖形的屬性，讓 pixijs 重新計(jì)算并渲染出新的畫面。

首先我們先繪制一個(gè)矩形：

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); // 設(shè)置填充色
rect.lineStyle(5, 0xFFFFFF); // 設(shè)置描邊線寬和顏色
rect.drawRect(100, 100, 200, 100); // 參數(shù)分別為 x, y, width, height
// 添加到 stage 下
app.stage.addChild(rect);

可以看到，畫布繪制出了一個(gè)矩形。

需要注意的是，graphics 對象其實(shí)是一個(gè)容器，雖然只裝了一個(gè)矩形，但你可以在它下面繪制更多的內(nèi)容，比如圓形、線條等等。

所以 graphics 的位置默認(rèn)是 (0, 0)，而不是上面繪制矩形時(shí)設(shè)置的 (100, 100)。

圖形位移

rect.x = x;
rect.y = y;

順帶一提，上面的 x 和 y 其實(shí)用了 getter 和 setter 代理了 rect.position 對象。該對象屬于 PIXI.ObservablePoint 類，有不少好用的方法，比如判斷和另一個(gè)點(diǎn)是否相等、求和另一個(gè)點(diǎn)的點(diǎn)積等。

所以還可以這樣寫：

rect.position.set(x, y);

我寫了個(gè) demo，給 app.view 加了個(gè)點(diǎn)擊事件，點(diǎn)擊后修改 x 和 y，效果如下：

圖形旋轉(zhuǎn)

rect.rotation = radian; // 設(shè)置弧度

rotation 使用的值是弧度，學(xué)術(shù)上和很多 API 都是用弧度的，計(jì)算上更方便。

當(dāng)然也可以用角度 angle，但底層也是做了代理：轉(zhuǎn)換成弧度值，然后賦值給 rotation 屬性。

rect.angle = angle; // 設(shè)置角度

然后很重要一點(diǎn)的是旋轉(zhuǎn)中心的設(shè)置。旋轉(zhuǎn)中心默認(rèn)是 (0, 0)。可以通過 pivot 屬性來設(shè)置。

rect.pivot.set(cx, cy);

pivot 這個(gè)屬性比較抽象，它會影響 position 的效果，從表現(xiàn)上，它會將容器下的圖形往 (-cx, -cy) 方向移動，所以你還需要通過 rect.position.set(cx, cy) 將容器移動回原來的位置。

另一種做法是，在繪制矩形的時(shí)候，將將其中心點(diǎn)對上 (0, 0)，就不用設(shè)置 pivot 了。

圖形縮放

用法類似圖形旋轉(zhuǎn)。

rect.scale.set(sx, sy)；

圖形斜切

rect.skew.set(skewX, skewY);

圖形內(nèi)容更新

前面這些都是物理位置和變形相關(guān)的，只需要在原來繪制出來的像素上做一些線性運(yùn)算的到新的位置就可以了。

但如果你要做改變圖形的填充色、線寬等操作時(shí)，就不能簡單地設(shè)置一些屬性就可以了，而是需要先用 clear 方法清空內(nèi)容，然后重新定義形狀。

rect.clear();
// 然后像第一次繪制一樣，繪制一個(gè)矩形出來
// 將其中一些變量設(shè)置為新的值就可以了
// ...

下面是修改矩形線寬的例子。其他繪制參數(shù)比如填充色照舊，但線寬設(shè)置了新值。

const rect = new PIXI.Graphics();
rect.beginFill(0xFF0044);
rect.lineStyle(5, 0xFFFFFF); // 設(shè)置描邊線寬和顏色
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); 
}

效果：

結(jié)尾

只是改變 graphics 的物理信息，或者說是變形（transform），只需要直接修改 position、rotation 屬性即可。但如果是內(nèi)容的改變，就要用 clear 清空內(nèi)容，然后重新繪制了。