lyb-pixi-js 1.1.11 → 1.1.13

package/Components/Base/LibPixiBitText.d.ts

@@ -0,0 +1,20 @@
+import { BitmapText } from "pixi.js";
+/** @description 自定义位图文本
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiBitText-位图
+ */
+export declare class LibPixiBitText {
+    /** 字体名称 */
+    private _fontName;
+    private _defaultFontSize?;
+    /**
+     * @param fontName 字体名称
+     * @param defaultFontSize 默认字体大小
+     */
+    constructor(fontName: string, defaultFontSize?: number);
+    /** @description 创建位图文本
+     * @param text 文本内容
+     * @param fontSize 字体大小，不填则使用默认大小
+     * @returns 位图实例
+     */
+    createText(text: string | number, fontSize?: number): BitmapText;
+}

package/Components/Base/LibPixiBitText.js

@@ -0,0 +1,26 @@
+import { BitmapText } from "pixi.js";
+/** @description 自定义位图文本
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiBitText-位图
+ */
+export class LibPixiBitText {
+    /**
+     * @param fontName 字体名称
+     * @param defaultFontSize 默认字体大小
+     */
+    constructor(fontName, defaultFontSize) {
+        this._fontName = fontName;
+        this._defaultFontSize = defaultFontSize;
+    }
+    /** @description 创建位图文本
+     * @param text 文本内容
+     * @param fontSize 字体大小，不填则使用默认大小
+     * @returns 位图实例
+     */
+    createText(text, fontSize) {
+        const bitMapText = new BitmapText(text.toString(), {
+            fontName: this._fontName,
+            fontSize: this._defaultFontSize || fontSize,
+        });
+        return bitMapText;
+    }
+}

package/Components/Base/LibPixiContainer.d.ts

@@ -0,0 +1,22 @@
+import { Container } from "pixi.js";
+/** @description 自定义容器大小及背景色
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiContainer-容器
+ */
+export declare class LibPixiContainer extends Container {
+    /** 填充容器 */
+    private _fill?;
+    /** 背景色填充 */
+    private _bgColorFill?;
+    /**
+     * @param width 容器宽度
+     * @param height 容器高度
+     * @param bgColor 背景色
+     * @param overHidden 是否溢出裁剪
+     */
+    constructor(width: number, height: number, bgColor?: string, overHidden?: boolean);
+    /** @description 设置容器大小
+     * @param width 容器宽度
+     * @param height 容器高度
+     */
+    setSize(width: number, height: number): void;
+}

package/Components/Base/LibPixiContainer.js

@@ -0,0 +1,51 @@
+import { Container, Graphics, Sprite } from "pixi.js";
+import { LibPixiRectBgColor } from './LibPixiRectBgColor';
+/** @description 自定义容器大小及背景色
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiContainer-容器
+ */
+export class LibPixiContainer extends Container {
+    /**
+     * @param width 容器宽度
+     * @param height 容器高度
+     * @param bgColor 背景色
+     * @param overHidden 是否溢出裁剪
+     */
+    constructor(width, height, bgColor, overHidden) {
+        super();
+        if (overHidden) {
+            const mask = new Graphics();
+            mask.beginFill(0xffffff);
+            mask.drawRect(0, 0, width, height);
+            mask.endFill();
+            this.addChild(mask);
+            this.mask = mask;
+        }
+        if (bgColor) {
+            this._bgColorFill = new LibPixiRectBgColor({
+                width,
+                height,
+                bgColor,
+            });
+            this.addChild(this._bgColorFill);
+        }
+        else {
+            this._fill = new Sprite();
+            this._fill.width = width;
+            this._fill.height = height;
+            this.addChild(this._fill);
+        }
+    }
+    /** @description 设置容器大小
+     * @param width 容器宽度
+     * @param height 容器高度
+     */
+    setSize(width, height) {
+        if (this._fill) {
+            this._fill.width = width;
+            this._fill.height = height;
+        }
+        if (this._bgColorFill) {
+            this._bgColorFill.renderBg(width, height);
+        }
+    }
+}

package/Components/Base/LibPixiParticleMove.d.ts

@@ -0,0 +1,39 @@
+import { Container } from "pixi.js";
+import { type EmitterConfigV3 } from "@pixi/particle-emitter";
+export interface LibPixiParticleMoveParams {
+    /** 粒子JSON资源 */
+    json: EmitterConfigV3;
+    /** 运动时长 */
+    duration: number;
+    /** 粒子开始位置 */
+    start: {
+        x: number;
+        y: number;
+    };
+    /** 粒子控制点 */
+    control: {
+        x: number;
+        y: number;
+    }[];
+    /** 粒子结束点 */
+    end: {
+        x: number;
+        y: number;
+    };
+    /** 运动曲线 */
+    ease?: gsap.EaseString;
+    /** 是否显示控制点，调试使用 */
+    showControl?: boolean;
+    /** 是否循环，调试使用 */
+    loop?: boolean;
+}
+/** @description 利用贝塞尔曲线实现粒子移动
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiParticleMove-粒子容器
+ */
+export declare class LibPixiParticleMove extends Container {
+    private _particleContainer;
+    constructor(params: LibPixiParticleMoveParams);
+    private _createBezierPoints;
+    private _multiPointBezier;
+    private _binomial;
+}

