lyb-pixi-js 1.1.11 → 1.1.13

package/Components/Custom/LibPixiButtonHover.js

@@ -0,0 +1,44 @@
+import { Container, Sprite } from "pixi.js";
+import { libPixiEvent } from "../../Utils/LibPixiEvent";
+/** @description 悬浮切换材质
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiButtonHover-按钮悬浮
+ */
+export class LibPixiButtonHover extends Container {
+    constructor(params) {
+        super();
+        const { texture, hoverTexture, tintColor } = params;
+        this._texture = texture;
+        this._hoverTexture = hoverTexture;
+        this._tintColor = tintColor;
+        //创建图标容器
+        const iconBox = new Container();
+        this.addChild(iconBox);
+        //创建图标
+        this._btn = new Sprite(texture);
+        iconBox.addChild(this._btn);
+        tintColor && (this._btn.tint = tintColor);
+        libPixiEvent(iconBox, "pointerenter", () => {
+            this._btn._texture = this._hoverTexture;
+            this._btn.tint = "#fff";
+        });
+        libPixiEvent(iconBox, "pointerleave", () => {
+            this._btn._texture = this._texture;
+            tintColor && (this._btn.tint = tintColor);
+        });
+    }
+    /** @description 切换材质
+     * @param texture 默认材质
+     * @param hoverTexture 悬浮材质
+     */
+    toggleTexture(texture, hoverTexture) {
+        this._texture = texture;
+        this._hoverTexture = hoverTexture;
+        this._btn._texture = hoverTexture;
+    }
+    /** @description 屏蔽
+     * @param status 状态
+     */
+    setDisabled(status) {
+        this._btn.tint = status ? "#7C7C7C" : this._tintColor || "#fff";
+    }
+}

package/Components/Custom/LibPixiCloseBtn.d.ts

@@ -0,0 +1,14 @@
+import { LibPixiContainer } from "../Base/LibPixiContainer";
+import type { Sprite } from "pixi.js";
+export interface LibPixiCloseBtnParams {
+    /** 按钮素材 */
+    sprite: Sprite;
+    /** 点击回调 */
+    onClick: () => void;
+}
+/** @description 右上角关闭按钮，支持悬浮旋转动画
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiCloseBtn-关闭按钮
+ */
+export declare class LibPixiCloseBtn extends LibPixiContainer {
+    constructor(params: LibPixiCloseBtnParams);
+}

package/Components/Custom/LibPixiCloseBtn.js

@@ -0,0 +1,35 @@
+import gsap from "gsap";
+import { LibPixiContainer } from "../Base/LibPixiContainer";
+import { libPixiEvent } from "../../Utils/LibPixiEvent";
+/** @description 右上角关闭按钮，支持悬浮旋转动画
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiCloseBtn-关闭按钮
+ */
+export class LibPixiCloseBtn extends LibPixiContainer {
+    constructor(params) {
+        const { sprite, onClick } = params;
+        super(sprite.width, sprite.height);
+        this.addChild(sprite);
+        sprite.anchor.set(0.5);
+        sprite.x = sprite.width / 2;
+        sprite.y = sprite.height / 2;
+        libPixiEvent(this, "pointerenter", () => {
+            gsap.to(sprite, {
+                duration: 0.25,
+                rotation: 180 * (Math.PI / 180),
+            });
+        });
+        libPixiEvent(this, "pointerleave", () => {
+            sprite.alpha = 1;
+            gsap.to(sprite, {
+                duration: 0.25,
+                rotation: 0,
+            });
+        });
+        libPixiEvent(this, "pointerdown", () => {
+            sprite.alpha = 0.5;
+        });
+        libPixiEvent(this, "pointerup", () => {
+            onClick();
+        });
+    }
+}

package/Components/Custom/LibPixiDrawer.d.ts

