lyb-pixi-js 1.12.5 → 1.12.6

package/README.md

@@ -1229,6 +1229,10 @@ LibPixiDownScaleAnimation(sprite);
 LibPixiGridLayout(cardList, 20, 3); //间隔20，一行三个
 ```
 
+### LibPixiGridLayoutV2-网格布局V2
+
+> 省略自己创建数组对组件进行 `push` ，内部做了 `push` 处理
+
 ### LibPixiArrangeLinear-间隔布局
 
 > 按照指定方向（水平或垂直）排列元素，支持固定间隔或自定义每个间隔

package/Utils/LibPixiGridLayoutV2.d.ts

@@ -0,0 +1,25 @@
+export interface GridLayoutParams {
+    /** 列数 */
+    colNum?: number;
+    /** 列间隔 */
+    colGap?: number;
+    /** 行间隔 */
+    rowGap?: number;
+    /** 元素列表 */
+    elementList?: any[];
+}
+import { Container } from "pixi.js";
+/** @description 网格布局 */
+export declare class LibPixiGridLayoutV2<T extends Container> extends Container {
+    /** 参数 */
+    private _params;
+    /** 元素列表 */
+    private _elementList;
+    constructor(params?: GridLayoutParams);
+    /** @description 追加元素 */
+    push(element: T): void;
+    /** @description 布局 */
+    layout(): void;
+    /** @description 获取列表元素 */
+    getList(): T[];
+}

package/Utils/LibPixiGridLayoutV2.js

@@ -0,0 +1,30 @@
+import { Container } from "pixi.js";
+/** @description 网格布局 */
+export class LibPixiGridLayoutV2 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 = 3, colGap = 325, rowGap = 75 } = this._params;
+        this._elementList.forEach((item, index) => {
+            const col = index % colNum;
+            const row = Math.floor(index / colNum);
+            item.x = col * colGap;
+            item.y = row * rowGap;
+        });
+    }
+    /** @description 获取列表元素 */
+    getList() {
+        return this._elementList;
+    }
+}

package/libPixiJs.d.ts

@@ -33,6 +33,7 @@ import { LibPixiOval } from "./Components/Base/LibPixiOval";
 import { LibPixiRound } from "./Components/Base/LibPixiRound";
 import { LibPixiRoundedRect } from "./Components/Base/LibPixiRoundedRect";
 import { LibPixiInput } from "./Components/Custom/LibPixiInput";
+import { LibPixiGridLayoutV2 } from "./Utils/LibPixiGridLayoutV2";
 /** @description 组件 */
 export declare const Components: {
     Base: {
@@ -267,6 +268,8 @@ export declare const Utils: {
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiGridLayout-网格布局
      */
     LibPixiGridLayout: (items: import("pixi.js").Container[], gap: number, cols?: number, direction?: "row" | "col") => void;
+    /** @description 网格布局V2 */
+    LibPixiGridLayoutV2: typeof LibPixiGridLayoutV2;
     /**
      * @description 按照指定方向（水平或垂直）排列元素，支持固定间隔或自定义每个间隔。
      * @param items 要排列的元素数组。

package/libPixiJs.js

@@ -52,6 +52,7 @@ import { LibPixiOval } from "./Components/Base/LibPixiOval";
 import { LibPixiRound } from "./Components/Base/LibPixiRound";
 import { LibPixiRoundedRect } from "./Components/Base/LibPixiRoundedRect";
 import { LibPixiInput } from "./Components/Custom/LibPixiInput";
+import { LibPixiGridLayoutV2 } from "./Utils/LibPixiGridLayoutV2";
 /** @description 组件 */
 export const Components = {
     Base: {
@@ -286,6 +287,8 @@ export const Utils = {
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiGridLayout-网格布局
      */
     LibPixiGridLayout,
+    /** @description 网格布局V2 */
+    LibPixiGridLayoutV2,
     /**
      * @description 按照指定方向（水平或垂直）排列元素，支持固定间隔或自定义每个间隔。
      * @param items 要排列的元素数组。

package/lyb-pixi.js

@@ -58322,6 +58322,33 @@ void main(void){
       }
     }
   }
+  class LibPixiGridLayoutV2 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 = 3, colGap = 325, rowGap = 75 } = this._params;
+      this._elementList.forEach((item, index) => {
+        const col = index % colNum;
+        const row = Math.floor(index / colNum);
+        item.x = col * colGap;
+        item.y = row * rowGap;
+      });
+    }
+    /** @description 获取列表元素 */
+    getList() {
+      return this._elementList;
+    }
+  }
   const Components = {
     Base: {
       /** （已废弃）
@@ -58554,6 +58581,8 @@ void main(void){
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiGridLayout-网格布局
      */
     LibPixiGridLayout,
+    /** @description 网格布局V2 */
+    LibPixiGridLayoutV2,
     /**
      * @description 按照指定方向（水平或垂直）排列元素，支持固定间隔或自定义每个间隔。
      * @param items 要排列的元素数组。

package/package.json

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