lyb-pixi-js 1.1.7 → 1.1.11

package/dist/Components/Base/LibPixiRectBgColor.js

@@ -1,98 +0,0 @@
-import { Graphics } from "pixi.js";
-import gsap from "gsap";
-/** @description 自定义矩形背景色
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
- */
-export class LibPixiRectBgColor extends Graphics {
-    constructor(options) {
-        super();
-        /** 圆边大小 */
-        this.radius = 0;
-        /** 启用着色 */
-        this.enableTint = true;
-        /** 背景颜色 */
-        this.bgColor = "#fff";
-        /** 边框宽度 */
-        this.borderWidth = 0;
-        /** 边框颜色 */
-        this.borderColor = "black";
-        /** 背景色 */
-        this.bgAlpha = 1;
-        const { x = 0, y = 0, width = 0, height = 0, bgColor = "#fff", alpha = 1, radius = 0, borderWidth = 0, borderColor = "black", enableTint = true, } = options;
-        this.x = x;
-        this.y = y;
-        this.bgAlpha = alpha;
-        this.radius = radius;
-        this.enableTint = enableTint;
-        this.bgColor = bgColor;
-        this.borderWidth = borderWidth;
-        this.borderColor = borderColor;
-        this.renderBg(width, height);
-    }
-    /** @description 重新绘制并添加颜色 */
-    updateColor(tint) {
-        gsap.to(this, { tint, duration: 0.25 });
-    }
-    /** @description 更新宽度 */
-    renderBg(width, height) {
-        this.clear();
-        if (this.enableTint) {
-            this.beginFill("#fff", this.bgAlpha);
-            this.tint = this.bgColor;
-        }
-        else {
-            this.beginFill(this.bgColor, this.bgAlpha);
-            this.borderWidth && this.lineStyle(this.borderWidth, this.borderColor, 1);
-        }
-        this.borderWidth && this.lineStyle(this.borderWidth, this.borderColor, 1);
-        if (this.radius !== 0) {
-            if (typeof this.radius === "number") {
-                this.drawRoundedRect(0, 0, width, height, this.radius);
-            }
-            else {
-                // 绘制顶部边
-                this.moveTo(0 + this.radius[0], 0);
-                this.lineTo(0 + width - this.radius[1], 0);
-                // 绘制右上角的圆角
-                if (this.radius[1] > 0) {
-                    this.arcTo(0 + width, 0, 0 + width, 0 + this.radius[1], this.radius[1]);
-                }
-                else {
-                    this.lineTo(0 + width, 0);
-                }
-                // 绘制右侧边
-                this.lineTo(0 + width, 0 + height - this.radius[2]);
-                // 绘制右下角的圆角
-                if (this.radius[2] > 0) {
-                    this.arcTo(0 + width, 0 + height, 0 + width - this.radius[2], 0 + height, this.radius[2]);
-                }
-                else {
-                    this.lineTo(0 + width, 0 + height);
-                }
-                // 绘制底部边
-                this.lineTo(0 + this.radius[3], 0 + height);
-                // 绘制左下角的圆角
-                if (this.radius[3] > 0) {
-                    this.arcTo(0, 0 + height, 0, 0 + height - this.radius[3], this.radius[3]);
-                }
-                else {
-                    this.lineTo(0, 0 + height);
-                }
-                // 绘制左侧边
-                this.lineTo(0, 0 + this.radius[0]);
-                // 绘制左上角的圆角
-                if (this.radius[0] > 0) {
-                    this.arcTo(0, 0, 0 + this.radius[0], 0, this.radius[0]);
-                }
-                else {
-                    this.lineTo(0, 0);
-                }
-                this.closePath();
-            }
-        }
-        else {
-            this.drawRect(0, 0, width, height);
-        }
-        this.endFill();
-    }
-}

package/dist/Components/Base/LibPixiSpine.d.ts

