lyb-pixi-js 1.12.40 → 1.12.42

package/Components/Base/LibPixiRectangle.js

@@ -0,0 +1,15 @@
+import { Graphics } from "pixi.js";
+/** @description 矩形类，可用于一些场景的局部点击，传颜色是为了方便定位，最终可能需要将颜色隐藏掉
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectangle-矩形
+ */
+export class LibPixiRectangle extends Graphics {
+    constructor(width, height, color) {
+        super();
+        this.beginFill(color || 0x000000);
+        this.drawRect(0, 0, width, height);
+        this.endFill();
+        if (!color) {
+            this.alpha = 0;
+        }
+    }
+}

package/Components/Base/LibPixiRound.d.ts

@@ -0,0 +1,5 @@
+import { Graphics } from "pixi.js";
+/** @description 圆圈 */
+export declare class LibPixiRound extends Graphics {
+    constructor(width: number, radius: number, color: string);
+}

package/Components/Base/LibPixiRound.js

@@ -0,0 +1,9 @@
+import { Graphics } from "pixi.js";
+/** @description 圆圈 */
+export class LibPixiRound extends Graphics {
+    constructor(width, radius, color) {
+        super();
+        this.lineStyle(width, color);
+        this.drawCircle(0, 0, radius);
+    }
+}

package/Components/Base/LibPixiRoundedRect.d.ts

@@ -0,0 +1,5 @@
+import { Graphics } from "pixi.js";
+/** @description 圆角矩形 */
+export declare class LibPixiRoundedRect extends Graphics {
+    constructor(width: number, height: number, radius: number, color: string);
+}

package/Components/Base/LibPixiRoundedRect.js

@@ -0,0 +1,10 @@
+import { Graphics } from "pixi.js";
+/** @description 圆角矩形 */
+export class LibPixiRoundedRect extends Graphics {
+    constructor(width, height, radius, color) {
+        super();
+        this.beginFill(color);
+        this.drawRoundedRect(0, 0, width, height, radius);
+        this.endFill();
+    }
+}

package/Components/Base/LibPixiSpine.d.ts

@@ -0,0 +1,58 @@
+import { type Container } from "pixi.js";
+import { Spine } from "@pixi-spine/runtime-3.8";
+import "pixi-spine";
+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/Components/Base/LibPixiSpine.js