@@ -0,0 +1,16 @@
+import { Container } from "pixi.js";
+/** @description 底部弹出抽屉
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDrawer-抽屉
+ */
+export declare class LibPixiDrawer extends Container {
+    /** 蒙版UI */
+    private _maskUI;
+    /** 抽屉容器 */
+    private _drawerContainer;
+    /**
+     * @param content 抽屉内容
+     */
+    constructor(content: Container);
+    /** @description 关闭 */
+    close(): Promise<void>;
+}

package/Components/Custom/LibPixiDrawer.js

@@ -0,0 +1,59 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Container } from "pixi.js";
+import gsap from "gsap";
+import { LibPixiRectBgColor } from '../Base/LibPixiRectBgColor';
+/** @description 底部弹出抽屉
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDrawer-抽屉
+ */
+export class LibPixiDrawer extends Container {
+    /**
+     * @param content 抽屉内容
+     */
+    constructor(content) {
+        super();
+        //蒙版
+        this._maskUI = new LibPixiRectBgColor({
+            bgColor: "#000",
+            width: 1080,
+            height: 1920,
+        });
+        this.addChild(this._maskUI);
+        this._maskUI.alpha = 0;
+        this._maskUI.eventMode = "static";
+        //弹窗内容容器
+        this._drawerContainer = content;
+        this.addChild(this._drawerContainer);
+        this._drawerContainer.y = this._maskUI.height;
+        gsap.to(this._maskUI, {
+            duration: 0.25,
+            alpha: 0.5,
+        });
+        gsap.to(this._drawerContainer, {
+            duration: 0.25,
+            ease: "power1.out",
+            y: this._maskUI.height - this._drawerContainer.height,
+        });
+    }
+    /** @description 关闭 */
+    close() {
+        return __awaiter(this, void 0, void 0, function* () {
+            gsap.to(this._drawerContainer, {
+                duration: 0.25,
+                y: this._maskUI.height,
+            });
+            yield gsap.to(this._maskUI, {
+                duration: 0.25,
+                delay: 0.125,
+                alpha: 0,
+            });
+        });
+    }
+}

package/Components/Custom/LibPixiPerforMon.d.ts

@@ -0,0 +1,31 @@
+import { Application, Container } from "pixi.js";
+/** @description 监视帧率、Draw Call、Max Draw Call
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPerforMon-性能监视器
+ */
+export declare class LibPixiPerforMon extends Container {
+    /** 数据收集时间间隔 (5秒) */
+    private readonly COLLECT_TIME;
+    /** 当前时间 */
+    private _nowTime;
+    /** 上次更新的时间 */
+    private _lastTime;
+    /** 当前绘制调用次数 */
+    private _drawCount;
+    /** 最大绘制调用次数 */
+    private _maxDrawCount;
+    /** 临时最大绘制调用次数 */
+    private _tempMaxDrawCount;
+    /** 上次收集数据的时间 */
+    private _lastCollectTime;
+    /** 渲染器 */
+    private _renderer;
+    /** 存储每个性能指标的文本对象 */
+    private _paramTxts;
+    /** 原始的 drawElements 方法 */
+    private _drawElements;
+    constructor(app: Application);
+    /** @description 初始化显示性能数据 */
+    init(): void;
+    /** @description 更新文本信息 */
+    private _setTxtInfo;
+}

package/Components/Custom/LibPixiPerforMon.js

