lyb-pixi-js 1.12.18 → 1.12.20

package/Components/Custom/LibPixiArrangeLinearV2.d.ts

@@ -0,0 +1,25 @@
+import { Container } from "pixi.js";
+export interface GridLayoutParams {
+    gap?: number | number[];
+    direction?: "x" | "y";
+    colNum?: number;
+    elementList?: any[];
+    anchorX?: number;
+    anchorY?: number;
+}
+/** @description 线性排列 */
+export declare class LibPixiArrangeLinearV2<T extends Container> extends Container {
+    /** 参数 */
+    private _params;
+    /** 元素列表 */
+    private _elementList;
+    constructor(params?: GridLayoutParams);
+    /** @description 追加元素 */
+    push(element: T): void;
+    /** @description 布局 */
+    layout(): void;
+    /** @description 获取列表元素 */
+    getList(): T[];
+    /** @description 销毁列表元素 */
+    destroyList(): void;
+}

package/Components/Custom/LibPixiArrangeLinearV2.js

@@ -0,0 +1,80 @@
+import { Container } from "pixi.js";
+/** @description 线性排列 */
+export class LibPixiArrangeLinearV2 extends Container {
+    constructor(params) {
+        super();
+        /** 元素列表 */
+        this._elementList = [];
+        this._params = params || {};
+        this._elementList = this._params.elementList || [];
+    }
+    /** @description 追加元素 */
+    push(element) {
+        this.addChild(element);
+        this._elementList.push(element);
+    }
+    /** @description 布局 */
+    layout() {
+        const { colNum = this._elementList.length, gap = 10, direction = "x", anchorX = 0, anchorY = 0, } = this._params;
+        let lastRowMax = 0; // 当前行（或列）的最大高度（或宽度），用于多行/多列换行时计算偏移
+        let rowOffset = 0; // 累计偏移量，控制换行后的整体偏移位置
+        this._elementList.forEach((item, index) => {
+            var _a, _b;
+            const row = Math.floor(index / colNum); // 当前行号
+            const col = index % colNum; // 当前列号
+            if (direction === "x") {
+                //间隔
+                const gapValue = Array.isArray(gap) ? (_a = gap[index - 1]) !== null && _a !== void 0 ? _a : 0 : gap;
+                //在每行第一列重置列偏移量
+                if (col === 0 && row > 0) {
+                    rowOffset += lastRowMax + gapValue;
+                    lastRowMax = 0;
+                }
+                // 横向位置 = 前一个元素的右侧 + 间隔；首列则从 0 开始
+                item.x =
+                    col === 0
+                        ? 0
+                        : this._elementList[index - 1].x +
+                            this._elementList[index - 1].width +
+                            gapValue;
+                // 纵向位置 = 当前累计的行偏移
+                rowOffset && (item.y = rowOffset);
+                // 更新当前行的最大高度
+                lastRowMax = Math.max(lastRowMax, item.height);
+            }
+            else {
+                //间隔
+                const gapValue = Array.isArray(gap) ? (_b = gap[index - 1]) !== null && _b !== void 0 ? _b : 0 : gap;
+                //在每列第一行重置行偏移
+                if (col === 0 && row > 0) {
+                    rowOffset += lastRowMax + gapValue;
+                    lastRowMax = 0;
+                }
+                // 纵向位置 = 首列则从 0 开始，其余从前一个元素的y坐标 + 高度 + 间隔；
+                item.y =
+                    col === 0
+                        ? 0
+                        : this._elementList[index - 1].y +
+                            this._elementList[index - 1].height +
+                            gapValue;
+                // 横向位置 = 当前累计的列偏移
+                rowOffset && (item.x = rowOffset);
+                // 更新当前列的最大宽度
+                lastRowMax = Math.max(lastRowMax, item.width);
+            }
+        });
+        const bounds = this.getLocalBounds();
+        this.pivot.set(bounds.x + bounds.width * anchorX, bounds.y + bounds.height * anchorY);
+    }
+    /** @description 获取列表元素 */
+    getList() {
+        return this._elementList;
+    }
+    /** @description 销毁列表元素 */
+    destroyList() {
+        this._elementList.forEach((item) => {
+            item.destroy();
+        });
+        this._elementList = [];
+    }
+}

