lyb-pixi-js 1.12.80 → 1.12.82

package/Components/Base/LibPixiBit.d.ts

@@ -0,0 +1,5 @@
+import { BitmapText } from "pixi.js";
+/** @description 自定义位图文本 */
+export declare class LibPixiBit extends BitmapText {
+    constructor(fontName: string, text: string | number, fontSize: number);
+}

package/Components/Base/LibPixiBit.js

@@ -0,0 +1,10 @@
+import { BitmapText } from "pixi.js";
+/** @description 自定义位图文本 */
+export class LibPixiBit extends BitmapText {
+    constructor(fontName, text, fontSize) {
+        super(text.toString(), {
+            fontName,
+            fontSize,
+        });
+    }
+}

package/Components/Custom/LibPixiTableV2.d.ts

@@ -0,0 +1,25 @@
+import { Container, Text } from "pixi.js";
+export interface LibPixiTableCell {
+    text: Text;
+    bgColor?: string;
+}
+export interface LibPixiTableParams {
+    /** 表格数据 */
+    data: (number | string | LibPixiTableCell)[][];
+    /** 是否需要表格外框 */
+    outsideBorder?: boolean;
+    /** 单元格最小宽度 */
+    cellWidth?: number;
+    /** 单元格最小高度 */
+    cellHeight?: number;
+    /** 格子内部内边距 */
+    cellPadding?: number;
+    /** 线条厚度 */
+    lineWidth?: number;
+    /** 线条颜色 */
+    lineColor?: string;
+}
+/** @description 表格（文本样式完全外部控制） */
+export declare class LibPixiTableV2 extends Container {
+    constructor(params: LibPixiTableParams);
+}

package/Components/Custom/LibPixiTableV2.js

@@ -0,0 +1,92 @@
+import { Container, Graphics, Text } from "pixi.js";
+/** @description 表格（文本样式完全外部控制） */
+export class LibPixiTableV2 extends Container {
+    constructor(params) {
+        var _a;
+        super();
+        const { data, outsideBorder = true, cellWidth = 80, cellHeight = 30, cellPadding = 6, lineWidth = 1, lineColor = "#cccccc", } = params;
+        if (!data || !data.length)
+            return;
+        // 计算列数
+        const cols = data.reduce((max, row) => Math.max(max, row.length), 0);
+        // 计算列宽/行高
+        const colWidths = Array(cols).fill(cellWidth);
+        const rowHeights = Array(data.length).fill(cellHeight);
+        for (let r = 0; r < data.length; r += 1) {
+            for (let c = 0; c < cols; c += 1) {
+                const raw = (_a = (data[r] && data[r][c])) !== null && _a !== void 0 ? _a : "";
+                const txt = typeof raw === "object" && "text" in raw ? raw.text : new Text(String(raw)); // 无样式处理
+                const w = txt.width + cellPadding * 2;
+                const h = txt.height + cellPadding * 2;
+                if (w > colWidths[c])
+                    colWidths[c] = w;
+                if (h > rowHeights[r])
+                    rowHeights[r] = h;
+            }
+        }
+        // 坐标
+        const colX = [];
+        let accX = 0;
+        for (let c = 0; c < cols; c += 1) {
+            colX.push(accX);
+            accX += colWidths[c];
+        }
+        const rowY = [];
+        let accY = 0;
+        for (let r = 0; r < rowHeights.length; r += 1) {
+            rowY.push(accY);
+            accY += rowHeights[r];
+        }
+        const totalW = accX;
+        const totalH = accY;
+        // 背景绘制
+        for (let r = 0; r < data.length; r += 1) {
+            for (let c = 0; c < cols; c += 1) {
+                const raw = data[r][c];
+                const bgColor = typeof raw === "object" && "bgColor" in raw ? raw.bgColor : undefined;
+                if (bgColor) {
+                    const bg = new Graphics();
+                    bg.beginFill(parseInt(bgColor.replace("#", ""), 16));
+                    bg.drawRect(colX[c], rowY[r], colWidths[c], rowHeights[r]);
+                    bg.endFill();
+                    this.addChild(bg);
+                }
+            }
+        }
+        // 网格线
+        const g = new Graphics();
+        g.lineStyle(lineWidth, parseInt(lineColor.replace("#", ""), 16));
+        if (outsideBorder) {
+            g.drawRect(0, 0, totalW, totalH);
+        }
+        let xPos = 0;
+        for (let c = 1; c < cols; c += 1) {
+            xPos += colWidths[c - 1];
+            g.moveTo(xPos + lineWidth / 2, 0);
+            g.lineTo(xPos + lineWidth / 2, totalH);
+        }
+        let yPos = 0;
+        for (let r = 1; r < rowHeights.length; r += 1) {
+            yPos += rowHeights[r - 1];
+            g.moveTo(0, yPos + lineWidth / 2);
+            g.lineTo(totalW, yPos + lineWidth / 2);
+        }
+        this.addChild(g);
+        // 文本
+        for (let r = 0; r < data.length; r += 1) {
+            for (let c = 0; c < cols; c += 1) {
+                const raw = data[r][c];
+                const txt = typeof raw === "object" && "text" in raw ? raw.text : new Text(String(raw));
+                const cx = colX[c];
+                const cy = rowY[r];
+                txt.x = Math.round(cx + (colWidths[c] - txt.width) / 2);
+                txt.y = Math.round(cy + (rowHeights[r] - txt.height) / 2);
+                this.addChild(txt);
+            }
+        }
+        // @ts-ignore
+        this.width = totalW;
+        // @ts-ignore
+        this.height = totalH;
+    }
+}