@@ -0,0 +1,107 @@
+import { Container, UPDATE_PRIORITY, Ticker, } from "pixi.js";
+import { LibPixiText } from '../Base/LibPixiText';
+/** @description 监视帧率、Draw Call、Max Draw Call
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPerforMon-性能监视器
+ */
+export class LibPixiPerforMon extends Container {
+    constructor(app) {
+        super();
+        /** 数据收集时间间隔 (5秒) */
+        this.COLLECT_TIME = 5 * 1000;
+        /** 当前时间 */
+        this._nowTime = 0;
+        /** 上次更新的时间 */
+        this._lastTime = 0;
+        /** 当前绘制调用次数 */
+        this._drawCount = 0;
+        /** 最大绘制调用次数 */
+        this._maxDrawCount = 0;
+        /** 临时最大绘制调用次数 */
+        this._tempMaxDrawCount = 0;
+        /** 上次收集数据的时间 */
+        this._lastCollectTime = 0;
+        /** 存储每个性能指标的文本对象 */
+        this._paramTxts = [];
+        for (let i = 0; i < 3; i++) {
+            const txt = new LibPixiText({
+                text: "",
+                fontWeight: "bold",
+                fontSize: 36,
+                shadow: ["#000", 45, 3, 5],
+                fontColor: "#fff",
+            });
+            this._paramTxts[i] = txt;
+            txt.x = 0;
+            txt.y = txt.height * i;
+            this.addChild(txt);
+            txt.alpha = 0.75;
+        }
+        this._renderer = app.renderer;
+        this._drawElements = this._renderer["gl"].drawElements;
+        this.init();
+    }
+    /** @description 初始化显示性能数据 */
+    init() {
+        this._renderer["gl"].drawElements = (...args) => {
+            this._drawElements.call(this._renderer["gl"], ...args);
+            this._drawCount++;
+        };
+        Ticker.shared.add(() => {
+            const fps = Ticker.system.FPS;
+            this._nowTime = performance.now();
+            if (this._nowTime - this._lastTime >= 100.0) {
+                this._setTxtInfo(0, Math.floor(fps).toFixed(0));
+                this._lastTime = this._nowTime;
+            }
+            if (this._nowTime - this._lastCollectTime < this.COLLECT_TIME) {
+                if (this._tempMaxDrawCount < this._drawCount) {
+                    this._tempMaxDrawCount = this._drawCount;
+                }
+            }
+            else {
+                this._maxDrawCount = this._tempMaxDrawCount;
+                this._tempMaxDrawCount = 0;
+                this._lastCollectTime = this._nowTime;
+            }
+            this._setTxtInfo(1, this._drawCount);
+            this._setTxtInfo(2, this._maxDrawCount);
+            this._drawCount = 0;
+        }, UPDATE_PRIORITY.UTILITY);
+    }
+    /** @description 更新文本信息 */
+    _setTxtInfo(p, v) {
+        const fpsColor = (v) => {
+            this._paramTxts[p].style.fill = "#fff";
+            if (v <= 30) {
+                this._paramTxts[p].style.fill = "yellow";
+            }
+            if (v <= 20) {
+                this._paramTxts[p].style.fill = "red";
+            }
+        };
+        const drawCallColor = (v) => {
+            this._paramTxts[p].style.fill = "#fff";
+            if (v >= 75) {
+                this._paramTxts[p].style.fill = "yellow";
+            }
+            if (v >= 100) {
+                this._paramTxts[p].style.fill = "red";
+            }
+        };
+        const paramMapping = [
+            () => {
+                fpsColor(v);
+                return `Fps：${v}`;
+            },
+            () => {
+                drawCallColor(v);
+                return `Draw Call：${v}`;
+            },
+            () => {
+                drawCallColor(v);
+                return `Max Draw Call：${v}`;
+            },
+        ];
+        this._paramTxts[p].text = paramMapping[p]();
+    }
+}

package/Components/Custom/LibPixiProgress.d.ts

@@ -0,0 +1,29 @@
+import { Container, type Texture } from "pixi.js";
+export interface LibPixiProgressParams {
+    /** 背景宽度 */
+    bgWidth: number;
+    /** 背景高度 */
+    bgHeight: number;
+    /** 进度条宽度 */
+    barWidth: number;
+    /** 进度条高度 */
+    barHeight: number;
+    /** 背景纹理 */
+    bgTexture: Texture;
+    /** 进度条纹理 */
+    barTexture: Texture;
+}
+/** @description 通过裁剪的方式显示进度条
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiProgress-进度条
+ */
+export declare class LibPixiProgress extends Container {
+    /** 光条图 */
+    private _progressBar;
+    /** 蒙版 */
+    private _maskGraphics;
+    constructor(params: LibPixiProgressParams);
+    /** @description 更新进度
+     * @param progress 进度值，范围从0到1
+     */
+    setProgress(progress: number): void;
+}

