容器

具容器類別，提供一個簡單的顯示物件，其功能正如其名所示，將一組子物件收集在一起。但是除了將物件分組以外，容器還有幾個用途需要認識。

常用屬性

在 PixiJS 中配置和動畫化內容時，您最常使用的屬性是由容器類別提供的

屬性	說明
位置	X 和 Y 位置以像素為單位，並變更物件相對於其父系物件的位置，也可直接作為 object.x / object.y 使用
旋轉	旋轉以弧度指定，並順時針旋轉一個物件（0.0 - 2 * Math.PI）
角度	角度是旋轉的別名，其以度而非弧度指定（0.0 - 360.0）
支點	物件旋轉的中心點，以像素為單位，也設定子物件的起點
Alpha	不透明度，範圍從 0.0（完全透明）到 1.0（完全不透明），由其子系繼承
縮放	縮放以百分比指定，其中 1.0 為 100% 或實際大小，並可針對 X 和 Y 軸個別設定
傾斜	傾斜以類似於 CSS 傾斜（）函數的方式，將物件在 X 和 Y 中轉換，並以弧度指定
可見	物件是否可見，以布林值表示，會避免更新和呈現物件和其子系
可呈現	物件是否應該被呈現，當為「否」時，物件仍會更新，但不會被呈現，且不會影響其子系

作為群組的容器

幾乎每種類型的顯示物件都是源自於容器！這表示在許多情況下，您可以為想要呈現的物件建立父子關係層級結構。

但是，最好不要這樣做。獨立的 Container 物件渲染成本相當低，擁有適當階層結構的 Container 物件且每個均包含一個或多個可渲染的物件，會在渲染順序上提供靈活度。這還能使您的程式碼對未來有所保障，因為當您需要將新物件加入樹狀分支時，動畫邏輯不需要變更，只要將新物件拖放到適當的 Container 中，程式碼不變更就能移動 Container。

這是 Container 的主要用途，做為階層中可渲染物件的群組。

查看 容器範例程式碼。

遮罩

Container 物件的另一個常見用途是作為遮罩內容的載體。「遮罩」是一種技術，場景圖的某些部分僅在特定區域內才可見。

想像一下彈出式視窗。它的框架是以一個或多個精靈製作而成的，然後有一個可捲動的內容區域，將框架外的內容隱藏起來。使用 Container 再加上遮罩，就能輕鬆實作可捲動區域。加入 Container，將其 mask 屬性設為帶矩形圖形的 Graphics 物件，並將文字、圖像等內容加入這個遮罩 Container 的子項中，以供顯示。任何超出矩形遮罩的內容都不會被繪製。可以視需要移動 Container 的內容，以進行捲動。

// Create the application helper and add its render target to the page
let app = new Application({ width: 640, height: 360 });
document.body.appendChild(app.view);

// Create window frame
let frame = new Graphics({
  x:320 - 104,
  y:180 - 104
})
.rect(0, 0, 208, 208)
.fill(0x666666)
.stroke({ color: 0xffffff, width: 4, alignment: 0 })

app.stage.addChild(frame);

// Create a graphics object to define our mask
let mask = new Graphics()
// Add the rectangular area to show
 .rect(0,0,200,200)
 .fill(0xffffff);

// Add container that will hold our masked content
let maskContainer = new Container();
// Set the mask to use our graphics object from above
maskContainer.mask = mask;
// Add the mask as a child, so that the mask is positioned relative to its parent
maskContainer.addChild(mask);
// Offset by the window's frame width
maskContainer.position.set(4,4);
// And add the container to the window!
frame.addChild(maskContainer);

// Create contents for the masked container
let text = new Text({
  text:'This text will scroll up and be masked, so you can see how masking works.  Lorem ipsum and all that.\n\n' +
  'You can put anything in the container and it will be masked!',
  style:{
    fontSize: 24,
    fill: 0x1010ff,
    wordWrap: true,
    wordWrapWidth: 180
  },
  x:10
});

maskContainer.addChild(text);

// Add a ticker callback to scroll the text up and down
let elapsed = 0.0;
app.ticker.add((ticker) => {
  // Update the text's y coordinate to scroll it
  elapsed += ticker.deltaTime;
  text.y = 10 + -100.0 + Math.cos(elapsed/50.0) * 100.0;
});

PixiJS 支援兩種遮罩

使用 Graphics 物件，使用任意形狀製作遮罩 - 強大，但不支援反鋸齒

Sprite：使用 Sprite 的 alpha 通道作為遮罩，提供反鋸齒邊緣 - 帆布渲染器不支援

篩選

Container 物件的另一個常見用途是作為篩選內容的載體。篩選是一種進階的 WebGL/WebGPU 獨有功能，PixiJS 因此可以在每個畫素上執行模糊化和位移等效果。在 Container 上設定篩選後，Container 所包含的螢幕區域會在 Container 內容渲染後，接受篩選器的處理。

以下是 PixiJS 中預設可用的篩選器清單。不過，有一個社群資源庫包含 更多篩選器。

篩選器	說明
AlphaFilter	與設定 alpha 屬性類似，但取代個別套用到子項目，而是將 Container 壓平。
BlurFilter	套用模糊效果
ColorMatrixFilter	色彩矩陣是套用較複雜色調或色彩轉換（例如懷舊色調）的彈性方式。
DisplacementFilter	位移貼圖會產生視覺上的畫素偏移，例如產生波浪水面的效果。
NoiseFilter	產生隨機雜訊（例如顆粒效果）。

基本上，我們提供的每個現成的 Filter 都以 glsl（適用於 WebGL）和 wgsl（適用於 WebGPU）撰寫。這表示所有濾鏡都應該適用於兩個渲染器。

重要說明：必須適度使用篩選器。如果在場景中過度使用，可能會降低效能並增加記憶體用量。