lyb-pixi-js 1.0.8 → 1.0.10

package/dist/Base/LibPixiBitText/index.js

@@ -1 +1,26 @@
-"use strict";import{BitmapText as i}from"pixi.js";export class LibPixiBitText{constructor(t,e){this._fontName=t,this._defaultFontSize=e}createText(t,e){return new i(t.toString(),{fontName:this._fontName,fontSize:this._defaultFontSize||e})}}
+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/dist/Base/LibPixiContainer/index.js

@@ -1 +1,48 @@
-"use strict";import{Container as o,Graphics as r,Sprite as f}from"pixi.js";import{LibPixiRectBgColor as d}from"../LibPixiRectBgColor";export class LibPixiContainer extends o{constructor(t){super();const{width:i,height:s,overHidden:e,bgColor:h}=t;if(e){const l=new r;l.beginFill(16777215),l.drawRect(0,0,i,s),l.endFill(),this.addChild(l),this.mask=l}h?(this._bgColorFill=new d({width:i,height:s,bgColor:h}),this.addChild(this._bgColorFill)):(this._fill=new f,this._fill.width=i,this._fill.height=s,this.addChild(this._fill))}setSize(t,i){this._fill&&(this._fill.width=t,this._fill.height=i),this._bgColorFill&&this._bgColorFill.renderBg(t,i)}}
+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 背景色
+     */
+    constructor(params) {
+        super();
+        const { width, height, overHidden, bgColor } = params;
+        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 设置容器大小 */
+    setSize(width, height) {
+        if (this._fill) {
+            this._fill.width = width;
+            this._fill.height = height;
+        }
+        if (this._bgColorFill) {
+            this._bgColorFill.renderBg(width, height);
+        }
+    }
+}

package/dist/Base/LibPixiParticleMove/index.js

@@ -1 +1,100 @@
-"use strict";import{Container as x,ParticleContainer as C,Ticker as P}from"pixi.js";import{Emitter as w}from"@pixi/particle-emitter";import u from"gsap";import{LibPixiText as _}from"../LibPixiText";export class LibPixiParticleMove extends x{constructor(n){super();const{start:i,control:o,end:e,json:r,duration:s,ease:t="power1.out",showControl:c=!1,loop:h=!1}=n;this._particleContainer=new C,this.addChild(this._particleContainer);const a=new w(this._particleContainer,r),l=this._createBezierPoints([i,...o,e],100,c),f={pathThrough:0};u.to(f,{duration:s,pathThrough:l.length-1,repeat:h?-1:0,ease:t,onStart:()=>{a.emit=!0},onUpdate:()=>{const d=Math.floor(f.pathThrough),m=l[d];a.updateOwnerPos(m.x,m.y)},onComplete:()=>{u.to(this,{alpha:0,duration:.5,onComplete:()=>{a.emit=!1,p.destroy(),this.removeFromParent()}})}});const p=new P;p.add(()=>{a.update(1/75)}),p.start()}_createBezierPoints(n,i,o){const e=[];o&&n.forEach((r,s)=>{const t=new _({text:s+1,fontSize:16});t.position.set(r.x,r.y),this.addChild(t)});for(let r=0;r<i;r++){const s=this._multiPointBezier(n,r/i);e.push(s)}return e}_multiPointBezier(n,i){const o=n.length;let e=0,r=0;const s=[];for(let t=0;t<o;t++)s[t]=this._binomial(o-1,t);for(let t=0;t<o;t++){const c=n[t],h=s[t],a=Math.pow(i,t),l=Math.pow(1-i,o-1-t);e+=c.x*l*a*h,r+=c.y*l*a*h}return{x:e,y:r}}_binomial(n,i){if(i===0||i===n)return 1;let o=1;for(let e=1;e<=i;e++)o=o*(n-e+1)/e;return o}}
+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/dist/Base/LibPixiRectBgColor/index.js

