lyb-pixi-js 1.12.17 → 1.12.19

package/Components/Custom/LibPixiArrangeLinearV2.d.ts

@@ -0,0 +1,23 @@
+import { Container } from "pixi.js";
+export interface GridLayoutParams {
+    gap?: number | number[];
+    direction?: "x" | "y";
+    colNum?: number;
+    elementList?: any[];
+}
+/** @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,68 @@
+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" } = 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);
+            }
+        });
+    }
+    /** @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/README.md

@@ -919,6 +919,10 @@ const amountContainer = new LibLabelValue({
 
 > 基于 `HTML` 输入框实现，失焦时隐藏
 
+### LibPixiArrangeLinearV2-线性排列
+
+> 从左到右从上到下或从上到下从左到右排列，下一个元素的位置基于上一个元素的坐标及宽度，锚点要求在左边
+
 ## Utils-工具方法
 
 ### LibPixiAudio-音频播放器

package/Utils/LibPixiArrangeLinear.d.ts

@@ -1,10 +1,16 @@
-import { Container } from "pixi.js";
+import type { Container } from "pixi.js";
 /**
- * @description 按照指定方向（水平或垂直）排列元素，支持固定间隔或自定义每个间隔。
- * @param items 要排列的元素数组。
- * @param gap 元素之间的间隔，可以是固定间隔或自定义的间隔数组。
- * @param direction 排列方向，"x"表示水平，"y"表示垂直，默认为水平。
- * @param cols 列数，默认为元素数量。
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiArrangeLinear-间隔布局
+ * @description 线性排列 PIXI.Container 元素（支持横向/纵向排列，多列布局、固定或自定义间隔）
+ * @param items 需要排列的容器数组
+ * @param gap 间隔，可为固定值或数组（数组长度必须等于 items.length - 1）
+ * @param direction 排列方向："x" 横向排列，"y" 纵向排列
+ * @param cols 每行（或每列）最多的元素个数，默认为 Infinity（单行/单列）
+ * @example
+ * // 横向排列
+ * LibPixiArrangeLinear([sprite1, sprite2, sprite3], 10, "x");
+ * // 纵向排列
+ * LibPixiArrangeLinear([sprite1, sprite2, sprite3], 20, "y");
+ * // 两列布局
+ * LibPixiArrangeLinear([sprite1, sprite2, sprite3, sprite4], 10, "x", 2);
  */
 export declare const LibPixiArrangeLinear: (items: Container[], gap: number | number[], direction?: "x" | "y", cols?: number) => void;

package/Utils/LibPixiArrangeLinear.js

@@ -1,44 +1,61 @@
 /**
- * @description 按照指定方向（水平或垂直）排列元素，支持固定间隔或自定义每个间隔。
- * @param items 要排列的元素数组。
- * @param gap 元素之间的间隔，可以是固定间隔或自定义的间隔数组。
- * @param direction 排列方向，"x"表示水平，"y"表示垂直，默认为水平。
- * @param cols 列数，默认为元素数量。
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiArrangeLinear-间隔布局
+ * @description 线性排列 PIXI.Container 元素（支持横向/纵向排列，多列布局、固定或自定义间隔）
+ * @param items 需要排列的容器数组
+ * @param gap 间隔，可为固定值或数组（数组长度必须等于 items.length - 1）
+ * @param direction 排列方向："x" 横向排列，"y" 纵向排列
+ * @param cols 每行（或每列）最多的元素个数，默认为 Infinity（单行/单列）
+ * @example
+ * // 横向排列
+ * LibPixiArrangeLinear([sprite1, sprite2, sprite3], 10, "x");
+ * // 纵向排列
+ * LibPixiArrangeLinear([sprite1, sprite2, sprite3], 20, "y");
+ * // 两列布局
+ * LibPixiArrangeLinear([sprite1, sprite2, sprite3, sprite4], 10, "x", 2);
  */
 export const LibPixiArrangeLinear = (items, gap, direction = "x", cols = Infinity) => {
+    // 验证 gap 数组长度是否正确
     if (Array.isArray(gap)) {
         if (gap.length !== items.length - 1) {
             console.error(new Error("间隔的数组长度只能等于元素数组长度-1"));
             return;
         }
     }
-    let lastRowMax = 0; // 记录当前行/列最大高度或宽度
-    let rowOffset = 0; // 累计偏移量（多行时用）
+    let lastRowMax = 0; // 当前行（或列）的最大高度（或宽度），用于多行/多列换行时计算偏移
+    let rowOffset = 0; // 累计偏移量，控制换行后的整体偏移位置
     items.forEach((item, index) => {
         var _a, _b;
-        const row = Math.floor(index / cols);
-        const col = index % cols;
+        const row = Math.floor(index / cols); // 当前行号
+        const col = index % cols; // 当前列号
         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 : items[index - 1].x + items[index - 1].width + gapValue;
-            item.y = rowOffset;
+            // 纵向位置 = 当前累计的行偏移
+            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 : items[index - 1].y + items[index - 1].height + gapValue;
-            item.x = rowOffset;
+            // 横向位置 = 当前累计的列偏移
+            rowOffset && (item.x = rowOffset);
+            // 更新当前列的最大宽度
             lastRowMax = Math.max(lastRowMax, item.width);
         }
     });

package/libPixiJs.d.ts

@@ -35,6 +35,7 @@ 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";
 /** @description 组件 */
 export declare const Components: {
     Base: {
@@ -150,6 +151,8 @@ 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 方法 */

package/libPixiJs.js

@@ -54,6 +54,7 @@ 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";
 /** @description 组件 */
 export const Components = {
     Base: {
@@ -169,6 +170,8 @@ export const Components = {
         LibPixiTurntable,
         /** @description 输入框 */
         LibPixiInput,
+        /** @description 线性排列 */
+        LibPixiArrangeLinearV2,
     },
 };
 /** @description 方法 */

package/lyb-pixi.js

@@ -49359,7 +49359,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;
@@ -49379,9 +49382,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,
@@ -49451,10 +49463,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);
     }
@@ -55153,7 +55163,7 @@ void main(void){
           lastRowMax = 0;
         }
         item.x = col === 0 ? 0 : items[index - 1].x + items[index - 1].width + gapValue;
-        item.y = rowOffset;
+        rowOffset && (item.y = rowOffset);
         lastRowMax = Math.max(lastRowMax, item.height);
       } else {
         const gapValue = Array.isArray(gap) ? gap[index - 1] ?? 0 : gap;
@@ -55162,7 +55172,7 @@ void main(void){
           lastRowMax = 0;
         }
         item.y = col === 0 ? 0 : items[index - 1].y + items[index - 1].height + gapValue;
-        item.x = rowOffset;
+        rowOffset && (item.x = rowOffset);
         lastRowMax = Math.max(lastRowMax, item.width);
       }
     });
@@ -58425,6 +58435,59 @@ 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" } = 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);
+        }
+      });
+    }
+    /** @description 获取列表元素 */
+    getList() {
+      return this._elementList;
+    }
+    /** @description 销毁列表元素 */
+    destroyList() {
+      this._elementList.forEach((item) => {
+        item.destroy();
+      });
+      this._elementList = [];
+    }
+  }
   const Components = {
     Base: {
       /** （已废弃）
@@ -58538,7 +58601,9 @@ void main(void){
       /** @description 转盘布局 */
       LibPixiTurntable,
       /** @description 输入框 */
-      LibPixiInput
+      LibPixiInput,
+      /** @description 线性排列 */
+      LibPixiArrangeLinearV2
     }
   };
   const Utils = {

package/package.json

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