lyb-pixi-js 1.0.1 → 1.0.3

package/README.md

@@ -15,7 +15,7 @@
 ```ts
 import { LibPixiJs } from "lyb-pixi-js";
 
-const text = new LibPixiJs.Base.LibText({
+const text = new LibPixiJs.Base.LibPixiText({
   text: "Hello World!",
   fontSize: 50,
   fontColor:"red",
@@ -26,9 +26,9 @@ app.stage.addChild(text);
 > 按需引入，打包时就不会把整个库打进去
 
 ```ts
-import { LibRectBgColor } from "lyb-pixi-js/dist/Base/LibRectBgColor";
+import { LibRectBgColor } from "lyb-pixi-js/dist/Base/LibPixiRectBgColor";
 
-const box = new LibRectBgColor({
+const box = new LibPixiRectBgColor({
   width: 100,
   height: 100,
   bgColor: "red",
@@ -40,20 +40,20 @@ app.stage.addChild(box);
 
 ```ts
 //你的公共工具函数文件 utils.ts
-export * from "lyb-pixi-js/dist/Base/LibText";
-export * from "lyb-pixi-js/dist/Base/LibRectBgColor";
+export * from "lyb-pixi-js/dist/Base/LibPixiText";
+export * from "lyb-pixi-js/dist/Base/LibPixiRectBgColor";
 
 //你的项目文件 index.ts
 import { LibText,LibRectBgColor } from "utils";
 
-const text = new LibText({
+const text = new LibPixiText({
   text: "Hello World!",
   fontSize: 50,
   fontColor:"red",
 });
 app.stage.addChild(text);
 
-const box = new LibRectBgColor({
+const box = new LibPixiRectBgColor({
   width: 100,
   height: 100,
   bgColor: "red",
@@ -69,7 +69,7 @@ app.stage.addChild(box);
 <script src="https://unpkg.com/lyb-pixi-js/umd/lyb-pixi.js"></script>
 
 <script>
-const text = new LibPixiJs.Base.LibText({
+const text = new LibPixiJs.Base.LibPixiText({
   text: "Hello World!",
   fontSize: 50,
   fontColor:"red",
@@ -82,27 +82,27 @@ app.stage.addChild(text);
 
 ### 基础
 
-\- [LibText-文本](#LibText-文本)
+\- [LibPixiText-文本](#LibPixiText-文本)
 
-\- [LibBitText-位图](#LibBitText-位图)
+\- [LibPixiBitText-位图](#LibPixiBitText-位图)
 
-\- [LibContainer-容器](#LibContainer-容器)
+\- [LibPixiContainer-容器](#LibPixiContainer-容器)
 
-\- [LibRectBgColor-矩形](#LibRectBgColor-矩形)
+\- [LibPixiRectBgColor-矩形](#LibPixiRectBgColor-矩形)
 
-\- [LibSpine-动画](#LibSpine-动画)
+\- [LibPixiSpine-动画](#LibPixiSpine-动画)
 
-\- [LibParticleMove-粒子容器](#LibParticleMove-粒子容器)
+\- [LibPixiParticleMove-粒子容器](#LibPixiParticleMove-粒子容器)
 
 
 ## Base-基础
 
-### LibText-文本
+### LibPixiText-文本
 
 > 自定义文本类
 
 ```ts
-const text = new LibPixiJs.Base.LibText({
+const text = new LibPixiJs.Base.LibPixiText({
   text: "Hello World!",
   fontSize: 50,
   fontColor:"red",
@@ -110,30 +110,30 @@ const text = new LibPixiJs.Base.LibText({
 this.addChild(text);
 ```
 
-### LibBitText-位图
+### LibPixiBitText-位图
 
 > 自定义位图文本
 
 ```ts
 //所有文字使用同一个字体大小
-const font = new LibBitText("FontName", 16);
+const font = new LibPixiBitText("FontName", 16);
 const fontText = font.createText("10");
 this.addChild(fontText);
 
 //同字体不同大小
-const font = new LibBitText("FontName");
+const font = new LibPixiBitText("FontName");
 const fontText1 = font.createText("10", 16);
 this.addChild(fontText1);
 const fontText2 = font.createText("10", 24);
 this.addChild(fontText2);
 ```
 
-### LibContainer-容器
+### LibPixiContainer-容器
 
 > 自定义容器大小及背景色
 
 ```ts
-const box = new LibPixiJs.Base.LibContainer({
+const box = new LibPixiJs.Base.LibPixiContainer({
   width: 100,
   height: 100,
   bgColor: "#fff",
@@ -142,12 +142,12 @@ const box = new LibPixiJs.Base.LibContainer({
 this.addChild(box);
 ```
 
-### LibRectBgColor-矩形
+### LibPixiRectBgColor-矩形
 
 > 自定义矩形背景色
 
 ```ts
-const rect = new LibRectBgColor({
+const rect = new LibPixiRectBgColor({
   width: 100,
   height: 100,
   bgColor: "red",
@@ -155,19 +155,19 @@ const rect = new LibRectBgColor({
 this.addChild(rect);
 ```
 
-### LibSpine-动画
+### LibPixiSpine-动画
 
 > 自定义 Spine 动画，内置挂点
 
 ```ts
 //基础使用
-const spine = new LibSpine(Assets.get("lihe"));
+const spine = new LibPixiSpine(Assets.get("lihe"));
 spine.setAnimation("in");
 spine.addAnimation("idle", true);
 this.addChild(spine);
 
 //挂点
-this.bgSpine = new LibSpine("spine_buyfree", {
+this.bgSpine = new LibPixiSpine("spine_buyfree", {
   followPointList: [
     {
       boneName: "aaa",
@@ -189,12 +189,12 @@ this.bgSpine = new LibSpine("spine_buyfree", {
 });
 ```
 
-### LibParticleMove-粒子容器
+### LibPixiParticleMove-粒子容器
 
 > 利用贝塞尔曲线实现粒子移动
 
 ```ts
-const libParticleMove = new LibPixiJs.Base.LibParticleMove({
+const libPixiParticleMove = new LibPixiJs.Base.LibPixiParticleMove({
   start: { x: 300, y: 600 },
   control: [
     { x: 600, y: 500 },

package/dist/Base/LibPixiBitText/index.d.ts

@@ -0,0 +1,18 @@
+import { BitmapText } from "pixi.js";
+/** @description 自定义位图文本 */
+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/dist/Base/LibPixiBitText/index.js

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

package/dist/Base/LibPixiContainer/index.d.ts

@@ -0,0 +1,27 @@
+import { Container } from "pixi.js";
+interface LibPixiContainerParams {
+    /** 宽度 */
+    width: number;
+    /** 高度 */
+    height: number;
+    /** 溢出裁剪 */
+    overHidden?: boolean;
+    /** 背景色 */
+    bgColor?: string;
+}
+/** @description 自定义容器大小及背景色 */
+export declare class LibPixiContainer extends Container {
+    /** 填充容器 */
+    private _fill?;
+    /** 背景色填充 */
+    private _bgColorFill?;
+    /**
+     * @param width 容器宽度
+     * @param height 容器高度
+     * @param bgColor 背景色
+     */
+    constructor(params: LibPixiContainerParams);
+    /** @description 设置容器大小 */
+    setSize(width: number, height: number): void;
+}
+export {};

package/dist/Base/LibPixiContainer/index.js

@@ -0,0 +1,65 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Container, Graphics, Sprite } from "pixi.js";
+import { LibPixiRectBgColor } from "../LibPixiRectBgColor";
+/** @description 自定义容器大小及背景色 */
+var LibPixiContainer = /** @class */ (function (_super) {
+    __extends(LibPixiContainer, _super);
+    /**
+     * @param width 容器宽度
+     * @param height 容器高度
+     * @param bgColor 背景色
+     */
+    function LibPixiContainer(params) {
+        var _this = _super.call(this) || this;
+        var width = params.width, height = params.height, overHidden = params.overHidden, bgColor = params.bgColor;
+        if (overHidden) {
+            var 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: width,
+                height: height,
+                bgColor: bgColor,
+            });
+            _this.addChild(_this._bgColorFill);
+        }
+        else {
+            _this._fill = new Sprite();
+            _this._fill.width = width;
+            _this._fill.height = height;
+            _this.addChild(_this._fill);
+        }
+        return _this;
+    }
+    /** @description 设置容器大小 */
+    LibPixiContainer.prototype.setSize = function (width, height) {
+        if (this._fill) {
+            this._fill.width = width;
+            this._fill.height = height;
+        }
+        if (this._bgColorFill) {
+            this._bgColorFill.renderBg(width, height);
+        }
+    };
+    return LibPixiContainer;
+}(Container));
+export { LibPixiContainer };

package/dist/Base/LibPixiParticleMove/index.d.ts

@@ -0,0 +1,37 @@
+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 利用贝塞尔曲线实现粒子移动 */
+export declare class LibPixiParticleMove extends Container {
+    private _particleContainer;
+    constructor(params: LibPixiParticleMoveParams);
+    private _createBezierPoints;
+    private _multiPointBezier;
+    private _binomial;
+}

package/dist/Base/LibPixiParticleMove/index.js

@@ -0,0 +1,127 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { Container, ParticleContainer, Ticker } from "pixi.js";
+import { Emitter } from "@pixi/particle-emitter";
+import gsap from "gsap";
+import { LibPixiText } from "../LibPixiText";
+/** @description 利用贝塞尔曲线实现粒子移动 */
+var LibPixiParticleMove = /** @class */ (function (_super) {
+    __extends(LibPixiParticleMove, _super);
+    function LibPixiParticleMove(params) {
+        var _this = _super.call(this) || this;
+        var start = params.start, control = params.control, end = params.end, json = params.json, duration = params.duration, _a = params.ease, ease = _a === void 0 ? "power1.out" : _a, _b = params.showControl, showControl = _b === void 0 ? false : _b, _c = params.loop, loop = _c === void 0 ? false : _c;
+        _this._particleContainer = new ParticleContainer();
+        _this.addChild(_this._particleContainer);
+        // 初始化粒子发射器
+        var flyParticle = new Emitter(_this._particleContainer, json);
+        // 创建贝塞尔曲线的路径
+        var path = _this._createBezierPoints(__spreadArray(__spreadArray([start], control, true), [end], false), 100, showControl);
+        // 用来控制路径动画的对象
+        var flyObj = { pathThrough: 0 };
+        gsap.to(flyObj, {
+            duration: duration,
+            pathThrough: path.length - 1,
+            repeat: loop ? -1 : 0,
+            ease: ease,
+            onStart: function () {
+                flyParticle.emit = true;
+            },
+            onUpdate: function () {
+                var i = Math.floor(flyObj.pathThrough);
+                var p = path[i];
+                flyParticle.updateOwnerPos(p.x, p.y);
+            },
+            onComplete: function () {
+                gsap.to(_this, {
+                    alpha: 0,
+                    duration: 0.5,
+                    onComplete: function () {
+                        flyParticle.emit = false;
+                        ticker.destroy();
+                        _this.removeFromParent();
+                    },
+                });
+            },
+        });
+        var ticker = new Ticker();
+        ticker.add(function () {
+            flyParticle.update(1 / 75);
+        });
+        ticker.start();
+        return _this;
+    }
+    LibPixiParticleMove.prototype._createBezierPoints = function (anchorPoints, pointsAmount, showControl) {
+        var _this = this;
+        var points = [];
+        // 渲染控制点
+        if (showControl) {
+            anchorPoints.forEach(function (item, index) {
+                //创建一个小圆点
+                var text = new LibPixiText({
+                    text: index + 1,
+                    fontSize: 16,
+                });
+                text.position.set(item.x, item.y);
+                _this.addChild(text);
+            });
+        }
+        // 计算并存储贝塞尔曲线上的点
+        for (var i = 0; i < pointsAmount; i++) {
+            var point = this._multiPointBezier(anchorPoints, i / pointsAmount);
+            points.push(point);
+        }
+        return points;
+    };
+    LibPixiParticleMove.prototype._multiPointBezier = function (points, t) {
+        var len = points.length;
+        var x = 0, y = 0;
+        // 预计算组合数
+        var binomials = [];
+        for (var i = 0; i < len; i++) {
+            binomials[i] = this._binomial(len - 1, i);
+        }
+        // 计算贝塞尔曲线上的点
+        for (var i = 0; i < len; i++) {
+            var point = points[i];
+            var binom = binomials[i];
+            var factorT = Math.pow(t, i);
+            var factor1MinusT = Math.pow(1 - t, len - 1 - i);
+            x += point.x * factor1MinusT * factorT * binom;
+            y += point.y * factor1MinusT * factorT * binom;
+        }
+        return { x: x, y: y };
+    };
+    LibPixiParticleMove.prototype._binomial = function (n, k) {
+        if (k === 0 || k === n)
+            return 1;
+        var res = 1;
+        for (var i = 1; i <= k; i++) {
+            res = (res * (n - i + 1)) / i;
+        }
+        return res;
+    };
+    return LibPixiParticleMove;
+}(Container));
+export { LibPixiParticleMove };

package/dist/Base/LibPixiRectBgColor/index.d.ts

@@ -0,0 +1,27 @@
+import { Graphics } from "pixi.js";
+export interface LibPixiRectBgColorParams {
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 背景颜色 */
+    bgColor?: string | number;
+    /** x轴偏移 */
+    x?: number;
+    /** y轴偏移 */
+    y?: number;
+    /** 是否启用变色功能 */
+    enableTint?: boolean;
+}
+/** @description 自定义矩形背景色 */
+export declare class LibPixiRectBgColor extends Graphics {
+    /** 启用着色 */
+    private enableTint;
+    /** 背景颜色 */
+    private bgColor;
+    constructor(options: LibPixiRectBgColorParams);
+    /** @description 重新绘制并添加颜色 */
+    updateColor(tint: string): void;
+    /** @description 更新宽度 */
+    renderBg(width: number, height: number): void;
+}

package/dist/Base/LibPixiRectBgColor/index.js

@@ -0,0 +1,54 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Graphics } from "pixi.js";
+import gsap from "gsap";
+/** @description 自定义矩形背景色 */
+var LibPixiRectBgColor = /** @class */ (function (_super) {
+    __extends(LibPixiRectBgColor, _super);
+    function LibPixiRectBgColor(options) {
+        var _this = _super.call(this) || this;
+        /** 启用着色 */
+        _this.enableTint = true;
+        /** 背景颜色 */
+        _this.bgColor = "#fff";
+        var _a = options.x, x = _a === void 0 ? 0 : _a, _b = options.y, y = _b === void 0 ? 0 : _b, _c = options.width, width = _c === void 0 ? 0 : _c, _d = options.height, height = _d === void 0 ? 0 : _d, _e = options.bgColor, bgColor = _e === void 0 ? "#fff" : _e, _f = options.enableTint, enableTint = _f === void 0 ? true : _f;
+        _this.x = x;
+        _this.y = y;
+        _this.enableTint = enableTint;
+        _this.bgColor = bgColor;
+        _this.renderBg(width, height);
+        return _this;
+    }
+    /** @description 重新绘制并添加颜色 */
+    LibPixiRectBgColor.prototype.updateColor = function (tint) {
+        gsap.to(this, { tint: tint, duration: 0.25 });
+    };
+    /** @description 更新宽度 */
+    LibPixiRectBgColor.prototype.renderBg = function (width, height) {
+        this.clear();
+        if (this.enableTint) {
+            this.beginFill("#fff");
+            this.tint = this.bgColor;
+        }
+        else {
+            this.beginFill(this.bgColor);
+        }
+        this.drawRect(0, 0, width, height);
+        this.endFill();
+    };
+    return LibPixiRectBgColor;
+}(Graphics));
+export { LibPixiRectBgColor };

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

@@ -0,0 +1,56 @@
+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 动画 */
+export declare class LibPixiSpine extends Spine {
+    /** 挂点 */
+    private _followDots;
+    /** 是否已开始 */
+    private _isStart;
+    /** spine更新函数 */
+    private _loopFn;
+    constructor(texture: any, params?: LibPixiSpineParams);
+    /** @description 设置动画
+     * @param animationName 动画名称
+     * @param loop 是否循环播放
+     * @param delay 是否延迟播放
+     */
+    setAnimation(animationName?: string, loop?: boolean, delay?: 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;
+}