package/Components/Custom/LibPixiProgress.js

@@ -0,0 +1,36 @@
+import { Container, Graphics, Sprite } from "pixi.js";
+/** @description 通过裁剪的方式显示进度条
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiProgress-进度条
+ */
+export class LibPixiProgress extends Container {
+    constructor(params) {
+        super();
+        const { bgWidth, bgHeight, barWidth, barHeight, bgTexture, barTexture } = params;
+        // 背景图
+        const background = new Sprite(bgTexture);
+        this.addChild(background);
+        // 光条图
+        this._progressBar = new Sprite(barTexture);
+        this.addChild(this._progressBar);
+        this._progressBar.x = (bgWidth - barWidth) / 2;
+        this._progressBar.y = (bgHeight - barHeight) / 2;
+        // 创建蒙版
+        const mask = new Graphics();
+        mask.beginFill(0xffffff);
+        mask.drawRect(0, 0, 0, this._progressBar.height);
+        mask.endFill();
+        this._progressBar.addChild(mask);
+        this._progressBar.mask = mask;
+        this._maskGraphics = mask;
+    }
+    /** @description 更新进度
+     * @param progress 进度值，范围从0到1
+     */
+    setProgress(progress) {
+        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);
+        this._maskGraphics.endFill();
+    }
+}

package/Components/Custom/LibPixiScrollContainer.d.ts

@@ -0,0 +1,57 @@
+import { Container } from "pixi.js";
+import { LibPixiContainer } from "../Base/LibPixiContainer";
+export interface LibPixiScrollContainerParams {
+    /** 宽度 */
+    width: number;
+    /** 高度 */
+    height: number;
+    /** 滚动内容 */
+    scrollContent: Container;
+    /** 底部内边距 */
+    bottomMargin?: number;
+}
+/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainer-滚动容器
+ */
+export declare class LibPixiScrollContainer extends LibPixiContainer {
+    /** 开始位置 */
+    private _startY;
+    /** 惯性速度 */
+    private _velocity;
+    /** 上一次滚动时间 */
+    private _startTime;
+    /** 开始位置 */
+    private _startPosition;
+    /** 滚动速度 */
+    private _scrollSpeed;
+    /** 是否处于拖动状态 */
+    private _isDragging;
+    /** 滚动容器 */
+    _scrollContent: Container;
+    /** 遮罩 */
+    private _maskGraphics;
+    /** 滚动的内容 */
+    private _content;
+    constructor(params: LibPixiScrollContainerParams);
+    /** @description 设置滚动容器可视区宽高
+     * @param width 宽度
+     * @param height 高度
+     */
+    setDimensions(width: number, height: number): void;
+    /** @description 返回顶部 */
+    scrollToTop(): void;
+    /** @description 往滚动内容添加元素 */
+    addContent(container: Container): void;
+    /** @description 按下 */
+    private _onDragStart;
+    /** @description 拖动 */
+    private _onDragMove;
+    /** @description 拖动结束 */
+    private _onDragEnd;
+    /** @description 滚轮滚动 */
+    private _onWheelScroll;
+    /** @description 惯性动画 */
+    private _applyInertia;
+    /** @description 限制滚动范围 */
+    private _limitScrollRange;
+}

package/Components/Custom/LibPixiScrollContainer.js

