lyb-pixi-js 1.12.40 → 1.12.42

package/Components/Base/LibPixiArc.d.ts

@@ -0,0 +1,16 @@
+import { Graphics } from "pixi.js";
+interface Params {
+    start: number;
+    end: number;
+    radius: number;
+    color: string;
+    strokeColor?: string;
+    thickness?: number;
+    alpha?: number;
+    anticlockwise?: boolean;
+}
+/** @description 弧形 */
+export declare class LibPixiArc extends Graphics {
+    constructor(params: Params);
+}
+export {};

package/Components/Base/LibPixiArc.js

@@ -0,0 +1,14 @@
+import { Graphics } from "pixi.js";
+/** @description 弧形 */
+export class LibPixiArc extends Graphics {
+    constructor(params) {
+        super();
+        const { start, end, radius, color, strokeColor, thickness, alpha = 1, anticlockwise = false } = params;
+        this.beginFill(color, alpha); // 半透明绿色填充
+        strokeColor && this.lineStyle(thickness, strokeColor); // 线宽为2，红色
+        this.moveTo(0, 0);
+        this.arc(0, 0, radius, start, end, anticlockwise);
+        this.closePath();
+        this.endFill();
+    }
+}

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/LibPixiCircular.d.ts

@@ -0,0 +1,7 @@
+import { Graphics } from "pixi.js";
+/** @description 圆形
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiCircular-圆形
+ */
+export declare class LibPixiCircular extends Graphics {
+    constructor(radius: number, color: string);
+}

package/Components/Base/LibPixiCircular.js

@@ -0,0 +1,12 @@
+import { Graphics } from "pixi.js";
+/** @description 圆形
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiCircular-圆形
+ */
+export class LibPixiCircular extends Graphics {
+    constructor(radius, color) {
+        super();
+        this.beginFill(color);
+        this.drawCircle(0, 0, radius);
+        this.endFill();
+    }
+}

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/LibPixiHtmlText.d.ts

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

package/Components/Base/LibPixiHtmlText.js

@@ -0,0 +1,30 @@
+import { HTMLText, } from "pixi.js";
+/** @description 自定义富文本类
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiHtmlText-富文本
+ */
+export class LibPixiHtmlText extends HTMLText {
+    constructor(options) {
+        const { text, fontSize = 36, fontColor = 0xffffff, stroke, strokeThickness, fontFamily = "Arial", fontWeight = "normal", wordWrapWidth, lineHeight = 1.25, align = "left", shadow, } = options;
+        super(text.toString(), {
+            fontSize,
+            wordWrap: !!wordWrapWidth,
+            wordWrapWidth,
+            fontWeight,
+            lineHeight: lineHeight * fontSize,
+            breakWords: !!wordWrapWidth,
+            fill: fontColor,
+            align,
+            whiteSpace: "pre-line",
+            fontFamily: fontFamily,
+            stroke: stroke ? stroke : "transparent",
+            strokeThickness: strokeThickness ? strokeThickness : 0,
+        });
+        if (shadow) {
+            this.style.dropShadow = true;
+            this.style.dropShadowColor = shadow[0];
+            this.style.dropShadowAngle = shadow[1] * (Math.PI / 180);
+            this.style.dropShadowBlur = shadow[2];
+            this.style.dropShadowDistance = shadow[3];
+        }
+    }
+}

package/Components/Base/LibPixiOval.d.ts

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

package/Components/Base/LibPixiOval.js

@@ -0,0 +1,10 @@
+import { Graphics } from "pixi.js";
+/** @description 椭圆 */
+export class LibPixiOval extends Graphics {
+    constructor(width, height, color) {
+        super();
+        this.beginFill(color);
+        this.drawEllipse(0, 0, width, height);
+        this.endFill();
+    }
+}

package/Components/Base/LibPixiParticleMove.d.ts