@@ -0,0 +1,128 @@
+import { Assets, Ticker } from "pixi.js";
+import { Spine } from "@pixi-spine/runtime-3.8";
+import gsap from "gsap";
+import "pixi-spine";
+/** @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.alpha = visible ? 1 : 0;
+        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 === undefined ? true : item.scaleFollow,
+                });
+            });
+        }
+        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.state.setAnimation(0, animationName, loop).listener = {
+                complete: () => {
+                    resolve();
+                },
+            };
+            setTimeout(() => {
+                this.alpha = 1;
+            });
+        });
+    }
+    /** @description 添加动画
+     * @param animationName 动画名称
+     * @param loop 是否循环播放
+     * @param delay 延迟播放时间
+     */
+    addAnimation(animationName = "animation", loop = false, delay = 0) {
+        return new Promise((resolve) => {
+            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({ children: true });
+    }
+    /** @description 更新渲染 */
+    _loop() {
+        if (this.destroyed) {
+            Ticker.system.remove(this._loopFn);
+            return;
+        }
+        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/Components/Base/LibPixiText.d.ts

@@ -0,0 +1,37 @@
+import { Text, type TextStyleAlign, type TextStyleFontWeight } from "pixi.js";
+export interface LibPixiTextParams {
+    /** 文本内容 */
+    text: string | number;
+    /**  字体大小 */
+    fontSize?: number;
+    /** 字体颜色 */
+    fontColor?: any;
+    /** 渐变方向 */
+    gradientDirection?: "v" | "h";
+    /** 描边颜色 */
+    stroke?: string | number;
+    /** 描边宽度 */
+    strokeThickness?: number;
+    /** 字体样式 */
+    fontFamily?: string;
+    /** 字体粗细 */
+    fontWeight?: TextStyleFontWeight;
+    /** 换行宽度 */
+    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 {
+    /** 字体 */
+    static fontFamily: string;
+    constructor(options: LibPixiTextParams);
+}

package/Components/Base/LibPixiText.js

@@ -0,0 +1,35 @@
+import { Text, TEXT_GRADIENT, 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, strokeThickness, fontFamily = "Arial", fontWeight = "normal", wordWrapWidth, lineHeight = 1, align = "left", indent = 0, shadow, gradientDirection, } = options;
+        const style = new TextStyle({
+            fontSize,
+            wordWrap: !!wordWrapWidth,
+            wordWrapWidth,
+            fontWeight,
+            lineHeight: lineHeight * fontSize,
+            breakWords: !!wordWrapWidth,
+            fill: fontColor,
+            align,
+            fontFamily: LibPixiText.fontFamily || fontFamily,
+            stroke: stroke ? stroke : "transparent",
+            strokeThickness: strokeThickness ? strokeThickness : 0,
+            lineJoin: "round",
+            fillGradientType: gradientDirection === "h"
+                ? TEXT_GRADIENT.LINEAR_HORIZONTAL
+                : TEXT_GRADIENT.LINEAR_VERTICAL,
+        });
+        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/Components/Custom/LibPixiAreaClick.d.ts

@@ -0,0 +1,6 @@
+import { Container } from "pixi.js";
+/** @description 扩大点击范围 */
+export declare class LibPixiAreaClick extends Container {
+    constructor(w: number, h: number);
+    push(container: Container): void;
+}

package/Components/Custom/LibPixiAreaClick.js

@@ -0,0 +1,16 @@
+import { Container, Sprite } from "pixi.js";
+/** @description 扩大点击范围 */
+export class LibPixiAreaClick extends Container {
+    constructor(w, h) {
+        super();
+        const fill = new Sprite();
+        this.addChild(fill);
+        fill.anchor.set(0.5);
+        fill.width = w;
+        fill.height = h;
+    }
+    push(container) {
+        this.addChild(container);
+        container.position.set(-container.width / 2, -container.height / 2);
+    }
+}

package/Components/Custom/LibPixiArrangeLinearV2.d.ts

@@ -0,0 +1,25 @@
+import { Container } from "pixi.js";
+export interface GridLayoutParams {
+    gap?: number | number[];
+    direction?: "x" | "y";
+    colNum?: number;
+    elementList?: any[];
+    anchorX?: number;
+    anchorY?: number;
+}
+/** @description 线性排列 */
+export declare class LibPixiArrangeLinearV2<T extends Container> extends Container {
+    /** 参数 */
+    private _params;
+    /** 元素列表 */
+    private _elementList;
+    constructor(params?: GridLayoutParams);
+    /** @description 追加元素 */
+    push(element: T): void;
+    /** @description 布局 */
+    layout(): void;
+    /** @description 获取列表元素 */
+    getList(): T[];
+    /** @description 销毁列表元素 */
+    destroyList(): void;
+}

package/Components/Custom/LibPixiArrangeLinearV2.js

@@ -0,0 +1,80 @@
+import { Container } from "pixi.js";
+/** @description 线性排列 */
+export class LibPixiArrangeLinearV2 extends Container {
+    constructor(params) {
+        super();
+        /** 元素列表 */
+        this._elementList = [];
+        this._params = params || {};
+        this._elementList = this._params.elementList || [];
+    }
+    /** @description 追加元素 */
+    push(element) {
+        this.addChild(element);
+        this._elementList.push(element);
+    }
+    /** @description 布局 */
+    layout() {
+        const { colNum = this._elementList.length, gap = 0, direction = "x", anchorX = 0, anchorY = 0, } = this._params;
+        let lastRowMax = 0; // 当前行（或列）的最大高度（或宽度），用于多行/多列换行时计算偏移
+        let rowOffset = 0; // 累计偏移量，控制换行后的整体偏移位置
+        this._elementList.forEach((item, index) => {
+            var _a, _b;
+            const row = Math.floor(index / colNum); // 当前行号
+            const col = index % colNum; // 当前列号
+            if (direction === "x") {
+                //间隔
+                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;
+                // 纵向位置 = 当前累计的行偏移
+                rowOffset && (item.y = rowOffset);
+                // 更新当前行的最大高度
+                lastRowMax = Math.max(lastRowMax, item.height);
+            }
+            else {
+                //间隔
+                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;
+                // 横向位置 = 当前累计的列偏移
+                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() {
+        return this._elementList;
+    }
+    /** @description 销毁列表元素 */
+    destroyList() {
+        this._elementList.forEach((item) => {
+            item.destroy();
+        });
+        this._elementList = [];
+    }
+}

package/Components/Custom/LibPixiButtonHover.d.ts

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

package/Components/Custom/LibPixiButtonHover.js

@@ -0,0 +1,53 @@
+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();
+        /** 是否被禁用 */
+        this.disabled = false;
+        const { texture, hoverTexture, tintColor, hoverTintColor = "#fff", disabledColor = "#999", } = params;
+        this._texture = texture;
+        this._hoverTexture = hoverTexture;
+        this._tintColor = tintColor;
+        this._disabledColor = disabledColor;
+        //创建图标
+        this._btn = new Sprite(texture);
+        this.addChild(this._btn);
+        this._btn.anchor.set(0.5);
+        tintColor && (this._btn.tint = tintColor);
+        libPixiEvent(this._btn, "pointerenter", () => {
+            if (this.disabled)
+                return;
+            this._btn.tint = hoverTintColor;
+            if (this._hoverTexture) {
+                this._btn._texture = this._hoverTexture;
+            }
+        });
+        libPixiEvent(this._btn, "pointerleave", () => {
+            if (this.disabled)
+                return;
+            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.disabled = status;
+        this._btn.tint = status ? this._disabledColor : this._tintColor || "#fff";
+        this._btn.texture = this._texture;
+    }
+}

package/Components/Custom/LibPixiCapsule.d.ts

@@ -0,0 +1,5 @@
+import { Graphics } from "pixi.js";
+/** @description 胶囊形 */
+export declare class LibPixiCapsule extends Graphics {
+    constructor(width: number, height: number, color: string);
+}

package/Components/Custom/LibPixiCapsule.js

@@ -0,0 +1,10 @@
+import { Graphics } from "pixi.js";
+/** @description 胶囊形 */
+export class LibPixiCapsule extends Graphics {
+    constructor(width, height, color) {
+        super();
+        this.beginFill(color);
+        this.drawRoundedRect(0, 0, width, height, width / 2);
+        this.endFill();
+    }
+}

package/Components/Custom/LibPixiCloseBtn.d.ts

@@ -0,0 +1,14 @@
+import type { Sprite } from "pixi.js";
+import { LibPixiContainer } from "../Base/LibPixiContainer";
+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,36 @@
+import gsap from "gsap";
+import { libPixiEvent } from "../../Utils/LibPixiEvent";
+import { LibPixiContainer } from "../Base/LibPixiContainer";
+/** @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),
+            });
+        });
+        const offLeave = libPixiEvent(this, "pointerleave", () => {
+            sprite.alpha = 1;
+            gsap.to(sprite, {
+                duration: 0.25,
+                rotation: 0,
+            });
+        });
+        libPixiEvent(this, "pointerdown", () => {
+            sprite.alpha = 0.5;
+        });
+        libPixiEvent(this, "pointertap", () => {
+            onClick();
+            offLeave();
+        });
+    }
+}

package/Components/Custom/LibPixiDragLocate.d.ts

@@ -0,0 +1,36 @@
+import { Container } from "pixi.js";
+/** @description 元素拖拽定位 */
+export declare class LibPixiDragLocate extends Container {
+    static stage: Container;
+    /** 输入框 */
+    private _inputEl;
+    /** 搜索结果 */
+    private _resultEl;
+    /** 状态栏元素 */
+    private _statusBarEl;
+    /** 坐标元素 */
+    private _positionEl;
+    /** 当前坐标值 */
+    private _positionValue;
+    /** 是否处于定位状态 */
+    private _isLocalte;
+    /** 是否显示输入框 */
+    private _showInput;
+    /** 是否允许移动 */
+    private _allowMove;
+    /** 按下坐标 */
+    private _downPos;
+    /** 当前处于移动的元素 */
+    private _currentMoveContainer?;
+    constructor();
+    /** @description 创建输入框 */
+    private _createInput;
+    /** @description 创建用于展示搜索结果的列表 */
+    private _createResultList;
+    /** @description 创建搜索结果元素 */
+    private _createResultEl;
+    /** @description 创建状态栏 */
+    private _createStatusBar;
+    /** @description 递归搜索 */
+    private _findByName;
+}