@@ -1,57 +0,0 @@
-import { type Container } from "pixi.js";
-import { Spine } from "@pixi-spine/runtime-3.8";
-export interface OnUpdateParams {
-    x: number;
-    y: number;
-    rotate: number;
-    scaleX: number;
-    scaleY: number;
-}
-export interface LibPixiSpineParams {
-    /** 默认是否可见 */
-    visible?: boolean;
-    /** 挂点列表 */
-    followPointList?: {
-        /** 挂点名称 */
-        boneName: string;
-        /** 跟随的精灵或容器 */
-        follow: Container;
-        /** 是否启用角度 */
-        angleFollow?: boolean;
-        /** 是否启用缩放 */
-        scaleFollow?: boolean;
-        /** 更新回调,不传则接受内置挂点更新 */
-        onUpdate?: (config: OnUpdateParams) => void;
-    }[];
-}
-/** @description 自定义 Spine 动画
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSpine-动画
- */
-export declare class LibPixiSpine extends Spine {
-    /** 挂点 */
-    private _followDots;
-    /** 是否已开始 */
-    private _isStart;
-    /** spine更新函数 */
-    private _loopFn;
-    constructor(spineNameOrTexture: string | any, params?: LibPixiSpineParams);
-    /** @description 设置动画
-     * @param animationName 动画名称
-     * @param loop 是否循环播放
-     */
-    setAnimation(animationName?: string, loop?: boolean): Promise<void>;
-    /** @description 添加动画
-     * @param animationName 动画名称
-     * @param loop 是否循环播放
-     * @param delay 延迟播放时间
-     */
-    addAnimation(animationName?: string, loop?: boolean, delay?: number): Promise<void>;
-    /** @description 改变骨骼数据 */
-    setSkin(skinName: string): void;
-    /** @description 销毁动画及挂点 */
-    destroyAll(): void;
-    /** @description 更新渲染 */
-    private _loop;
-    /** @description 更新挂点 */
-    private _updateFollowPoint;
-}

package/dist/Components/Base/LibPixiSpine.js

@@ -1,122 +0,0 @@
-import { Assets, Ticker } from "pixi.js";
-import { Spine } from "@pixi-spine/runtime-3.8";
-import gsap from "gsap";
-/** @description 自定义 Spine 动画
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSpine-动画
- */
-export class LibPixiSpine extends Spine {
-    constructor(spineNameOrTexture, params) {
-        const { followPointList, visible = false } = params || {};
-        let spineData;
-        if (typeof spineNameOrTexture === "string") {
-            spineData = Assets.get(spineNameOrTexture).spineData;
-        }
-        else {
-            spineData = spineNameOrTexture.spineData;
-        }
-        super(spineData);
-        /** 挂点 */
-        this._followDots = [];
-        /** 是否已开始 */
-        this._isStart = false;
-        this.visible = visible;
-        this.autoUpdate = false;
-        //如果存在挂点
-        if (followPointList === null || followPointList === void 0 ? void 0 : followPointList.length) {
-            followPointList === null || followPointList === void 0 ? void 0 : followPointList.forEach((item) => {
-                item.follow.alpha = 0;
-                this._followDots.push({
-                    point: this.skeleton.findBone(item.boneName),
-                    follow: item.follow,
-                    onUpdate: item.onUpdate,
-                    angleFollow: item.angleFollow || false,
-                    scaleFollow: item.scaleFollow || true,
-                });
-            });
-        }
-        this._loopFn = this._loop.bind(this);
-        Ticker.system.add(this._loopFn);
-    }
-    /** @description 设置动画
-     * @param animationName 动画名称
-     * @param loop 是否循环播放
-     */
-    setAnimation(animationName = "animation", loop = false) {
-        return new Promise((resolve) => {
-            this.visible = true;
-            this.state.setAnimation(0, animationName, loop).listener = {
-                complete: () => {
-                    resolve();
-                },
-            };
-        });
-    }
-    /** @description 添加动画
-     * @param animationName 动画名称
-     * @param loop 是否循环播放
-     * @param delay 延迟播放时间
-     */
-    addAnimation(animationName = "animation", loop = false, delay = 0) {
-        return new Promise((resolve) => {
-            this.visible = true;
-            this.state.addAnimation(0, animationName, loop, delay).listener = {
-                complete: () => {
-                    resolve();
-                },
-            };
-        });
-    }
-    /** @description 改变骨骼数据 */
-    setSkin(skinName) {
-        this.skeleton.setSkinByName(skinName);
-    }
-    /** @description 销毁动画及挂点 */
-    destroyAll() {
-        Ticker.system.remove(this._loopFn);
-        this.destroy();
-    }
-    /** @description 更新渲染 */
-    _loop() {
-        this.update(Ticker.system.deltaMS / 1000);
-        this._updateFollowPoint();
-    }
-    /** @description 更新挂点 */
-    _updateFollowPoint() {
-        if (this._followDots.length === 0)
-            return;
-        this._followDots.forEach((item) => {
-            const { worldX: x, worldY: y } = item.point;
-            const rotate = item.point.getWorldRotationX() * (Math.PI / 180);
-            const scaleX = item.point.getWorldScaleX();
-            const scaleY = item.point.getWorldScaleY();
-            if (item.onUpdate) {
-                item.onUpdate({
-                    x,
-                    y,
-                    rotate,
-                    scaleX,
-                    scaleY,
-                });
-            }
-            else {
-                if (item.angleFollow) {
-                    item.follow.rotation = rotate;
-                }
-                if (item.scaleFollow) {
-                    item.follow.scale.set(scaleX, scaleY);
-                }
-                item.follow.position.set(x + 1920 / 2 - item.follow.width / 2, y + 1080 / 2 - item.follow.height / 2);
-            }
-        });
-        if (!this._isStart) {
-            this._isStart = true;
-            this._followDots.forEach((item) => {
-                gsap.to(item.follow, {
-                    alpha: 1,
-                    duration: 0.25,
-                    delay: 0.15,
-                });
-            });
-        }
-    }
-}