package/Components/Base/LibPixiParticleMove.js

@@ -0,0 +1,100 @@
+import { Container, ParticleContainer, Ticker } from "pixi.js";
+import { Emitter } from "@pixi/particle-emitter";
+import gsap from "gsap";
+import { LibPixiText } from "./LibPixiText";
+/** @description 利用贝塞尔曲线实现粒子移动
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiParticleMove-粒子容器
+ */
+export class LibPixiParticleMove extends Container {
+    constructor(params) {
+        super();
+        const { start, control, end, json, duration, ease = "power1.out", showControl = false, loop = false, } = params;
+        this._particleContainer = new ParticleContainer();
+        this.addChild(this._particleContainer);
+        // 初始化粒子发射器
+        const flyParticle = new Emitter(this._particleContainer, json);
+        // 创建贝塞尔曲线的路径
+        const path = this._createBezierPoints([start, ...control, end], 100, showControl);
+        // 用来控制路径动画的对象
+        const flyObj = { pathThrough: 0 };
+        gsap.to(flyObj, {
+            duration,
+            pathThrough: path.length - 1,
+            repeat: loop ? -1 : 0,
+            ease,
+            onStart: () => {
+                flyParticle.emit = true;
+            },
+            onUpdate: () => {
+                const i = Math.floor(flyObj.pathThrough);
+                const p = path[i];
+                flyParticle.updateOwnerPos(p.x, p.y);
+            },
+            onComplete: () => {
+                gsap.to(this, {
+                    alpha: 0,
+                    duration: 0.5,
+                    onComplete: () => {
+                        flyParticle.emit = false;
+                        ticker.destroy();
+                        this.removeFromParent();
+                    },
+                });
+            },
+        });
+        const ticker = new Ticker();
+        ticker.add(() => {
+            flyParticle.update(1 / 75);
+        });
+        ticker.start();
+    }
+    _createBezierPoints(anchorPoints, pointsAmount, showControl) {
+        const points = [];
+        // 渲染控制点
+        if (showControl) {
+            anchorPoints.forEach((item, index) => {
+                //创建一个小圆点
+                const text = new LibPixiText({
+                    text: index + 1,
+                    fontSize: 16,
+                });
+                text.position.set(item.x, item.y);
+                this.addChild(text);
+            });
+        }
+        // 计算并存储贝塞尔曲线上的点
+        for (let i = 0; i < pointsAmount; i++) {
+            const point = this._multiPointBezier(anchorPoints, i / pointsAmount);
+            points.push(point);
+        }
+        return points;
+    }
+    _multiPointBezier(points, t) {
+        const len = points.length;
+        let x = 0, y = 0;
+        // 预计算组合数
+        const binomials = [];
+        for (let i = 0; i < len; i++) {
+            binomials[i] = this._binomial(len - 1, i);
+        }
+        // 计算贝塞尔曲线上的点
+        for (let i = 0; i < len; i++) {
+            const point = points[i];
+            const binom = binomials[i];
+            const factorT = Math.pow(t, i);
+            const factor1MinusT = Math.pow(1 - t, len - 1 - i);
+            x += point.x * factor1MinusT * factorT * binom;
+            y += point.y * factor1MinusT * factorT * binom;
+        }
+        return { x, y };
+    }
+    _binomial(n, k) {
+        if (k === 0 || k === n)
+            return 1;
+        let res = 1;
+        for (let i = 1; i <= k; i++) {
+            res = (res * (n - i + 1)) / i;
+        }
+        return res;
+    }
+}

package/Components/Base/LibPixiRectBgColor.d.ts

@@ -0,0 +1,45 @@
+import { Graphics } from "pixi.js";
+export interface LibPixiRectBgColorParams {
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 背景颜色 */
+    bgColor?: string | number;
+    /** x轴偏移 */
+    x?: number;
+    /** y轴偏移 */
+    y?: number;
+    /** 透明度 */
+    alpha?: number;
+    /** 圆角半径 */
+    radius?: number | number[];
+    /** 边框宽度 */
+    borderWidth?: number;
+    /** 边框颜色 */
+    borderColor?: string;
+    /** 是否启用变色功能 */
+    enableTint?: boolean;
+}
+/** @description 自定义矩形背景色
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
+ */
+export declare class LibPixiRectBgColor extends Graphics {
+    /** 圆边大小 */
+    private radius;
+    /** 启用着色 */
+    private enableTint;
+    /** 背景颜色 */
+    private bgColor;
+    /** 边框宽度 */
+    private borderWidth;
+    /** 边框颜色 */
+    private borderColor;
+    /** 背景色 */
+    private bgAlpha;
+    constructor(options: LibPixiRectBgColorParams);
+    /** @description 重新绘制并添加颜色 */
+    updateColor(tint: string): void;
+    /** @description 更新宽度 */
+    renderBg(width: number, height: number): void;
+}

package/Components/Base/LibPixiRectBgColor.js

@@ -0,0 +1,98 @@
+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/Components/Base/LibPixiSpine.d.ts

@@ -0,0 +1,57 @@
+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/Components/Base/LibPixiSpine.js

@@ -0,0 +1,122 @@
+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/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;
+    /** 是否描边 */
+    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/Components/Base/LibPixiText.js

@@ -0,0 +1,32 @@
+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/Components/Custom/LibPixiButtonHover.d.ts

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