lyb-pixi-js 1.1.10 → 1.1.11

package/README.md

@@ -1,4 +1,4 @@
-# Lib自用PixiJS组件&工具方法
+# Lib 自用 PixiJS 组件&工具方法
 
 ## 介绍
 
@@ -18,7 +18,7 @@ import { LibPixiJs } from "lyb-pixi-js";
 const text = new LibPixiJs.Base.LibPixiText({
   text: "Hello World!",
   fontSize: 50,
-  fontColor:"red",
+  fontColor: "red",
 });
 app.stage.addChild(text);
 ```
@@ -44,12 +44,12 @@ export * from "lyb-pixi-js/Base/LibPixiText";
 export * from "lyb-pixi-js/Base/LibPixiRectBgColor";
 
 //你的项目文件 index.ts
-import { LibText,LibRectBgColor } from "utils";
+import { LibText, LibRectBgColor } from "utils";
 
 const text = new LibPixiText({
   text: "Hello World!",
   fontSize: 50,
-  fontColor:"red",
+  fontColor: "red",
 });
 app.stage.addChild(text);
 
@@ -69,18 +69,18 @@ app.stage.addChild(box);
 <script src="https://unpkg.com/lyb-pixi-js/lyb-pixi.js"></script>
 
 <script>
-const text = new LibPixiJs.Base.LibPixiText({
-  text: "Hello World!",
-  fontSize: 50,
-  fontColor:"red",
-});
-app.stage.addChild(text);
+  const text = new LibPixiJs.Base.LibPixiText({
+    text: "Hello World!",
+    fontSize: 50,
+    fontColor: "red",
+  });
+  app.stage.addChild(text);
 </script>
 ```
 
 ## 目录
 
