lyb-pixi-js 1.12.19 → 1.12.21

package/Components/Custom/LibPixiArrangeLinearV2.d.ts

@@ -4,6 +4,8 @@ export interface GridLayoutParams {
     direction?: "x" | "y";
     colNum?: number;
     elementList?: any[];
+    anchorX?: number;
+    anchorY?: number;
 }
 /** @description 线性排列 */
 export declare class LibPixiArrangeLinearV2<T extends Container> extends Container {

package/Components/Custom/LibPixiArrangeLinearV2.js

@@ -15,7 +15,7 @@ export class LibPixiArrangeLinearV2 extends Container {
     }
     /** @description 布局 */
     layout() {
-        const { colNum = this._elementList.length, gap = 10, direction = "x" } = this._params;
+        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) => {
@@ -24,14 +24,19 @@ export class LibPixiArrangeLinearV2 extends Container {
             const col = index % colNum; // 当前列号
             if (direction === "x") {
                 //间隔
-                const gapValue = Array.isArray(gap) ? ((_a = gap[index - 1]) !== null && _a !== void 0 ? _a : 0) : gap;
+                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;
+                item.x =
+                    col === 0
+                        ? 0
+                        : this._elementList[index - 1].x +
+                            this._elementList[index - 1].width +
+                            gapValue;
                 // 纵向位置 = 当前累计的行偏移
                 rowOffset && (item.y = rowOffset);
                 // 更新当前行的最大高度
@@ -39,20 +44,27 @@ export class LibPixiArrangeLinearV2 extends Container {
             }
             else {
                 //间隔
-                const gapValue = Array.isArray(gap) ? ((_b = gap[index - 1]) !== null && _b !== void 0 ? _b : 0) : gap;
+                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;
+                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() {

package/Components/Custom/LibPixiProgress.d.ts

@@ -12,6 +12,8 @@ export interface LibPixiProgressParams {
     bgTexture: Texture;
     /** 进度条纹理 */
     barTexture: Texture;
+    /** 方向 */
+    direction?: "h" | "v";
 }
 /** @description 通过裁剪的方式显示进度条
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiProgress-进度条
@@ -21,6 +23,8 @@ export declare class LibPixiProgress extends Container {
     private _progressBar;
     /** 蒙版 */
     private _maskGraphics;
+    /** 方向 */
+    private _direction;
     constructor(params: LibPixiProgressParams);
     /** @description 更新进度
      * @param progress 进度值，范围从0到1

package/Components/Custom/LibPixiProgress.js

@@ -5,7 +5,8 @@ import { Container, Graphics, Sprite } from "pixi.js";
 export class LibPixiProgress extends Container {
     constructor(params) {
         super();
-        const { bgWidth, bgHeight, barWidth, barHeight, bgTexture, barTexture } = params;
+        const { bgWidth, bgHeight, barWidth, barHeight, bgTexture, barTexture, direction } = params;
+        this._direction = direction || "h";
         // 背景图
         const background = new Sprite(bgTexture);
         this.addChild(background);
@@ -17,7 +18,12 @@ export class LibPixiProgress extends Container {
         // 创建蒙版
         const mask = new Graphics();
         mask.beginFill(0xffffff);
-        mask.drawRect(0, 0, 0, this._progressBar.height);
+        if (direction === "h") {
+            mask.drawRect(0, 0, 0, this._progressBar.height);
+        }
+        else {
+            mask.drawRect(0, 0, this._progressBar.width, 0);
+        }
         mask.endFill();
         this._progressBar.addChild(mask);
         this._progressBar.mask = mask;
@@ -30,7 +36,12 @@ export class LibPixiProgress extends Container {
         const clampedProgress = Math.max(0, Math.min(1, progress));
         this._maskGraphics.clear();
         this._maskGraphics.beginFill(0xffffff);
-        this._maskGraphics.drawRect(0, 0, this._progressBar.width * clampedProgress, this._progressBar.height);
+        if (this._direction === "h") {
+            this._maskGraphics.drawRect(0, 0, this._progressBar.width * clampedProgress, this._progressBar.height);
+        }
+        else {
+            this._maskGraphics.drawRect(0, this._progressBar.height * (1 - clampedProgress), this._progressBar.width, this._progressBar.height * clampedProgress);
+        }
         this._maskGraphics.endFill();
     }
 }

package/Components/Custom/LibPixiPuzzleBg.d.ts

@@ -1,7 +1,7 @@
-import { Container } from "pixi.js";
+import { Container, Texture } from "pixi.js";
 /** @description 设计图背景拼接
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPuzzleBg-设计图背景拼接
  */
 export declare class LibPixiPuzzleBg extends Container {
-    constructor();
+    constructor(texture: Texture);
 }

package/Components/Custom/LibPixiPuzzleBg.js

@@ -1,14 +1,14 @@
 import { libJsDecimal } from "lyb-js/Math/LibJsDecimal.js";
-import { Assets, Container, Sprite } from "pixi.js";
+import { Container, Sprite } from "pixi.js";
 /** @description 设计图背景拼接
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPuzzleBg-设计图背景拼接
  */
 export class LibPixiPuzzleBg extends Container {
-    constructor() {
+    constructor(texture) {
         super();
         this.eventMode = "none";
         // 背景
-        const bg = new Sprite(Assets.get("preload/bg"));
+        const bg = new Sprite(texture);
         this.addChild(bg);
         bg.visible = false;
         //读取配置

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

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

package/libPixiJs.d.ts

@@ -36,6 +36,7 @@ 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: {
@@ -153,6 +154,8 @@ export declare const Components: {
         LibPixiInput: typeof LibPixiInput;
         /** @description 线性排列 */
         LibPixiArrangeLinearV2: typeof LibPixiArrangeLinearV2;
+        /** @description 文本组换行 */
+        LibPixiTextGroupWrap: typeof LibPixiTextGroupWrap;
     };
 };
 /** @description 方法 */

package/libPixiJs.js

@@ -55,6 +55,7 @@ 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: {
@@ -172,6 +173,8 @@ export const Components = {
         LibPixiInput,
         /** @description 线性排列 */
         LibPixiArrangeLinearV2,
+        /** @description 文本组换行 */
+        LibPixiTextGroupWrap,
     },
 };
 /** @description 方法 */

package/lyb-pixi.js

@@ -49183,7 +49183,8 @@ void main(void)\r
   class LibPixiProgress extends Container {
     constructor(params) {
       super();
-      const { bgWidth, bgHeight, barWidth, barHeight, bgTexture, barTexture } = params;
+      const { bgWidth, bgHeight, barWidth, barHeight, bgTexture, barTexture, direction } = params;
+      this._direction = direction || "h";
       const background = new Sprite(bgTexture);
       this.addChild(background);
       this._progressBar = new Sprite(barTexture);
@@ -49192,7 +49193,11 @@ void main(void)\r
       this._progressBar.y = (bgHeight - barHeight) / 2;
       const mask = new Graphics();
       mask.beginFill(16777215);
-      mask.drawRect(0, 0, 0, this._progressBar.height);
+      if (direction === "h") {
+        mask.drawRect(0, 0, 0, this._progressBar.height);
+      } else {
+        mask.drawRect(0, 0, this._progressBar.width, 0);
+      }
       mask.endFill();
       this._progressBar.addChild(mask);
       this._progressBar.mask = mask;
@@ -49205,12 +49210,16 @@ void main(void)\r
       const clampedProgress = Math.max(0, Math.min(1, progress));
       this._maskGraphics.clear();
       this._maskGraphics.beginFill(16777215);
-      this._maskGraphics.drawRect(
-        0,
-        0,
-        this._progressBar.width * clampedProgress,
-        this._progressBar.height
-      );
+      if (this._direction === "h") {
+        this._maskGraphics.drawRect(0, 0, this._progressBar.width * clampedProgress, this._progressBar.height);
+      } else {
+        this._maskGraphics.drawRect(
+          0,
+          this._progressBar.height * (1 - clampedProgress),
+          this._progressBar.width,
+          this._progressBar.height * clampedProgress
+        );
+      }
       this._maskGraphics.endFill();
     }
   }
@@ -57787,10 +57796,10 @@ void main(void){
     return Number(result.toFixed(point, Decimal.ROUND_DOWN));
   };
   class LibPixiPuzzleBg extends Container {
-    constructor() {
+    constructor(texture) {
       super();
       this.eventMode = "none";
-      const bg = new Sprite(Assets.get("preload/bg"));
+      const bg = new Sprite(texture);
       this.addChild(bg);
       bg.visible = false;
       const config2 = JSON.parse(localStorage.getItem("puzzle_bg_config") || "{}");
@@ -57815,10 +57824,7 @@ void main(void){
         } else if (e2.code === "NumpadSubtract" && bg.alpha > 0) {
           bg.alpha = libJsDecimal(bg.alpha, 0.1, "-");
         }
-        localStorage.setItem(
-          "puzzle_bg_config",
-          JSON.stringify({ alpha: bg.alpha, x: bg.x, y: bg.y })
-        );
+        localStorage.setItem("puzzle_bg_config", JSON.stringify({ alpha: bg.alpha, x: bg.x, y: bg.y }));
       });
     }
   }
@@ -58449,7 +58455,13 @@ void main(void){
     }
     /** @description 布局 */
     layout() {
-      const { colNum = this._elementList.length, gap = 10, direction = "x" } = this._params;
+      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) => {
@@ -58475,6 +58487,11 @@ void main(void){
           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() {
@@ -58488,6 +58505,66 @@ void main(void){
       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: {
       /** （已废弃）
@@ -58603,7 +58680,9 @@ void main(void){
       /** @description 输入框 */
       LibPixiInput,
       /** @description 线性排列 */
-      LibPixiArrangeLinearV2
+      LibPixiArrangeLinearV2,
+      /** @description 文本组换行 */
+      LibPixiTextGroupWrap
     }
   };
   const Utils = {

package/package.json

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