@@ -0,0 +1,166 @@
+import { Container, Graphics, Sprite, } from "pixi.js";
+import { gsap } from "gsap";
+import { LibPixiContainer } from "../Base/LibPixiContainer";
+/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainer-滚动容器
+ */
+export class LibPixiScrollContainer extends LibPixiContainer {
+    constructor(params) {
+        const { width, height, scrollContent, bottomMargin = 50 } = params;
+        super(width, height);
+        /** 开始位置 */
+        this._startY = 0;
+        /** 惯性速度 */
+        this._velocity = 0;
+        /** 上一次滚动时间 */
+        this._startTime = 0;
+        /** 开始位置 */
+        this._startPosition = 0;
+        /** 滚动速度 */
+        this._scrollSpeed = 200;
+        /** 是否处于拖动状态 */
+        this._isDragging = false;
+        this._scrollContent = scrollContent;
+        // 创建内容容器
+        this._content = new Container();
+        this.addChild(this._content);
+        this._content.addChild(this._scrollContent);
+        // 创建底部占位
+        if (bottomMargin > 0) {
+            const bottom_box = new Sprite();
+            this._content.addChild(bottom_box);
+            bottom_box.y = this._content.height + bottomMargin;
+        }
+        // 创建遮罩
+        this._maskGraphics = new Graphics();
+        this.addChild(this._maskGraphics);
+        this._maskGraphics.clear();
+        this._maskGraphics.beginFill(0x000000);
+        this._maskGraphics.drawRect(0, 0, width, height);
+        this._maskGraphics.endFill();
+        this.mask = this._maskGraphics;
+        // 添加事件监听
+        this.eventMode = "static";
+        this.on("pointerdown", this._onDragStart, this);
+        this.on("pointermove", this._onDragMove, this);
+        this.on("pointerup", this._onDragEnd, this);
+        this.on("pointerupoutside", this._onDragEnd, this);
+        this.on("wheel", this._onWheelScroll, this);
+    }
+    /** @description 设置滚动容器可视区宽高
+     * @param width 宽度
+     * @param height 高度
+     */
+    setDimensions(width, height) {
+        // 更新遮罩尺寸
+        this._maskGraphics.clear();
+        this._maskGraphics.beginFill(0x000000);
+        this._maskGraphics.drawRect(0, 0, width, height);
+        this._maskGraphics.endFill();
+        this.setSize(width, height);
+    }
+    /** @description 返回顶部 */
+    scrollToTop() {
+        this._content.y = 0;
+    }
+    /** @description 往滚动内容添加元素 */
+    addContent(container) {
+        this._scrollContent.addChild(container);
+    }
+    /** @description 按下 */
+    _onDragStart(event) {
+        if (this._content.height <= this._maskGraphics.height)
+            return;
+        const position = event.getLocalPosition(this);
+        this._startY = position.y - this._content.y;
+        this._isDragging = true;
+        this._velocity = 0;
+        this._startTime = Date.now();
+        this._startPosition = this._content.y;
+        gsap.killTweensOf(this._content);
+    }
+    /** @description 拖动 */
+    _onDragMove(event) {
+        if (this._isDragging) {
+            const position = event.data.getLocalPosition(this);
+            const newPosition = position.y - this._startY;
+            this._content.y = newPosition;
+        }
+    }
+    /** @description 拖动结束 */
+    _onDragEnd() {
+        this._isDragging = false;
+        const currentTime = Date.now();
+        const deltaTime = currentTime - this._startTime; // 计算停留时间
+        if (deltaTime < 250) {
+            // 如果停留时间在阈值内，计算惯性速度
+            this._velocity = (this._content.y - this._startPosition) / deltaTime;
+            this._applyInertia();
+        }
+        else {
+            // 停留时间超出阈值，取消惯性
+            this._velocity = 0;
+        }
+        this._limitScrollRange();
+    }
+    /** @description 滚轮滚动 */
+    _onWheelScroll(event) {
+        // 如果内容高度小于遮罩高度，则不滚动
+        if (this._content.height <= this._maskGraphics.height)
+            return;
+        let y = this._content.y - event.deltaY * (this._scrollSpeed / 100);
+        //如果到达顶部，则不滚动
+        if (y > 0) {
+            y = 0;
+        }
+        //如果到达底部，则不滚动
+        else if (Math.abs(y) >= this._content.height - this._maskGraphics.height) {
+            y = -(this._content.height - this._maskGraphics.height);
+        }
+        gsap.to(this._content, {
+            duration: 0.25,
+            ease: "power1.out",
+            y,
+        });
+    }
+    /** @description 惯性动画 */
+    _applyInertia() {
+        gsap.to(this._content, {
+            y: this._content.y + this._velocity * 250,
+            duration: 0.5,
+            ease: "power1.out",
+            onUpdate: this._limitScrollRange.bind(this),
+        });
+    }
+    /** @description 限制滚动范围 */
+    _limitScrollRange() {
+        //如果内容顶部离开了滚动容器顶部，则归位
+        if (this._content.y > 0) {
+            gsap.to(this._content, {
+                duration: 0.75,
+                y: 0,
+                ease: "elastic.out",
+            });
+        }
+        // 如果滚动距离大于内容高度减去遮罩高度
+        else if (Math.abs(this._content.y) >=
+            this._content.height - this._maskGraphics.height) {
+            // 如果内容高度大于遮罩高度，则滚动到底部
+            if (this._content.height > this._maskGraphics.height) {
+                const y = -(this._content.height - this._maskGraphics.height);
+                gsap.to(this._content, {
+                    duration: 0.75,
+                    y,
+                    ease: "elastic.out",
+                });
+            }
+            // 否则静止不动
+            else {
+                gsap.to(this._content, {
+                    duration: 0.25,
+                    y: 0,
+                });
+            }
+        }
+    }
+}