package/Components/Custom/LibPixiScrollContainerY.d.ts

@@ -1,4 +1,4 @@
-import { Container } from "pixi.js";
+import { Container, Texture } from "pixi.js";
 import { LibPixiContainer } from "../Base/LibPixiContainer";
 export interface LibPixiScrollContainerYParams {
     /** 宽度 */
@@ -7,10 +7,6 @@ export interface LibPixiScrollContainerYParams {
     height: number;
     /** 滚动内容 */
     scrollContent: Container;
-    /** 顶部边距 */
-    topMargin?: number;
-    /** 底部边距 */
-    bottomMargin?: number;
     /** 背景色，用于定位 */
     bgColor?: string;
     /** 是否需要滚动条 */
@@ -21,6 +17,12 @@ export interface LibPixiScrollContainerYParams {
     scrollbarWidth?: number;
     /** 滚动条颜色 */
     scrollbarColor?: string;
+    /** 自定义遮罩贴图 */
+    maskTexture?: Texture;
+    /** 遮罩X坐标 */
+    maskX?: number;
+    /** 遮罩Y坐标 */
+    maskY?: number;
     /** 滚动触发 */
     onScroll?: (y: number) => void;
 }

package/Components/Custom/LibPixiScrollContainerY.js

@@ -8,7 +8,7 @@ import { LibPixiRectangle } from "../Base/LibPixiRectangle";
  */
 export class LibPixiScrollContainerY extends LibPixiContainer {
     constructor(params) {
-        const { width, height, scrollbar = false, scrollContent, scrollbarRgiht = 0, scrollbarWidth = 10, scrollbarColor = "#ffffff", onScroll, bgColor, } = params;
+        const { width, height, scrollbar = false, scrollContent, scrollbarRgiht = 0, scrollbarWidth = 10, scrollbarColor = "#ffffff", onScroll, bgColor, maskTexture, maskX = 0, maskY = 0, } = params;
         super(width, height, bgColor);
         /** 开始位置 */
         this._startY = 0;
@@ -36,10 +36,20 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
         this._content = new Container();
         this.addChild(this._content);
         this._content.addChild(this._scrollContent);
-        // 创建遮罩
-        this._maskGraphics = new LibPixiRectangle(width, height, "#000");
-        this.addChild(this._maskGraphics);
-        this.mask = this._maskGraphics;
+        //自定义遮罩
+        if (maskTexture) {
+            this._maskGraphics = new Sprite(maskTexture);
+            this.addChild(this._maskGraphics);
+            this._maskGraphics.width = width;
+            this._maskGraphics.height = height;
+            this._maskGraphics.position.set(maskX, maskY);
+            this.mask = this._maskGraphics;
+        }
+        else {
+            this._maskGraphics = new LibPixiRectangle(width, height, "#000");
+            this.addChild(this._maskGraphics);
+            this.mask = this._maskGraphics;
+        }
         // 创建滚动条
         this._scrollbar = new LibPixiRectangle(scrollbarWidth, height, this._scrollbarColor);
         this._scrollbar.x = width - (scrollbarRgiht || scrollbarWidth);
@@ -104,11 +114,8 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
      * @param height 高度
      */
     setDimensions(width, height) {
-        // 更新遮罩尺寸
-        this._maskGraphics.clear();
-        this._maskGraphics.beginFill(0x000000);
-        this._maskGraphics.drawRect(0, 0, width, height);
-        this._maskGraphics.endFill();
+        this._maskGraphics.width = width;
+        this._maskGraphics.height = height;
         this.setSize(width, height);
         this._scrollbar.x = width - (this._scrollbarRgiht || this._scrollbarWidth);
     }

package/Components/Custom/LibPixiTextGroup.d.ts

@@ -0,0 +1,20 @@
+import { Container, type ITextStyle } from "pixi.js";
+interface TextItem {
+    text: string;
+    style?: Partial<ITextStyle>;
+}
+interface TextGroupOptions {
+    items: TextItem[];
+    defaultStyle?: Partial<ITextStyle>;
+    wordWrapWidth?: number;
+    paddingX?: number;
+    paddingY?: number;
+    align?: "left" | "center" | "right";
+    anchorX?: number;
+    anchorY?: number;
+}
+/** @description 文本组换行 */
+export declare class LibPixiTextGroupWrap extends Container {
+    constructor({ items, defaultStyle, wordWrapWidth, paddingX, paddingY, align, anchorX, anchorY, }: TextGroupOptions);
+}
+export {};

package/Components/Custom/LibPixiTextGroup.js

@@ -0,0 +1,50 @@
+import { Container, Text } from "pixi.js";
+/** @description 文本组换行 */
+export class LibPixiTextGroupWrap extends Container {
+    constructor({ items, defaultStyle = {}, wordWrapWidth, paddingX = 0, paddingY = 0, align = "left", anchorX = 0, anchorY = 0, }) {
+        super();
+        if (!items.length)
+            return;
+        const lineGroups = [];
+        let currentLine = [];
+        let x = 0;
+        // 分行
+        for (const { text, style = {} } of items) {
+            const instance = new Text(text, Object.assign(Object.assign({}, defaultStyle), style));
+            const w = instance.width;
+            if (wordWrapWidth && x + w > wordWrapWidth && x > 0) {
+                lineGroups.push(currentLine);
+                currentLine = [];
+                x = 0;
+            }
+            currentLine.push(instance);
+            x += w + paddingX;
+        }
+        if (currentLine.length)
+            lineGroups.push(currentLine);
+        // 布局每行
+        let y = 0;
+        for (const line of lineGroups) {
+            const totalWidth = line.reduce((sum, i) => sum + i.width + paddingX, -paddingX);
+            let offsetX = 0;
+            if (align === "center" && wordWrapWidth)
+                offsetX = (wordWrapWidth - totalWidth) / 2;
+            else if (align === "right" && wordWrapWidth)
+                offsetX = wordWrapWidth - totalWidth;
+            let currentX = offsetX;
+            let maxHeight = 0;
+            for (const item of line) {
+                item.x = currentX;
+                item.y = y;
+                this.addChild(item);
+                currentX += item.width + paddingX;
+                if (item.height > maxHeight)
+                    maxHeight = item.height;
+            }
+            y += maxHeight + paddingY;
+        }
+        // 根据 anchor 调整整体偏移
+        const bounds = this.getLocalBounds();
+        this.pivot.set(bounds.x + bounds.width * anchorX, bounds.y + bounds.height * anchorY);
+    }
+}

package/Components/Custom/LibPixiTextGroupWrap.d.ts

@@ -0,0 +1,20 @@
+import { Container, type ITextStyle } from "pixi.js";
+interface TextItem {
+    text: string;
+    style?: Partial<ITextStyle>;
+}
+interface TextGroupOptions {
+    items: TextItem[];
+    defaultStyle?: Partial<ITextStyle>;
+    wordWrapWidth?: number;
+    paddingX?: number;
+    paddingY?: number;
+    align?: "left" | "center" | "right";
+    anchorX?: number;
+    anchorY?: number;
+}
+/** @description 文本组换行 */
+export declare class LibPixiTextGroupWrap extends Container {
+    constructor({ items, defaultStyle, wordWrapWidth, paddingX, paddingY, align, anchorX, anchorY, }: TextGroupOptions);
+}
+export {};

package/Components/Custom/LibPixiTextGroupWrap.js

@@ -0,0 +1,50 @@
+import { Container, Text } from "pixi.js";
+/** @description 文本组换行 */
+export class LibPixiTextGroupWrap extends Container {
+    constructor({ items, defaultStyle = {}, wordWrapWidth, paddingX = 0, paddingY = 0, align = "left", anchorX = 0, anchorY = 0, }) {
+        super();
+        if (!items.length)
+            return;
+        const lineGroups = [];
+        let currentLine = [];
+        let x = 0;
+        // 分行
+        for (const { text, style = {} } of items) {
+            const instance = new Text(text, Object.assign(Object.assign({}, defaultStyle), style));
+            const w = instance.width;
+            if (wordWrapWidth && x + w > wordWrapWidth && x > 0) {
+                lineGroups.push(currentLine);
+                currentLine = [];
+                x = 0;
+            }
+            currentLine.push(instance);
+            x += w + paddingX;
+        }
+        if (currentLine.length)
+            lineGroups.push(currentLine);
+        // 布局每行
+        let y = 0;
+        for (const line of lineGroups) {
+            const totalWidth = line.reduce((sum, i) => sum + i.width + paddingX, -paddingX);
+            let offsetX = 0;
+            if (align === "center" && wordWrapWidth)
+                offsetX = (wordWrapWidth - totalWidth) / 2;
+            else if (align === "right" && wordWrapWidth)
+                offsetX = wordWrapWidth - totalWidth;
+            let currentX = offsetX;
+            let maxHeight = 0;
+            for (const item of line) {
+                item.x = currentX;
+                item.y = y;
+                this.addChild(item);
+                currentX += item.width + paddingX;
+                if (item.height > maxHeight)
+                    maxHeight = item.height;
+            }
+            y += maxHeight + paddingY;
+        }
+        // 根据 anchor 调整整体偏移
+        const bounds = this.getLocalBounds();
+        this.pivot.set(bounds.x + bounds.width * anchorX, bounds.y + bounds.height * anchorY);
+    }
+}

package/README.md

@@ -919,6 +919,14 @@ const amountContainer = new LibLabelValue({
 
 > 基于 `HTML` 输入框实现，失焦时隐藏
 
+### LibPixiArrangeLinearV2-线性排列
+
+> 从左到右从上到下或从上到下从左到右排列，下一个元素的位置基于上一个元素的坐标及宽度，锚点要求在左边
+
+### LibPixiTextGroupWrap-文本组换行
+
+> 内部创建文本类组，公共样式和单个设置样式，并整体支持换行
+
 ## Utils-工具方法
 
 ### LibPixiAudio-音频播放器

package/libPixiJs.d.ts

@@ -35,6 +35,8 @@ import { LibPixiRoundedRect } from "./Components/Base/LibPixiRoundedRect";
 import { LibPixiInput } from "./Components/Custom/LibPixiInput";
 import { LibPixiGridLayoutV2 } from "./Utils/LibPixiGridLayoutV2";
 import { LibPixiTicker } from "./Utils/LibPixiTicker";
+import { LibPixiArrangeLinearV2 } from "./Components/Custom/LibPixiArrangeLinearV2";
+import { LibPixiTextGroupWrap } from "./Components/Custom/LibPixiTextGroupWrap";
 /** @description 组件 */
 export declare const Components: {
     Base: {
@@ -150,6 +152,10 @@ export declare const Components: {
         LibPixiTurntable: (num: number, distance: number, layoutCallback: (x: number, y: number, rotation: number, index: number) => void) => void;
         /** @description 输入框 */
         LibPixiInput: typeof LibPixiInput;
+        /** @description 线性排列 */
+        LibPixiArrangeLinearV2: typeof LibPixiArrangeLinearV2;
+        /** @description 文本组换行 */
+        LibPixiTextGroupWrap: typeof LibPixiTextGroupWrap;
     };
 };
 /** @description 方法 */

package/libPixiJs.js

@@ -54,6 +54,8 @@ import { LibPixiRoundedRect } from "./Components/Base/LibPixiRoundedRect";
 import { LibPixiInput } from "./Components/Custom/LibPixiInput";
 import { LibPixiGridLayoutV2 } from "./Utils/LibPixiGridLayoutV2";
 import { LibPixiTicker } from "./Utils/LibPixiTicker";
+import { LibPixiArrangeLinearV2 } from "./Components/Custom/LibPixiArrangeLinearV2";
+import { LibPixiTextGroupWrap } from "./Components/Custom/LibPixiTextGroupWrap";
 /** @description 组件 */
 export const Components = {
     Base: {
@@ -169,6 +171,10 @@ export const Components = {
         LibPixiTurntable,
         /** @description 输入框 */
         LibPixiInput,
+        /** @description 线性排列 */
+        LibPixiArrangeLinearV2,
+        /** @description 文本组换行 */
+        LibPixiTextGroupWrap,
     },
 };
 /** @description 方法 */

package/lyb-pixi.js

@@ -49335,7 +49335,10 @@ void main(void)\r
         scrollbarWidth = 10,
         scrollbarColor = "#ffffff",
         onScroll,
-        bgColor
+        bgColor,
+        maskTexture,
+        maskX = 0,
+        maskY = 0
       } = params;
       super(width, height, bgColor);
       this._startY = 0;
@@ -49355,9 +49358,18 @@ void main(void)\r
       this._content = new Container();
       this.addChild(this._content);
       this._content.addChild(this._scrollContent);
-      this._maskGraphics = new LibPixiRectangle(width, height, "#000");
-      this.addChild(this._maskGraphics);
-      this.mask = this._maskGraphics;
+      if (maskTexture) {
+        this._maskGraphics = new Sprite(maskTexture);
+        this.addChild(this._maskGraphics);
+        this._maskGraphics.width = width;
+        this._maskGraphics.height = height;
+        this._maskGraphics.position.set(maskX, maskY);
+        this.mask = this._maskGraphics;
+      } else {
+        this._maskGraphics = new LibPixiRectangle(width, height, "#000");
+        this.addChild(this._maskGraphics);
+        this.mask = this._maskGraphics;
+      }
       this._scrollbar = new LibPixiRectangle(
         scrollbarWidth,
         height,
@@ -49427,10 +49439,8 @@ void main(void)\r
      * @param height 高度
      */
     setDimensions(width, height) {
-      this._maskGraphics.clear();
-      this._maskGraphics.beginFill(0);
-      this._maskGraphics.drawRect(0, 0, width, height);
-      this._maskGraphics.endFill();
+      this._maskGraphics.width = width;
+      this._maskGraphics.height = height;
       this.setSize(width, height);
       this._scrollbar.x = width - (this._scrollbarRgiht || this._scrollbarWidth);
     }
@@ -58401,6 +58411,130 @@ void main(void){
   };
   _LibPixiTicker._callbacks = /* @__PURE__ */ new Map();
   let LibPixiTicker = _LibPixiTicker;
+  class LibPixiArrangeLinearV2 extends Container {
+    constructor(params) {
+      super();
+      this._elementList = [];
+      this._params = params || {};
+      this._elementList = this._params.elementList || [];
+    }
+    /** @description 追加元素 */
+    push(element) {
+      this.addChild(element);
+      this._elementList.push(element);
+    }
+    /** @description 布局 */
+    layout() {
+      const {
+        colNum = this._elementList.length,
+        gap = 10,
+        direction = "x",
+        anchorX = 0,
+        anchorY = 0
+      } = this._params;
+      let lastRowMax = 0;
+      let rowOffset = 0;
+      this._elementList.forEach((item, index) => {
+        const row = Math.floor(index / colNum);
+        const col = index % colNum;
+        if (direction === "x") {
+          const gapValue = Array.isArray(gap) ? gap[index - 1] ?? 0 : gap;
+          if (col === 0 && row > 0) {
+            rowOffset += lastRowMax + gapValue;
+            lastRowMax = 0;
+          }
+          item.x = col === 0 ? 0 : this._elementList[index - 1].x + this._elementList[index - 1].width + gapValue;
+          rowOffset && (item.y = rowOffset);
+          lastRowMax = Math.max(lastRowMax, item.height);
+        } else {
+          const gapValue = Array.isArray(gap) ? gap[index - 1] ?? 0 : gap;
+          if (col === 0 && row > 0) {
+            rowOffset += lastRowMax + gapValue;
+            lastRowMax = 0;
+          }
+          item.y = col === 0 ? 0 : this._elementList[index - 1].y + this._elementList[index - 1].height + gapValue;
+          rowOffset && (item.x = rowOffset);
+          lastRowMax = Math.max(lastRowMax, item.width);
+        }
+      });
+      const bounds = this.getLocalBounds();
+      this.pivot.set(
+        bounds.x + bounds.width * anchorX,
+        bounds.y + bounds.height * anchorY
+      );
+    }
+    /** @description 获取列表元素 */
+    getList() {
+      return this._elementList;
+    }
+    /** @description 销毁列表元素 */
+    destroyList() {
+      this._elementList.forEach((item) => {
+        item.destroy();
+      });
+      this._elementList = [];
+    }
+  }
+  class LibPixiTextGroupWrap extends Container {
+    constructor({
+      items,
+      defaultStyle = {},
+      wordWrapWidth,
+      paddingX = 0,
+      paddingY = 0,
+      align = "left",
+      anchorX = 0,
+      anchorY = 0
+    }) {
+      super();
+      if (!items.length)
+        return;
+      const lineGroups = [];
+      let currentLine = [];
+      let x2 = 0;
+      for (const { text, style = {} } of items) {
+        const instance2 = new Text(text, { ...defaultStyle, ...style });
+        const w2 = instance2.width;
+        if (wordWrapWidth && x2 + w2 > wordWrapWidth && x2 > 0) {
+          lineGroups.push(currentLine);
+          currentLine = [];
+          x2 = 0;
+        }
+        currentLine.push(instance2);
+        x2 += w2 + paddingX;
+      }
+      if (currentLine.length)
+        lineGroups.push(currentLine);
+      let y2 = 0;
+      for (const line of lineGroups) {
+        const totalWidth = line.reduce(
+          (sum2, i2) => sum2 + i2.width + paddingX,
+          -paddingX
+        );
+        let offsetX = 0;
+        if (align === "center" && wordWrapWidth)
+          offsetX = (wordWrapWidth - totalWidth) / 2;
+        else if (align === "right" && wordWrapWidth)
+          offsetX = wordWrapWidth - totalWidth;
+        let currentX = offsetX;
+        let maxHeight = 0;
+        for (const item of line) {
+          item.x = currentX;
+          item.y = y2;
+          this.addChild(item);
+          currentX += item.width + paddingX;
+          if (item.height > maxHeight)
+            maxHeight = item.height;
+        }
+        y2 += maxHeight + paddingY;
+      }
+      const bounds = this.getLocalBounds();
+      this.pivot.set(
+        bounds.x + bounds.width * anchorX,
+        bounds.y + bounds.height * anchorY
+      );
+    }
+  }
   const Components = {
     Base: {
       /** （已废弃）
@@ -58514,7 +58648,11 @@ void main(void){
       /** @description 转盘布局 */
       LibPixiTurntable,
       /** @description 输入框 */
-      LibPixiInput
+      LibPixiInput,
+      /** @description 线性排列 */
+      LibPixiArrangeLinearV2,
+      /** @description 文本组换行 */
+      LibPixiTextGroupWrap
     }
   };
   const Utils = {

package/package.json

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