@@ -1 +1,37 @@
-"use strict";import{Graphics as l}from"pixi.js";import n from"gsap";export class LibPixiRectBgColor extends l{constructor(t){super(),this.enableTint=!0,this.bgColor="#fff";const{x:i=0,y:e=0,width:s=0,height:r=0,bgColor:o="#fff",enableTint:h=!0}=t;this.x=i,this.y=e,this.enableTint=h,this.bgColor=o,this.renderBg(s,r)}updateColor(t){n.to(this,{tint:t,duration:.25})}renderBg(t,i){this.clear(),this.enableTint?(this.beginFill("#fff"),this.tint=this.bgColor):this.beginFill(this.bgColor),this.drawRect(0,0,t,i),this.endFill()}}
+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.enableTint = true;
+        /** 背景颜色 */
+        this.bgColor = "#fff";
+        const { x = 0, y = 0, width = 0, height = 0, bgColor = "#fff", enableTint = true, } = options;
+        this.x = x;
+        this.y = y;
+        this.enableTint = enableTint;
+        this.bgColor = bgColor;
+        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.tint = this.bgColor;
+        }
+        else {
+            this.beginFill(this.bgColor);
+        }
+        this.drawRect(0, 0, width, height);
+        this.endFill();
+    }
+}

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

@@ -40,7 +40,7 @@ export declare class LibPixiSpine extends Spine {
      * @param loop 是否循环播放
      * @param delay 是否延迟播放
      */
-    setAnimation(animationName?: string, loop?: boolean, delay?: boolean): Promise<void>;
+    setAnimation(animationName?: string, loop?: boolean): Promise<void>;
     /** @description 添加动画
      * @param animationName 动画名称
      * @param loop 是否循环播放

package/dist/Base/LibPixiSpine/index.js

@@ -1 +1,126 @@
-"use strict";import{Assets as a,Ticker as n}from"pixi.js";import{Spine as r}from"@pixi-spine/runtime-3.8";import f from"gsap";export class LibPixiSpine extends r{constructor(o,e){const{followPointList:t,visible:l=!1}=e||{};let i;typeof o=="string"?i=a.get(o).spineData:i=o.spineData,super(i),this._followDots=[],this._isStart=!1,this.visible=l,this.autoUpdate=!1,t?.length&&t?.forEach(s=>{s.follow.alpha=0,this._followDots.push({point:this.skeleton.findBone(s.boneName),follow:s.follow,onUpdate:s.onUpdate,angleFollow:s.angleFollow||!1,scaleFollow:s.scaleFollow||!0})}),this._loopFn=this._loop.bind(this),n.system.add(this._loopFn)}setAnimation(o="Animation",e=!1,t=!0){return new Promise(l=>{this.visible=!0,this.state.setAnimation(0,o,e).listener={complete:()=>{t?requestAnimationFrame(()=>{l()}):l()}}})}addAnimation(o="Animation",e=!1,t=0){return new Promise(l=>{this.state.addAnimation(0,o,e,t).listener={complete:()=>{requestAnimationFrame(()=>{l()})}}})}setSkin(o){this.skeleton.setSkinByName(o)}destroyAll(){n.system.remove(this._loopFn),this.destroy(),this.removeFromParent()}_loop(){this.update(n.system.deltaMS/1e3),this._updateFollowPoint()}_updateFollowPoint(){this._followDots.length!==0&&(this._followDots.forEach(o=>{const{worldX:e,worldY:t}=o.point,l=o.point.getWorldRotationX()*(Math.PI/180),i=o.point.getWorldScaleX(),s=o.point.getWorldScaleY();o.onUpdate?o.onUpdate({x:e,y:t,rotate:l,scaleX:i,scaleY:s}):(o.angleFollow&&(o.follow.rotation=l),o.scaleFollow&&o.follow.scale.set(i,s),o.follow.position.set(e+1920/2-o.follow.width/2,t+1080/2-o.follow.height/2))}),this._isStart||(this._isStart=!0,this._followDots.forEach(o=>{f.to(o.follow,{alpha:1,duration:.25,delay:.15})})))}}
+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 是否循环播放
+     * @param delay 是否延迟播放
+     */
+    setAnimation(animationName = "Animation", loop = false) {
+        return new Promise((resolve) => {
+            this.visible = true;
+            this.state.setAnimation(0, animationName, loop).listener = {
+                complete: () => {
+                    requestAnimationFrame(() => {
+                        resolve();
+                    });
+                },
+            };
+        });
+    }
+    /** @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: () => {
+                    requestAnimationFrame(() => {
+                        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/Base/LibPixiText/index.js

@@ -1 +1,32 @@
-"use strict";import{Text as k,TextStyle as S}from"pixi.js";export class LibPixiText extends k{constructor(n){const{text:s,fontSize:e=36,fontColor:a=16777215,stroke:r,strokeColor:l,strokeThickness:d,fontFamily:f="MicrosoftYaHei",fontWeight:h="normal",wordWrap:i=!1,wordWrapWidth:p=100,lineHeight:c=1.25,align:w="left",indent:x=0,shadow:t}=n,o=new S({fontSize:e,wordWrap:i,wordWrapWidth:p,fontWeight:h,lineHeight:c*e,breakWords:i,fill:a,align:w,fontFamily:f,stroke:r?l:"transparent",strokeThickness:r?d:0,lineJoin:"round"});t&&(o.dropShadow=!0,o.dropShadowColor=t[0],o.dropShadowAngle=t[1]*(Math.PI/180),o.dropShadowBlur=t[2],o.dropShadowDistance=t[3]),super(s,o),this.position.x=x*e}}
+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/index.js

@@ -1 +1,2 @@
-"use strict";import*as i from"./libPixiJs";export{i as LibPixiJs};
+import * as LibPixiJs_1 from "./libPixiJs";
+export { LibPixiJs_1 as LibPixiJs };

package/dist/libPixiJs.js

@@ -1 +1,33 @@
-"use strict";import{LibPixiBitText as i}from"./Base/LibPixiBitText";import{LibPixiContainer as o}from"./Base/LibPixiContainer";import{LibPixiParticleMove as r}from"./Base/LibPixiParticleMove";import{LibPixiRectBgColor as t}from"./Base/LibPixiRectBgColor";import{LibPixiSpine as m}from"./Base/LibPixiSpine";import{LibPixiText as e}from"./Base/LibPixiText";export const Base={LibPixiBitText:i,LibPixiContainer:o,LibPixiParticleMove:r,LibPixiRectBgColor:t,LibPixiSpine:m,LibPixiText:e};
+import { LibPixiBitText } from "./Base/LibPixiBitText";
+import { LibPixiContainer } from "./Base/LibPixiContainer";
+import { LibPixiParticleMove } from "./Base/LibPixiParticleMove";
+import { LibPixiRectBgColor } from "./Base/LibPixiRectBgColor";
+import { LibPixiSpine } from "./Base/LibPixiSpine";
+import { LibPixiText } from "./Base/LibPixiText";
+/** @description 基础方法 */
+export const Base = {
+    /** @description 自定义位图文本
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiBitText-位图
+     */
+    LibPixiBitText,
+    /** @description 自定义容器大小及背景色
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiContainer-容器
+     */
+    LibPixiContainer,
+    /** @description 利用贝塞尔曲线实现粒子移动
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiParticleMove-粒子容器
+     */
+    LibPixiParticleMove,
+    /** @description 自定义矩形背景色
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
+     */
+    LibPixiRectBgColor,
+    /** @description 自定义 Spine 动画
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSpine-动画
+     */
+    LibPixiSpine,
+    /** @description 自定义文本类
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiText-文本
+     */
+    LibPixiText,
+};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "lyb-pixi-js",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "自用Pixi.JS方法库",
   "license": "ISC",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "scripts": {
-    "build": "vite build & tsc & esbuild dist/**/*.js --minify --outdir=dist --allow-overwrite"
+    "build": "vite build & tsc"
   },
   "exports": {
     "./*": "./dist/*"
@@ -34,7 +34,6 @@
   ],
   "devDependencies": {
     "@types/node": "^22.10.5",
-    "esbuild": "^0.24.2",
     "typescript": "^5.7.3"
   },
   "dependencies": {
@@ -46,4 +45,4 @@
     "pixi.js": "^7.4.2",
     "vite": "^4.5.5"
   }
-}
+}