@@ -0,0 +1,101 @@
+import { Container } from "pixi.js";
+export interface LibPixiParticleMoveParams {
+    /** 粒子JSON资源 */
+    container: Container;
+    /** 运动时长 */
+    duration: number;
+    /** 粒子开始位置 */
+    start: {
+        x: number;
+        y: number;
+    };
+    /** 粒子控制点 */
+    control: {
+        x: number;
+        y: number;
+    }[];
+    /** 粒子结束点 */
+    end: {
+        x: number;
+        y: number;
+    };
+    /** 运动曲线 */
+    ease?: gsap.EaseString;
+    /** 是否显示控制点，调试使用 */
+    showControl?: boolean;
+    /** 是否循环，调试使用 */
+    loop?: boolean;
+    /** 是否启用粒子容器 */
+    enableParticleContainer?: boolean;
+    /** 粒子配置 */
+    particleConfig: {
+        /** 随机时长 */
+        lifetime: {
+            /** 最小时长 */
+            min: number;
+            /** 最大时长 */
+            max: number;
+        };
+        /** 混合模式 */
+        blendMode?: string;
+        /** 频率，秒/个 */
+        frequency?: number;
+        /** 透明度变化 */
+        alpha?: {
+            /** 开始透明度 */
+            start: number;
+            /** 结束透明度 */
+            end: number;
+        };
+        /** 颜色变化 */
+        color?: {
+            /** 开始颜色 */
+            start: string;
+            /** 结束颜色 */
+            end: string;
+        };
+        /** 随机缩放变化 */
+        scale?: {
+            /** 最小 */
+            start: number;
+            /** 最大 */
+            end: number;
+        };
+        /** 随机偏移角度变化 */
+        rotation?: {
+            /** 最小角度 */
+            min: number;
+            /** 最大角度 */
+            max: number;
+        };
+        /** 随机自身旋转角度变化 */
+        rotate?: {
+            /** 最小角度 */
+            min: number;
+            /** 最大角度 */
+            max: number;
+        };
+        /** 移动速度，像素 */
+        speed?: {
+            /** 开始速度，不能为0，可无限接近0 */
+            start: number;
+            /** 结束速度，开始速度会衰减到结束速度 */
+            end: number;
+        };
+    };
+    /** 头部粒子到达终点后触发，可在此设置隐藏动画，隐藏动画结束后调用 destroy 参数进行销毁 */
+    onDestroy?: (destroy: () => void) => void;
+}
+/** @description 利用贝塞尔曲线实现粒子移动
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiParticleMove-粒子容器
+ */
+export declare class LibPixiParticleMove extends Container {
+    private _particleContainer;
+    constructor(params: LibPixiParticleMoveParams);
+    /** @description 创建贝塞尔曲线路径点组 */
+    private _createBezierPoints;
+    /** @description 计算贝塞尔曲线单个路径衔接点 */
+    private _multiPointBezier;
+    /** @description 计算组合数 */
+    private _binomial;
+}

package/Components/Base/LibPixiParticleMove.js

@@ -0,0 +1,136 @@
+import { Container, ParticleContainer, Ticker } from "pixi.js";
+import { Emitter, upgradeConfig } 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, container, duration, ease = "power1.out", showControl = false, loop = false, enableParticleContainer = false, particleConfig, onDestroy, } = params;
+        const config = upgradeConfig({
+            lifetime: particleConfig.lifetime,
+            blendMode: particleConfig.blendMode,
+            frequency: particleConfig.frequency || 0.01,
+            maxParticles: 1 / (particleConfig.frequency || 0.01),
+            alpha: particleConfig.alpha,
+            scale: particleConfig.scale,
+            color: particleConfig.color,
+            startRotation: particleConfig.rotation,
+            rotationSpeed: particleConfig.rotate,
+            speed: particleConfig.speed,
+            pos: {
+                x: 0,
+                y: 0,
+            },
+        }, [container]);
+        if (enableParticleContainer) {
+            this._particleContainer = new ParticleContainer();
+        }
+        else {
+            this._particleContainer = new Container();
+        }
+        this.addChild(this._particleContainer);
+        // 初始化粒子发射器
+        const flyParticle = new Emitter(this._particleContainer, config);
+        // 创建贝塞尔曲线的路径
+        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,
+            repeatDelay: 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: () => {
+                if (onDestroy) {
+                    onDestroy(() => {
+                        flyParticle.emit = false;
+                        ticker.destroy();
+                        this.destroy({ children: true });
+                    });
+                }
+                else {
+                    gsap.to(this, {
+                        alpha: 0,
+                        duration: 1,
+                        onComplete: () => {
+                            flyParticle.emit = false;
+                            ticker.destroy();
+                            this.destroy({ children: true });
+                        },
+                    });
+                }
+            },
+        });
+        const ticker = new Ticker();
+        ticker.add(() => {
+            flyParticle.update(ticker.deltaMS / 1000);
+        });
+        ticker.start();
+    }
+    /** @description 创建贝塞尔曲线路径点组 */
+    _createBezierPoints(anchorPoints, pointsAmount, showControl) {
+        const points = [];
+        // 渲染控制点
+        if (showControl) {
+            anchorPoints.forEach((item, index) => {
+                //创建一个小圆点
+                const text = new LibPixiText({
+                    text: index + 1,
+                    fontSize: 20,
+                    stroke: "#000",
+                    strokeThickness: 1,
+                });
+                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;
+    }
+    /** @description 计算贝塞尔曲线单个路径衔接点 */
+    _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 };
+    }
+    /** @description 计算组合数 */
+    _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/LibPixiPolygon.d.ts

@@ -0,0 +1,7 @@
+import { Graphics, type IPointData } from "pixi.js";
+/** @description 多边形类，可用于一些场景的局部点击，传颜色是为了方便定位，最终可能需要将颜色隐藏掉
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygon-多边形
+ */
+export declare class LibPixiPolygon extends Graphics {
+    constructor(points: IPointData[] | number[], color?: string);
+}

package/Components/Base/LibPixiPolygon.js

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

package/Components/Base/LibPixiRectBgColor.d.ts

@@ -0,0 +1,41 @@
+import { Graphics } from "pixi.js";
+export interface LibPixiRectBgColorParams {
+    /** 宽度 */
+    width: number;
+    /** 高度 */
+    height: number;
+    /** 背景颜色 */
+    bgColor?: string | 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,95 @@
+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 { width, height, bgColor = "#fff", alpha = 1, radius = 0, borderWidth = 0, borderColor = "black", enableTint = true, } = options;
+        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);
+        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/LibPixiRectangle.d.ts

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