package/dist/Components/Base/LibPixiText.d.ts

@@ -1,37 +0,0 @@
-import { Text, type TextStyleAlign, type TextStyleFontWeight } from "pixi.js";
-export interface LibPixiTextParams {
-    /** 文本内容 */
-    text: string | number;
-    /**  字体大小 */
-    fontSize?: number;
-    /** 字体颜色 */
-    fontColor?: any;
-    /** 是否描边 */
-    stroke?: boolean;
-    /** 描边颜色 */
-    strokeColor?: string | number;
-    /** 描边宽度 */
-    strokeThickness?: number;
-    /** 字体样式 */
-    fontFamily?: string;
-    /** 字体粗细 */
-    fontWeight?: TextStyleFontWeight;
-    /** 是否换行 */
-    wordWrap?: boolean;
-    /** 换行宽度 */
-    wordWrapWidth?: number;
-    /** 行高 */
-    lineHeight?: number;
-    /** 对齐方式 */
-    align?: TextStyleAlign;
-    /** 缩进，单位为字数 */
-    indent?: number;
-    /** 阴影-颜色 角度 模糊度 阴影距离 */
-    shadow?: [string, number, number, number];
-}
-/** @description 自定义文本类
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiText-文本
- */
-export declare class LibPixiText extends Text {
-    constructor(options: LibPixiTextParams);
-}

package/dist/Components/Base/LibPixiText.js

@@ -1,32 +0,0 @@
-import { Text, TextStyle } from "pixi.js";
-/** @description 自定义文本类
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiText-文本
- */
-export class LibPixiText extends Text {
-    constructor(options) {
-        const { text, fontSize = 36, fontColor = 0xffffff, stroke, strokeColor, strokeThickness, fontFamily = "MicrosoftYaHei", fontWeight = "normal", wordWrap = false, wordWrapWidth = 100, lineHeight = 1.25, align = "left", indent = 0, shadow, } = options;
-        const style = new TextStyle({
-            fontSize,
-            wordWrap,
-            wordWrapWidth,
-            fontWeight,
-            lineHeight: lineHeight * fontSize,
-            breakWords: wordWrap,
-            fill: fontColor,
-            align,
-            fontFamily: fontFamily,
-            stroke: stroke ? strokeColor : "transparent",
-            strokeThickness: stroke ? strokeThickness : 0,
-            lineJoin: "round",
-        });
-        if (shadow) {
-            style.dropShadow = true;
-            style.dropShadowColor = shadow[0];
-            style.dropShadowAngle = shadow[1] * (Math.PI / 180);
-            style.dropShadowBlur = shadow[2];
-            style.dropShadowDistance = shadow[3];
-        }
-        super(text, style);
-        this.position.x = indent * fontSize;
-    }
-}

package/dist/Components/Custom/LibPixiButtonHover.d.ts

@@ -1,32 +0,0 @@
-import { Container, type Texture } from "pixi.js";
-export interface LibPixiButtonHoverParams {
-    /** 图标资源 */
-    texture: Texture;
-    /** 悬浮图标 */
-    hoverTexture: Texture;
-    /** 染色 */
-    tintColor?: string;
-}
-/** @description 悬浮切换材质
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiButtonHover-按钮悬浮
- */
-export declare class LibPixiButtonHover extends Container {
-    /** 按钮 */
-    private _btn;
-    /** 默认材质 */
-    private _texture;
-    /** 悬浮材质 */
-    private _hoverTexture;
-    /** 染色 */
-    private _tintColor?;
-    constructor(params: LibPixiButtonHoverParams);
-    /** @description 切换材质
-     * @param texture 默认材质
-     * @param hoverTexture 悬浮材质
-     */
-    toggleTexture(texture: Texture, hoverTexture: Texture): void;
-    /** @description 屏蔽
-     * @param status 状态
-     */
-    setDisabled(status: boolean): void;
-}

package/dist/Components/Custom/LibPixiButtonHover.js

@@ -1,44 +0,0 @@
-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/dist/Components/Custom/LibPixiCloseBtn.d.ts

@@ -1,14 +0,0 @@
-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/dist/Components/Custom/LibPixiCloseBtn.js

@@ -1,35 +0,0 @@
-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/dist/Components/Custom/LibPixiDrawer.d.ts

@@ -1,16 +0,0 @@
-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/dist/Components/Custom/LibPixiDrawer.js

@@ -1,59 +0,0 @@
-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/dist/Components/Custom/LibPixiPerforMon.d.ts

@@ -1,31 +0,0 @@
-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;
-}