-### 基础
+### 组件
 
 \- [LibPixiText-文本](#LibPixiText-文本)
 
@@ -114,6 +114,31 @@ app.stage.addChild(text);
 
 \- [LibPixiTable-数字表格](#LibPixiTable-数字表格)
 
+### 方法
+
+\- [LibPixiAudio-音频播放器](#LibPixiAudio-音频播放器)
+
+\- [LibPixiCreateNineGrid-九宫格图](#LibPixiCreateNineGrid-九宫格图)
+
+\- [LibPixiEvent-事件注册](#LibPixiEvent-事件注册)
+
+\- [LibPixiEventControlled-可关闭的事件](#LibPixiEventControlled-可关闭的事件)
+
+\- [LibPixiFilter-滤镜](#LibPixiFilter-滤镜)
+
+\- [LibPixiIntervalTrigger-间隔触发](#LibPixiIntervalTrigger-间隔触发)
+
+\- [LibPixiOutsideClick-失焦隐藏](#LibPixiOutsideClick-失焦隐藏)
+
+\- [LibPixiOverflowHidden-溢出裁剪](#LibPixiOverflowHidden-溢出裁剪)
+
+\- [LibPixiPromiseTickerTimeout-TickerPromise 定时器](#LibPixiPromiseTickerTimeout-TickerPromise定时器)
+
+\- [LibPixiScaleContainer-超出缩放](#LibPixiScaleContainer-超出缩放)
+
+\- [LibPixiShadow-阴影](#LibPixiShadow-阴影)
+
+\- [LibPixiTickerTimeout-Ticker 定时器](#LibPixiTickerTimeout-Ticker定时器)
 
 ## Base-基础
 
@@ -125,7 +150,7 @@ app.stage.addChild(text);
 const text = new LibPixiJs.Base.LibPixiText({
   text: "Hello World!",
   fontSize: 50,
-  fontColor:"red",
+  fontColor: "red",
 });
 this.addChild(text);
 ```
@@ -194,7 +219,7 @@ this.bgSpine = new LibPixiSpine("spine_buyfree", {
       onUpdate: ({ x, y, rotate, scaleX, scaleY }) => {
         followContainer2.position.set(
           x + 1920 / 2 - followContainer2.width / 2,
-          y + 1080 / 2 - followContainer2.height / 2,
+          y + 1080 / 2 - followContainer2.height / 2
         );
         followContainer2.rotation = rotate;
         followContainer2.scale.set(scaleX, scaleY);
@@ -219,7 +244,7 @@ const libPixiParticleMove = new LibPixiJs.Base.LibPixiParticleMove({
   json: PIXI.Assets.get("fly.json"),
   duration: 1,
   showControl: true,
-  ease:"power1.in",
+  ease: "power1.in",
   loop: true,
 });
 ```
@@ -252,7 +277,10 @@ button.setDisabled(true); //禁用按钮
 app.stage.addChild(button);
 
 //切换按钮材质
-button.toggleTexture(Texture.from("new-default.png"), Texture.from("new-hover.png"));
+button.toggleTexture(
+  Texture.from("new-default.png"),
+  Texture.from("new-hover.png")
+);
 ```
 
 ### LibPixiCloseBtn-关闭按钮
@@ -525,13 +553,12 @@ stage.addChild(table);
 const audioPlayer = new LibPixiAudio();
 
 // 播放音效
-audioPlayer.playEffect('effect-link')
-  .then(() => {
-    console.log('音效播放完成');
-  });
+audioPlayer.playEffect("effect-link").then(() => {
+  console.log("音效播放完成");
+});
 
 // 播放音乐
-audioPlayer.playMusic('music-link');
+audioPlayer.playMusic("music-link");
 
 // 暂停音乐
 audioPlayer.pauseMusic();
@@ -540,7 +567,7 @@ audioPlayer.pauseMusic();
 audioPlayer.resumeMusic();
 
 // 停止指定音效
-audioPlayer.stopEffect('effect-link');
+audioPlayer.stopEffect("effect-link");
 
 // 设置启用音效
 audioPlayer.setEffectEnabled(false);
@@ -567,14 +594,19 @@ const nineGrid = libPixiCreateNineGrid({
 > 事件注册
 
 ```ts
-libPixiEvent(container, 'pointerdown', (e) => {
-  console.log('Pointer down event triggered', e);
+libPixiEvent(container, "pointerdown", (e) => {
+  console.log("Pointer down event triggered", e);
 });
 
 // 只执行一次的事件
-libPixiEvent(container, 'pointerup', (e) => {
-  console.log('Pointer up event triggered', e);
-}, true);
+libPixiEvent(
+  container,
+  "pointerup",
+  (e) => {
+    console.log("Pointer up event triggered", e);
+  },
+  true
+);
 ```
 
 ### LibPixiEventControlled-可关闭的事件
@@ -582,8 +614,8 @@ libPixiEvent(container, 'pointerup', (e) => {
 > 设置可关闭的事件监听，调用自身后不再触发
 
 ```ts
-const closeEvent = libPixiEventControlled(container, 'pointerdown', (e) => {
-  console.log('Pointer down event triggered', e);
+const closeEvent = libPixiEventControlled(container, "pointerdown", (e) => {
+  console.log("Pointer down event triggered", e);
 });
 
 // 调用返回的函数关闭事件监听
@@ -595,10 +627,10 @@ closeEvent();
 > 滤镜
 
 ```ts
-const brightnessFilter = libPixiFilter('brightness', 1.2); // 设置亮度为1.2
-const blurFilter = libPixiFilter('blur'); // 设置模糊滤镜
-const desaturateFilter = libPixiFilter('desaturate'); // 设置去饱和滤镜
-const contrastFilter = libPixiFilter('contrast', 1.5); // 设置对比度为1.5
+const brightnessFilter = libPixiFilter("brightness", 1.2); // 设置亮度为1.2
+const blurFilter = libPixiFilter("blur"); // 设置模糊滤镜
+const desaturateFilter = libPixiFilter("desaturate"); // 设置去饱和滤镜
+const contrastFilter = libPixiFilter("contrast", 1.5); // 设置对比度为1.5
 ```
 
 ### LibPixiIntervalTrigger-间隔触发
@@ -607,13 +639,13 @@ const contrastFilter = libPixiFilter('contrast', 1.5); // 设置对比度为1.5
 
 ```ts
 const stopInterval = libPixiIntervalTrigger(() => {
-  console.log('Triggered interval callback');
+  console.log("Triggered interval callback");
 }, [500, 1000]); // 随机间隔 500ms 到 1000ms
 
 //or
 
 const stopInterval = libPixiIntervalTrigger(() => {
-  console.log('Triggered interval callback');
+  console.log("Triggered interval callback");
 }, 500); // 间隔 500ms
 
 // 停止间隔触发
@@ -626,7 +658,7 @@ stopInterval();
 
 ```ts
 const stopOutsideClick = libPixiOutsideClick(container, button, () => {
-  console.log('Container closed');
+  console.log("Container closed");
 });
 
 // 停止监听点击事件
@@ -641,15 +673,15 @@ stopOutsideClick();
 const mask = libPixiOverflowHidden(container); // 为容器创建并应用矩形蒙版
 ```
 
-### LibPixiPromiseTickerTimeout-TickerPromise定时器
+### LibPixiPromiseTickerTimeout-TickerPromise 定时器
 
 > 基于 Ticker 和 Promise 的定时器
 
 ```ts
 libPixiPromiseTickerTimeout(1000, () => {
-  console.log('Callback after 1000ms');
+  console.log("Callback after 1000ms");
 }).then(() => {
-  console.log('Timer completed');
+  console.log("Timer completed");
 });
 ```
 
@@ -675,13 +707,13 @@ libPixiShadow(container, {
 });
 ```
 
-### LibPixiTickerTimeout-Ticker定时器
+### LibPixiTickerTimeout-Ticker 定时器
 
 > 基于 Ticker 的定时器
 
 ```ts
 const stopTimer = libPixiTickerTimeout(() => {
-  console.log('Callback after delay');
+  console.log("Callback after delay");
 }, 1000);
 
 // 停止定时器

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lyb-pixi-js",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "自用Pixi.JS方法库",
   "license": "ISC",
   "exports": {

package/Components/Base/LibPixiBitText.d.ts

@@ -1,20 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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();
-    }
-}