package/README.md

@@ -86,6 +86,8 @@ app.stage.addChild(box);
 
 \- [LibPixiHtmlText-富文本](#LibPixiHtmlText-富文本)
 
+\- [LibPixiBit-位图简化使用](#LibPixiBit-位图简化使用)
+
 \- [LibPixiBitText-位图](#LibPixiBitText-位图)
 
 \- [LibPixiContainer-容器](#LibPixiContainer-容器)
@@ -136,7 +138,9 @@ app.stage.addChild(box);
 
 \- [LibPixiSlide-滑动页](#LibPixiSlide-滑动页)
 
-\- [LibPixiTable-数字表格](#LibPixiTable-数字表格)
+\- [LibPixiTable-简易表格](#LibPixiTable-简易表格)
+
+\- [LibPixiTableV2-自定义表格](#LibPixiTableV2-自定义表格)
 
 \- [LibPixiLabelValue-标签值](#LibPixiLabelValue-标签值)
 
@@ -280,6 +284,8 @@ interface LibPixiHtmlTextParams {
 }
 ```
 
+### LibPixiBit-位图简化使用
+
 ### LibPixiBitText-位图
 
 > 自定义位图文本
@@ -836,9 +842,9 @@ const three = new LibPixiSlide({
 });
 ```
 
-### LibPixiTable-数字表格
+### LibPixiTable-简易表格
 
-> 绘制表格并填充数字
+> 绘制表格并填充文本
 
 ```ts
 import { LibPixiTable } from "./path/to/LibPixiTable";
@@ -866,6 +872,88 @@ const table = new LibPixiTable({
 stage.addChild(table);
 ```
 
+### LibPixiTable-自定义表格
+
+> 表格内部样式和文本全由外部提前设置好
+
+```ts
+    const fontSize = 28;
+    const data = [
+      {
+        text: new LibPixiText({
+          text: "27/11/2025\n14:16:27",
+          fontColor: "#C68251",
+          fontSize,
+          align: "center",
+        }),
+        bgColor: "#F6D7B4",
+      },
+      {
+        text: new LibPixiText({
+          text: "cutepanda",
+          fontColor: "#C68251",
+          fontSize,
+          align: "center",
+        }),
+        bgColor: "#F6D7B4",
+      },
+    ];
+    const scrollContent = new LibPixiTable({
+      lineWidth: 3,
+      cellWidth: 248,
+      cellHeight: 85,
+      cellPadding: 10,
+      lineColor: "#B96D39",
+      data: [
+        [
+          {
+            text: new LibPixiText({
+              text: "Date",
+              fontColor: "#B74715",
+              fontSize,
+              align: "center",
+            }),
+            bgColor: "#F5BC91",
+          },
+          {
+            text: new LibPixiText({
+              text: "Event",
+              fontColor: "#B74715",
+              fontSize,
+              align: "center",
+            }),
+            bgColor: "#F5BC91",
+          },
+        ],
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+        data,
+      ],
+    });
+    scrollContent.x = 50;
+```
+
 ### LibPixiLabelValue-标签值
 
 > 适用于左边图标右边动态数值锚点在容器正中间的场景

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lyb-pixi-js",
-  "version": "1.12.80",
+  "version": "1.12.82",
   "description": "自用Pixi.JS方法库",
   "license": "ISC",
   "exports": {