lyb-pixi-js 1.12.34 → 1.12.36

package/Components/Custom/LibPixiHeadingParagraphLayout.d.ts

@@ -0,0 +1,18 @@
+import { Container, type ITextStyle } from "pixi.js";
+interface Params {
+    /** 文本列表 */
+    textList: {
+        type: "h" | "p";
+        text: string;
+        style?: Partial<ITextStyle>;
+    }[];
+    /** 内容宽度 */
+    width: number;
+    /** 默认样式 */
+    defaultStyle?: Partial<ITextStyle>;
+}
+/** @description 标题内容纵向排列 */
+export declare class LibPixiHeadingParagraphLayout extends Container {
+    constructor(params: Params);
+}
+export {};

package/Components/Custom/LibPixiHeadingParagraphLayout.js

@@ -0,0 +1,27 @@
+import { Container, Text } from "pixi.js";
+/** @description 标题内容纵向排列 */
+export class LibPixiHeadingParagraphLayout extends Container {
+    constructor(params) {
+        super();
+        const { textList, width, defaultStyle = {} } = params;
+        const textItemList = [];
+        let lastText;
+        textList.forEach((item, index) => {
+            const text = new Text(item.text, Object.assign(Object.assign({ wordWrap: true, wordWrapWidth: width }, defaultStyle), item.style));
+            this.addChild(text);
+            textItemList.push(text);
+            if (item.type === "h") {
+                text.anchor.x = 0.5;
+                text.x = width / 2;
+                text.style.align = "center";
+            }
+            if (lastText) {
+                text.y = lastText.y + lastText.height + Number(defaultStyle.fontSize) / 2;
+            }
+            if (item.type === "h" && index !== 0) {
+                text.y += Number(defaultStyle.fontSize);
+            }
+            lastText = text;
+        });
+    }
+}

package/README.md

