lyb-pixi-js 1.12.59 → 1.12.61

package/Components/Custom/LibPixiArrangeLinearV2.js

@@ -1,4 +1,5 @@
 import { Container } from "pixi.js";
+import { libPixiPivot } from "../../Utils/LibPixiActhor";
 /** @description 线性排列 */
 export class LibPixiArrangeLinearV2 extends Container {
     constructor(params) {
@@ -63,8 +64,7 @@ export class LibPixiArrangeLinearV2 extends Container {
                 lastRowMax = Math.max(lastRowMax, item.width);
             }
         });
-        const bounds = this.getLocalBounds();
-        this.pivot.set(bounds.x + bounds.width * anchorX, bounds.y + bounds.height * anchorY);
+        libPixiPivot(this, anchorX, anchorY);
     }
     /** @description 获取列表元素 */
     getList() {

package/Components/Custom/LibPixiGridColumnLayout.js

@@ -1,4 +1,5 @@
 import { Container } from "pixi.js";
+import { libPixiPivot } from "../../Utils/LibPixiActhor";
 /** @description 网格列布局 */
 export class LibPixiGridColumnLayout extends Container {
     constructor(params) {
@@ -23,8 +24,7 @@ export class LibPixiGridColumnLayout extends Container {
             item.x = isRTL ? -col * colGap : col * colGap;
             item.y = row * rowGap;
         });
-        const bounds = this.getLocalBounds();
-        this.pivot.set(bounds.x + bounds.width * anchorX, bounds.y + bounds.height * anchorY);
+        libPixiPivot(this, anchorX, anchorY);
     }
     /** @description 获取列表元素 */
     getList() {

package/Components/Custom/LibPixiGridRowLayout.js

@@ -1,4 +1,5 @@
 import { Container } from "pixi.js";
+import { libPixiPivot } from "../../Utils/LibPixiActhor";
 /** @description 网格行布局 */
 export class LibPixiGridRowLayout extends Container {
     constructor(params) {
@@ -23,8 +24,7 @@ export class LibPixiGridRowLayout extends Container {
             item.y = row * rowGap;
         });
         // 根据 anchor 调整整体偏移
-        const bounds = this.getLocalBounds();
-        this.pivot.set(bounds.x + bounds.width * anchorX, bounds.y + bounds.height * anchorY);
+        libPixiPivot(this, anchorX, anchorY);
     }
     /** @description 获取列表元素 */
     getList() {

package/Components/Custom/LibPixiNoticeBar.d.ts

@@ -0,0 +1,26 @@
+import { Container, type HTMLText, type Text } from "pixi.js";
+interface Params {
+    /** 高度 */
+    width: number;
+    /** 宽度 */
+    height: number;
+    /** 速度，px/s，默认100 */
+    speed?: number;
+    /** 可见性回调 */
+    onVisable: (v: boolean) => void;
+}
+/** @description 滚动通知栏 */
+export declare class LibPixiNoticeBar extends Container {
+    /** 当前参数 */
+    private _params;
+    /** 文本队列 */
+    private _textQueue;
+    /** 当前显示的文本 */
+    private _currentText?;
+    constructor(params: Params);
+    /** @description 添加到队列 */
+    addText(...text: (Text | HTMLText)[]): void;
+    /** @description 显示文本 */
+    private _showText;
+}
+export {};

package/Components/Custom/LibPixiNoticeBar.js

@@ -0,0 +1,50 @@
+import gsap from "gsap";
+import { Container } from "pixi.js";
+import { LibPixiRectangle } from "../Base/LibPixiRectangle";
+/** @description 滚动通知栏 */
+export class LibPixiNoticeBar extends Container {
+    constructor(params) {
+        super();
+        /** 文本队列 */
+        this._textQueue = [];
+        this._params = params;
+        const { width, height } = params;
+        const rectangle = new LibPixiRectangle(width, height);
+        this.addChild(rectangle);
+        this.mask = rectangle;
+    }
+    /** @description 添加到队列 */
+    addText(...text) {
+        this._textQueue.push(...text);
+        if (this._currentText)
+            return;
+        this._showText();
+    }
+    /** @description 显示文本 */
+    _showText() {
+        this._currentText = this._textQueue.shift();
+        if (!this._currentText)
+            return;
+        this._params.onVisable(true);
+        this.addChild(this._currentText);
+        this._currentText.anchor.y = 0.5;
+        this._currentText.position.set(this._params.width, this._params.height / 2);
+        gsap.to(this._currentText, {
+            x: -this._currentText.width,
+            duration: (this._params.width + this._currentText.width) /
+                (this._params.speed || 100),
+            ease: "none",
+            onComplete: () => {
+                this._currentText.destroy();
+                this._currentText = undefined;
+                if (this._textQueue.length) {
+                    this._showText();
+                }
+                else {
+                    this._params.onVisable(false);
+                    this._currentText = undefined;
+                }
+            },
+        });
+    }
+}

package/Components/Custom/LibPixiTextGroupWrap.js

@@ -1,4 +1,5 @@
 import { Container, Text } from "pixi.js";
+import { libPixiPivot } from "../../Utils/LibPixiActhor";
 /** @description 文本组换行 */
 export class LibPixiTextGroupWrap extends Container {
     constructor({ items, defaultStyle = {}, wordWrapWidth, paddingX = 0, paddingY = 0, align = "left", anchorX = 0, anchorY = 0, }) {
@@ -44,7 +45,6 @@ export class LibPixiTextGroupWrap extends Container {
             y += maxHeight + paddingY;
         }
         // 根据 anchor 调整整体偏移
-        const bounds = this.getLocalBounds();
-        this.pivot.set(bounds.x + bounds.width * anchorX, bounds.y + bounds.height * anchorY);
+        libPixiPivot(this, anchorX, anchorY);
     }
 }

package/README.md

@@ -198,6 +198,8 @@ app.stage.addChild(box);
 
 \- [LibPixiTicker-Ticker管理器](#LibPixiTicker-Ticker管理器)
 
+\- [LibPixiPivot-容器锚点设置](#LibPixiPivot-容器锚点设置)
+
 ## Base-基础
 
 ### LibPixiText-文本
@@ -931,6 +933,10 @@ const amountContainer = new LibLabelValue({
 
 > 一列占满后进入下一列，支持从左到右或从右到左
 
+### LibPixiNoticeBar
+
+> 滚动跑马灯
+
 ## Utils-工具方法
 
 ### LibPixiAudio-音频播放器
@@ -1266,3 +1272,7 @@ LibPixiEmitContainerEvent(this, "EVENT_NAME", {});
 ### LibPixiTicker-Ticker管理器
 
 > 添加和删除 `Ticker` 函数，单个 `Ticker` 函数暂停开始，所有 `Ticker` 函数使用的是全局的 `Ticker`
+
+### LibPixiPivot-容器锚点设置
+
+> 给容器设置精准的 `Pivot`，但当容器大小改变时，需要重新调用

package/Utils/LibPixiActhor.d.ts

@@ -0,0 +1,3 @@
+import { Container } from "pixi.js";
+/** @description 容器锚点设置 */
+export declare const libPixiPivot: (container: Container, pivotX?: number, pivotY?: number) => void;

package/Utils/LibPixiActhor.js

@@ -0,0 +1,6 @@
+/** @description 容器锚点设置 */
+export const libPixiPivot = (container, pivotX = 0, pivotY = pivotX) => {
+    const { x, y, width, height } = container.getLocalBounds();
+    container.pivot.x = x + width * pivotX;
+    container.pivot.y = y + height * pivotY;
+};

package/Utils/LibPixiDialogManager/ui/LibPixiDialog.js

@@ -14,6 +14,7 @@ import { LibPixiMaskBg } from "../../../Components/Custom/LibPixiMaskBg";
 import { libPixiEvent } from "../../LibPixiEvent";
 import { LibPixiBaseContainer } from "./LibPixiBaseContainer";
 import { LibPixiTicker } from "../../LibPixiTicker";
+import { libPixiPivot } from "../../LibPixiActhor";
 /** @description 弹窗组件 */
 export class LibPixiDialog extends LibPixiBaseContainer {
     constructor(params) {
@@ -79,10 +80,7 @@ export class LibPixiDialog extends LibPixiBaseContainer {
     }
     /** @description 更新弹窗容器坐标 */
     updatePosition(w, h) {
-        const bounds = this._dialogContainer.getLocalBounds();
-        const dialogW = bounds.width / 2;
-        const dialogH = bounds.height / 2;
-        this._dialogContainer.pivot.set(bounds.x + dialogW, bounds.y + dialogH);
+        libPixiPivot(this._dialogContainer, 0.5, 0.5);
         const halfW = 1920 / 2;
         const halfH = 1080 / 2;
         if (w > h) {

package/package.json

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