info_outline
# CookPixiUI
這是一個主要用於 Code.Gamelet Pixi v5 的 UI 模組。
## 元件介紹
### ScrollView（可滑動容器）
ScrollView 是一個可捲動的顯示容器，適用於清單、選單、物品欄等場景。
支援以下功能：
- 指定顯示區域的寬度與高度
- 垂直或水平滑動方向（可選）
- 拖曳滑動內容（支援滑鼠與觸控）
- 慣性滾動（速度遞減）
- 自動遮罩超出區域的內容
- 可動態加入或清除內容項目
#### `ScrollView.addContent(...child: PIXI.DisplayObject[]): void;`
添加內容到滑動容器中。
- `child` — 要加入的顯示物件（例如卡片、格子、圖片等）
#### `ScrollView.clearContent(): void;`
清除內容容器內的所有子物件。
#### 使用範例
```ts
// 請先確保該檔案頂層有 import（引入）ScrollView class（類別）
import ScrollView = CG.CookPixiUI.Components.ScrollView;
```
- 建立垂直滑動區域
```ts
// 建立一個 300 x (畫面高度 - 100) 的垂直滑動區域
const scrollView_V = new ScrollView(300, CG.Base.pixi.stageHeight - 100, 'vertical');
scrollView_V.position.set(50, 50);
CG.Base.pixi.root.addChild(scrollView_V);
// 單元格尺寸設定（寬 300、高 50）
const rowCellSize = { width: 300, height: 50 };
// 加入 20 個垂直排列的矩形內容
for (let i = 0; i < 20; i++) {
const item = getRowItemCell(i);
scrollView_V.addContent(item);
}
/**
* 建立一個垂直列表用的彩色矩形區塊（含文字）
* @param index 第幾個項目（用來標示文字與計算 Y 座標）
*/
function getRowItemCell(index: number): PIXI.Graphics {
const item = new PIXI.Graphics()
.beginFill(0xFFFFFF * Math.random()) // 隨機顏色
.drawRect(0, 0, rowCellSize.width, rowCellSize.height)
.endFill();
// 設定位置（x 固定，y 根據索引排列）
item.position.set(10, index * (rowCellSize.height + 10));
// 建立文字物件並加入 item 內
const label = new PIXI.Text(`Item ${index + 1}`, {
fontSize: 20,
fill: 0xFFFFFF,
stroke: 0,
strokeThickness: 4,
lineJoin: 'round',
} as PIXI.TextStyle);
label.anchor.set(0, 0.5);
label.position.set(10, 25);
item.addChild(label);
return item;
}
```
- 建立水平滑動區域
```ts
// 建立一個 (畫面寬度 - 450) x 150 的水平滑動區域
const scrollView_H = new ScrollView(CG.Base.pixi.stageWidth - 450, 150, 'horizontal');
scrollView_H.position.set(400, CG.Base.pixi.stageHeight * 0.5 - 75);
CG.Base.pixi.root.addChild(scrollView_H);
// 單元格尺寸設定（寬 80、高 100）
const colCellSize = { width: 80, height: 100 };
// 加入 15 個水平排列的彩色方塊
for (let i = 0; i < 15; i++) {
const item = getColItemCell(i);
scrollView_H.addContent(item);
}
/**
* 建立一個水平列表用的彩色方塊（含文字）
* @param index 第幾個項目（用來標示文字與計算 X 座標）
*/
function getColItemCell(index: number): PIXI.Graphics {
const item = new PIXI.Graphics()
.beginFill(0x66ccff + (index * 0x111111)) // 每個項目不同顏色
.drawRoundedRect(0, 0, colCellSize.width, colCellSize.height, 12)
.endFill();
// 設定位置（y 固定，x 根據索引排列）
item.position.set(index * (colCellSize.width + 20), 25);
// 建立文字物件並加入 item 內
const label = new PIXI.Text(`${index + 1}`, {
fontSize: 25,
fill: 0xFFFFFF,
stroke: 0,
strokeThickness: 5,
lineJoin: 'round',
} as PIXI.TextStyle);
label.anchor.set(0.5);
label.position.set(40, 50);
item.addChild(label);
return item;
}
```
## Authors
**[cook1470](/profile/cook1470)**
Haskasu 
pufferfish_01 
LoliPrincessNina 
cook1470 
module_cook1470 
SinB.JN 
dillenhub