@@ -156,6 +156,8 @@ app.stage.addChild(box);
 
 \- [LibPixiAreaClick-扩大点击范围](#LibPixiAreaClick-扩大点击范围)
 
+\- [LibPixiHeadingParagraphLayout-文章标题内容布局](#LibPixiHeadingParagraphLayout-文章标题内容布局)
+
 ### 方法
 
 \- [LibPixiAudio-音频播放器](#LibPixiAudio-音频播放器)
@@ -921,6 +923,10 @@ const amountContainer = new LibLabelValue({
 
 > 解决当图片有空隙时，无法准确点击图片，如箭头和关闭按钮
 
+### LibPixiHeadingParagraphLayout-文章标题内容布局
+
+> 只支持一个标题和一个内容，一般用于一些隐私政策和服务条款
+
 ## Utils-工具方法
 
 ### LibPixiAudio-音频播放器

package/Utils/LibPixiDialogManager/ui/LibPixiDialog.d.ts

@@ -3,10 +3,10 @@ import { LibPixiBaseContainer } from "./LibPixiBaseContainer";
 interface Params {
     /** 是否需要显示黑色背景 */
     needBg?: boolean;
-    /** 竖版初始大小 */
-    size?: number;
     /** 点击蒙版回调 */
     onClickMask?: () => void;
+    /** 竖版缩放大小 */
+    vScale?: number;
 }
 /** @description 弹窗组件 */
 export declare class LibPixiDialog extends LibPixiBaseContainer {
@@ -21,18 +21,20 @@ export declare class LibPixiDialog extends LibPixiBaseContainer {
     private _maskUI;
     /** 内容容器 */
     private _dialogContainer;
-    /** 当前大小 */
-    private _size;
-    /** 竖版初始大小 */
-    private _initialSize;
+    /** 竖版缩放大小 */
+    private _vScale;
+    /** 上一次是否为横版 */
+    private _lastIsH?;
     /** 停止监听窗口 */
     private _offResize?;
     constructor(params?: Params);
     /** @description 设置弹窗内容 */
     setDialogContent(content: Container): void;
-    /** @description 重绘弹窗 */
-    redraw(w: number, h: number): void;
+    /** @description 设置弹窗容器锚点 */
+    updatePivot(): void;
     /** @description 关闭 */
     close(): Promise<void>;
+    /** @description 重绘弹窗 */
+    private _redraw;
 }
 export {};

package/Utils/LibPixiDialogManager/ui/LibPixiDialog.js

@@ -17,10 +17,10 @@ import { LibPixiBaseContainer } from "./LibPixiBaseContainer";
 export class LibPixiDialog extends LibPixiBaseContainer {
     constructor(params) {
         super();
-        /** 当前大小 */
-        this._size = 1;
-        const { size = 1, onClickMask, needBg = true } = params || {};
-        this._initialSize = size;
+        /** 竖版缩放大小 */
+        this._vScale = 1;
+        const { onClickMask, vScale = 1, needBg = true } = params || {};
+        this._vScale = vScale;
         //蒙版
         this._maskUI = new LibPixiRectangle(2700, 1080, "#000");
         this.addChild(this._maskUI);
@@ -41,69 +41,45 @@ export class LibPixiDialog extends LibPixiBaseContainer {
         this.addChild(this._dialogContainer);
         this._dialogContainer.eventMode = "static";
         const resize = new LibJsResizeWatcher(LibPixiDialog.adaptation);
-        this._offResize = resize.on(this.redraw.bind(this));
+        this._offResize = resize.on(this._redraw.bind(this), false);
     }
     /** @description 设置弹窗内容 */
     setDialogContent(content) {
         this._dialogContainer.addChild(content);
-        if (LibPixiDialog.adaptation === "h") {
-            this.redraw(1920, 1080);
-        }
-        else if (LibPixiDialog.adaptation === "v") {
-            this.redraw(1080, 1920);
-        }
-        else {
-            this.redraw(window.innerWidth, window.innerHeight);
-        }
-        this._dialogContainer.scale.set(0);
         this._dialogContainer.alpha = 0;
-        gsap.to(this._maskUI, {
-            duration: LibPixiDialog.durationIn,
-            alpha: LibPixiDialog.bgAlpha,
-        });
-        gsap.to(this._dialogContainer, {
-            duration: LibPixiDialog.durationIn,
-            alpha: 1,
+        requestAnimationFrame(() => {
+            this.updatePivot();
+            if (LibPixiDialog.adaptation === "h") {
+                this._redraw(1920, 1080);
+            }
+            else if (LibPixiDialog.adaptation === "v") {
+                this._redraw(1080, 1920);
+            }
+            else {
+                this._redraw(window.innerWidth, window.innerHeight);
+            }
+            gsap.to(this._maskUI, {
+                duration: LibPixiDialog.durationIn,
+                alpha: LibPixiDialog.bgAlpha,
+            });
+            gsap.to(this._dialogContainer, {
+                duration: LibPixiDialog.durationIn,
+                alpha: 1,
+            });
         });
     }
-    /** @description 重绘弹窗 */
-    redraw(w, h) {
+    /** @description 设置弹窗容器锚点 */
+    updatePivot() {
         const dialogW = this._dialogContainer.width / 2;
         const dialogH = this._dialogContainer.height / 2;
         this._dialogContainer.pivot.set(dialogW, dialogH);
-        const halfW = 1920 / 2;
-        const halfH = 1080 / 2;
-        if (w > h) {
-            this._maskUI.width = 2700;
-            this._maskUI.height = 1080;
-            this._maskUI.x = -(2700 - 1920) / 2;
-            this._dialogContainer.position.set(halfW, halfH);
-            this._size = 1;
-            if (this._dialogContainer.scale.x === this._initialSize) {
-                this._dialogContainer.scale.set(1);
-            }
-        }
-        else {
-            this._maskUI.width = 1080;
-            this._maskUI.height = 2700;
-            this._maskUI.x = 0;
-            this._dialogContainer.position.set(halfH, halfW);
-            this._size = this._initialSize;
-            if (this._dialogContainer.scale.x === 1) {
-                this._dialogContainer.scale.set(this._initialSize);
-            }
-        }
-        gsap.to(this._dialogContainer.scale, {
-            duration: LibPixiDialog.durationIn,
-            ease: "back.out",
-            x: this._size,
-            y: this._size,
-        });
+        console.log(this._dialogContainer.width, this._dialogContainer.height);
     }
     /** @description 关闭 */
     close() {
         return __awaiter(this, void 0, void 0, function* () {
             var _a;
+            this._maskUI.eventMode = "none";
             (_a = this._offResize) === null || _a === void 0 ? void 0 : _a.call(this);
             gsap.to(this._dialogContainer.scale, {
                 duration: LibPixiDialog.durationOut,
@@ -123,6 +99,36 @@ export class LibPixiDialog extends LibPixiBaseContainer {
             });
         });
     }
+    /** @description 重绘弹窗 */
+    _redraw(w, h) {
+        if (this._lastIsH === w > h)
+            return;
+        this._lastIsH = w > h;
+        let scale = 0;
+        const halfW = 1920 / 2;
+        const halfH = 1080 / 2;
+        if (w > h) {
+            this._maskUI.width = 2700;
+            this._maskUI.height = 1080;
+            this._maskUI.x = -(2700 - 1920) / 2;
+            this._dialogContainer.position.set(halfW, halfH);
+            scale = 1;
+        }
+        else {
+            this._maskUI.width = 1080;
+            this._maskUI.height = 2700;
+            this._maskUI.x = 0;
+            this._dialogContainer.position.set(halfH, halfW);
+            scale = this._vScale;
+        }
+        this._dialogContainer.scale.set(0);
+        gsap.to(this._dialogContainer.scale, {
+            duration: LibPixiDialog.durationIn,
+            ease: "back.out",
+            x: scale,
+            y: scale,
+        });
+    }
 }
 /** 黑色背景透明度 */
 LibPixiDialog.bgAlpha = 0.5;

package/package.json

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