package/Components/Custom/LibPixiScrollNum.d.ts

@@ -0,0 +1,62 @@
+import { Container } from "pixi.js";
+import { LibPixiContainer } from '../Base/LibPixiContainer';
+export interface LibPixiScrollNumParams {
+    /** 滚动区域宽度 */
+    width: number;
+    /** 滚动区域高度 */
+    height: number;
+    /** 一页高度 */
+    pageHeight: number;
+    /** 滚动的容器 */
+    content: Container;
+    /** 总数 */
+    pageNum: number;
+    /** 松手回调 */
+    slideCallback?: (index: number) => void;
+    /** 滚动回调 */
+    scrollCallback?: (y: number, index: number) => void;
+}
+/** @description 通过鼠标或手指拖动数字列选择数字
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
+ */
+export declare class LibPixiScrollNum extends LibPixiContainer {
+    /** 当前幻灯片索引 */
+    private _currentIndex;
+    /** 滚动区域高度 */
+    private _scrollHeight;
+    /** 滑动区域高度 */
+    private _slideHeight;
+    /** 记录拖动开始时的Y坐标 */
+    private _startY;
+    /** 偏移量 */
+    private _offsetY;
+    /** 最大索引 */
+    private _pageNum;
+    /** 记录开始时间 */
+    private _startTime;
+    /** 是否正在拖动 */
+    private _isDragging;
+    /** 滑动内容 */
+    private _slideArea;
+    /** 滑动回调 */
+    private _slideCallback?;
+    /** 滚动回调 */
+    private _scrollCallback?;
+    constructor(params: LibPixiScrollNumParams);
+    /** @description 更新坐标
+     * @param y Y坐标
+     * @param index 页数索引
+     */
+    updatePosition(y: number, index: number): void;
+    /** @description 滑动到指定索引
+     * @param index 页数索引
+     * @param animate 是否需要过渡动画
+     */
+    slideTo(index: number, animate?: boolean): void;
+    /** @description 开始拖动 */
+    private _onDragStart;
+    /** @description 拖动中 */
+    private _onDragMove;
+    /** @description 结束拖动 */
+    private _onDragEnd;
+}