lyb-pixi-js 1.1.13 → 1.1.15

package/Components/Custom/LibPixiButtonHover.d.ts

@@ -2,23 +2,31 @@ import { Container, type Texture } from "pixi.js";
 export interface LibPixiButtonHoverParams {
     /** 图标资源 */
     texture: Texture;
-    /** 悬浮图标 */
-    hoverTexture: Texture;
-    /** 染色 */
+    /** 悬浮图标，type为"texture"时生效 */
+    hoverTexture?: Texture;
+    /** 默认颜色 */
     tintColor?: string;
+    /** 悬浮颜色，默认白色 */
+    hoverTintColor?: string;
+    /** 置灰颜色 */
+    disabledColor?: string;
 }
 /** @description 悬浮切换材质
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiButtonHover-按钮悬浮
  */
 export declare class LibPixiButtonHover extends Container {
+    /** 是否被禁用 */
+    private disabled;
     /** 按钮 */
     private _btn;
     /** 默认材质 */
     private _texture;
     /** 悬浮材质 */
-    private _hoverTexture;
-    /** 染色 */
+    private _hoverTexture?;
+    /** 默认颜色 */
     private _tintColor?;
+    /** 置灰颜色 */
+    private _disabledColor;
     constructor(params: LibPixiButtonHoverParams);
     /** @description 切换材质
      * @param texture 默认材质

package/Components/Custom/LibPixiButtonHover.js

@@ -6,22 +6,29 @@ import { libPixiEvent } from "../../Utils/LibPixiEvent";
 export class LibPixiButtonHover extends Container {
     constructor(params) {
         super();
-        const { texture, hoverTexture, tintColor } = params;
+        /** 是否被禁用 */
+        this.disabled = false;
+        const { texture, hoverTexture, tintColor, hoverTintColor = "#fff", disabledColor = "#999", } = params;
         this._texture = texture;
         this._hoverTexture = hoverTexture;
         this._tintColor = tintColor;
-        //创建图标容器
-        const iconBox = new Container();
-        this.addChild(iconBox);
+        this._disabledColor = disabledColor;
         //创建图标
         this._btn = new Sprite(texture);
-        iconBox.addChild(this._btn);
+        this.addChild(this._btn);
+        this._btn.anchor.set(0.5);
         tintColor && (this._btn.tint = tintColor);
-        libPixiEvent(iconBox, "pointerenter", () => {
-            this._btn._texture = this._hoverTexture;
-            this._btn.tint = "#fff";
+        libPixiEvent(this._btn, "pointerenter", () => {
+            if (this.disabled)
+                return;
+            this._btn.tint = hoverTintColor;
+            if (this._hoverTexture) {
+                this._btn._texture = this._hoverTexture;
+            }
         });
-        libPixiEvent(iconBox, "pointerleave", () => {
+        libPixiEvent(this._btn, "pointerleave", () => {
+            if (this.disabled)
+                return;
             this._btn._texture = this._texture;
             tintColor && (this._btn.tint = tintColor);
         });
@@ -39,6 +46,8 @@ export class LibPixiButtonHover extends Container {
      * @param status 状态
      */
     setDisabled(status) {
-        this._btn.tint = status ? "#7C7C7C" : this._tintColor || "#fff";
+        this.disabled = status;
+        this._btn.tint = status ? this._disabledColor : this._tintColor || "#fff";
+        this._btn.texture = this._texture;
     }
 }

package/Components/Custom/LibPixiSubAddMinMax.d.ts

@@ -12,25 +12,27 @@ export interface LibPixiSubAddMinMaxParams {
     initialBetIndex: number;
     /** 下注金额列表 */
     betAmountListLength: number;
-    /** 金额更新回调 */
+    /** 金额更新回调
+     * @param index 金额索引
+     */
     onAmountIndex: (index: number) => void;
+    /** 按钮置灰状态回调
+     * @param type 被置灰的按钮类型
+     */
+    onDisabled: (type?: "min" | "max") => void;
 }
 /** @description 最小、最大按钮和增减按钮功能及置灰逻辑
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSubAddMinMax-数字控制器
  */
 export declare class LibPixiSubAddMinMax {
     /** 步进器 */
-    private baseNumSteper;
-    /** 最大最小按钮 */
-    private minBtn;
-    private maxBtn;
-    /** 增加减少按钮 */
-    private subBtn;
-    private addBtn;
+    private _baseNumSteper;
     /** 金额列表数量 */
-    private betAmountListLength;
+    private _betAmountListLength;
     /** 金额更新回调 */
-    onAmountIndex: (index: number) => void;
+    private onAmountIndex;
+    /** 按钮置灰状态回调 */
+    private onDisabled;
     constructor(params: LibPixiSubAddMinMaxParams);
     /** @description 点击最小按钮 */
     min(): void;
@@ -44,6 +46,4 @@ export declare class LibPixiSubAddMinMax {
      * @param index 索引
      */
     minMaxUpdateIndex(index: number): void;
-    /** @description 设置最大最小按钮置灰及恢复 */
-    private _setGrey;
 }

package/Components/Custom/LibPixiSubAddMinMax.js

@@ -1,28 +1,23 @@
-import { libPixiFilter } from "../../Utils/LibPixiFilter"; //@ts-ignore
-import { LibJsNumberStepper } from 'lyb-js/Misc/LibJsNumberStepper.js';
+import { LibJsNumberStepper } from "lyb-js/Misc/LibJsNumberStepper.js";
 /** @description 最小、最大按钮和增减按钮功能及置灰逻辑
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSubAddMinMax-数字控制器
  */
 export class LibPixiSubAddMinMax {
     constructor(params) {
         /** 金额列表数量 */
-        this.betAmountListLength = 0;
-        const { minBtn, maxBtn, addBtn, subBtn, initialBetIndex, betAmountListLength, onAmountIndex, } = params;
-        this.minBtn = minBtn;
-        this.maxBtn = maxBtn;
-        this.subBtn = subBtn;
-        this.addBtn = addBtn;
+        this._betAmountListLength = 0;
+        const { initialBetIndex, betAmountListLength, onAmountIndex, onDisabled } = params;
         this.onAmountIndex = onAmountIndex;
-        this.betAmountListLength = betAmountListLength;
+        this.onDisabled = onDisabled;
+        this._betAmountListLength = betAmountListLength;
         //金额增减步进器
-        this.baseNumSteper = new LibJsNumberStepper(betAmountListLength, //@ts-ignore
-        (index) => {
+        this._baseNumSteper = new LibJsNumberStepper(betAmountListLength, (index) => {
             this.onAmountIndex(index);
             this.minMaxUpdateIndex(index);
         });
         //设置初始状态
         this.minMaxUpdateIndex(initialBetIndex);
-        this.baseNumSteper.updateIndex(initialBetIndex);
+        this._baseNumSteper.updateIndex(initialBetIndex);
     }
     /** @description 点击最小按钮 */
     min() {
@@ -31,46 +26,31 @@ export class LibPixiSubAddMinMax {
     }
     /** @description 点击最大按钮 */
     max() {
-        const index = this.betAmountListLength - 1;
+        const index = this._betAmountListLength - 1;
         this.minMaxUpdateIndex(index);
         this.onAmountIndex(index);
     }
     /** @description 点击减少按钮 */
     sub() {
-        this.baseNumSteper.down("sub");
+        this._baseNumSteper.down("sub");
     }
     /** @description 点击增加按钮 */
     add() {
-        this.baseNumSteper.down("add");
+        this._baseNumSteper.down("add");
     }
     /** @description 改变最小最大按钮状态及回调
      * @param index 索引
      */
     minMaxUpdateIndex(index) {
         if (index === 0) {
-            this._setGrey("min");
+            this.onDisabled("min");
         }
-        else if (index === this.betAmountListLength - 1) {
-            this._setGrey("max");
+        else if (index === this._betAmountListLength - 1) {
+            this.onDisabled("max");
         }
         else {
-            this._setGrey();
-        }
-        this.baseNumSteper.updateIndex(index);
-    }
-    /** @description 设置最大最小按钮置灰及恢复 */
-    _setGrey(type) {
-        this.minBtn.filters = [];
-        this.maxBtn.filters = [];
-        this.subBtn.filters = [];
-        this.addBtn.filters = [];
-        if (type === "min") {
-            this.minBtn.filters = [libPixiFilter("desaturate")];
-            this.subBtn.filters = [libPixiFilter("desaturate")];
-        }
-        else if (type === "max") {
-            this.maxBtn.filters = [libPixiFilter("desaturate")];
-            this.addBtn.filters = [libPixiFilter("desaturate")];
+            this.onDisabled();
         }
+        this._baseNumSteper.updateIndex(index);
     }
 }

package/README.md

@@ -256,31 +256,29 @@ const libPixiParticleMove = new LibPixiJs.Base.LibPixiParticleMove({
 > 悬浮切换材质
 
 ```ts
-import { Texture } from "pixi.js";
-import { LibPixiButtonHover } from "./path/to/LibPixiButtonHover";
-
-//加载材质资源
-const defaultTexture: Texture = Texture.from("default-icon.png");
-const hoverTexture: Texture = Texture.from("hover-icon.png");
+import { LibPixiButtonHover } from "lyb-pixi-js";
 
 //创建按钮实例
 const button = new LibPixiButtonHover({
-  texture: defaultTexture,
-  hoverTexture: hoverTexture,
-  tintColor: "#FF0000", //可选：按钮的初始颜色
+  texture: PIXI.Texture.from('path/to/normal.png'),
+  hoverTexture: PIXI.Texture.from('path/to/hover.png'),
+  tintColor: "#ff0000", //默认颜色
+  hoverTintColor: "#00ff00", //悬浮颜色
+  disabledColor: "#cccccc" //禁用颜色
 });
 
-//设置按钮状态
-button.setDisabled(true); //禁用按钮
-
-//在Pixi.js应用的容器中添加按钮
-app.stage.addChild(button);
+//启用/禁用按钮
+button.setDisabled(false); //启用
+button.setDisabled(true); //禁用
 
 //切换按钮材质
 button.toggleTexture(
-  Texture.from("new-default.png"),
-  Texture.from("new-hover.png")
+  PIXI.Texture.from('path/to/new_normal.png'),
+  PIXI.Texture.from('path/to/new_hover.png')
 );
+
+//添加到Pixi舞台
+app.stage.addChild(button);
 ```
 
 ### LibPixiCloseBtn-关闭按钮
@@ -477,40 +475,39 @@ slider.next();
 > 最小、最大按钮和增减按钮功能及置灰逻辑
 
 ```ts
-import { LibPixiSubAddMinMax } from "./path/to/LibPixiSubAddMinMax";
-import { Container } from "pixi.js";
+import { LibPixiSubAddMinMax } from "lyb-pixi-js";
 
-//创建最小、最大、增加和减少按钮
-const minBtn = new Container();
-const maxBtn = new Container();
-const subBtn = new Container();
-const addBtn = new Container();
-
-//设置初始下注索引和金额列表数量
-const initialBetIndex = 0;
-const betAmountListLength = 5;
-
-//金额更新回调
-const onAmountIndex = (index: number) => {
-  console.log(`当前金额索引: ${index}`);
-};
-
-//创建LibPixiSubAddMinMax实例
-const betAmountController = new LibPixiSubAddMinMax({
-  minBtn,
-  maxBtn,
-  subBtn,
-  addBtn,
-  initialBetIndex,
-  betAmountListLength,
-  onAmountIndex,
+//创建按钮实例
+const betControl = new LibPixiSubAddMinMax({
+  minBtn: minButton,  //最小按钮
+  maxBtn: maxButton,  //最大按钮
+  subBtn: subButton,  //减少按钮
+  addBtn: addButton,  //增加按钮
+  initialBetIndex: 0, //初始下注索引
+  betAmountListLength: 10, //下注金额列表长度
+  onAmountIndex: (index) => {
+    console.log("当前下注金额索引:", index);
+  },
+  onDisabled: (type) => {
+    if (type === "min") {
+      minButton.tint = 0x999999; //禁用最小按钮
+    } else if (type === "max") {
+      maxButton.tint = 0x999999; //禁用最大按钮
+    } else {
+      minButton.tint = 0xFFFFFF; //启用最小按钮
+      maxButton.tint = 0xFFFFFF; //启用最大按钮
+    }
+  }
 });
 
-//绑定按钮事件
-minBtn.on("pointerdown", () => betAmountController.min());
-maxBtn.on("pointerdown", () => betAmountController.max());
-subBtn.on("pointerdown", () => betAmountController.sub());
-addBtn.on("pointerdown", () => betAmountController.add());
+//设置初始状态
+betControl.min();  //设置为最小值
+betControl.max();  //设置为最大值
+betControl.sub();  //减少下注
+betControl.add();  //增加下注
+
+//添加到Pixi舞台
+app.stage.addChild(minButton, maxButton, subButton, addButton);
 ```
 
 ### LibPixiTable-数字表格
@@ -552,27 +549,27 @@ stage.addChild(table);
 ```ts
 const audioPlayer = new LibPixiAudio();
 
-// 播放音效
+//播放音效
 audioPlayer.playEffect("effect-link").then(() => {
   console.log("音效播放完成");
 });
 
-// 播放音乐
+//播放音乐
 audioPlayer.playMusic("music-link");
 
-// 暂停音乐
+//暂停音乐
 audioPlayer.pauseMusic();
 
-// 继续播放音乐
+//继续播放音乐
 audioPlayer.resumeMusic();
 
-// 停止指定音效
+//停止指定音效
 audioPlayer.stopEffect("effect-link");
 
-// 设置启用音效
+//设置启用音效
 audioPlayer.setEffectEnabled(false);
 
-// 设置启用音乐
+//设置启用音乐
 audioPlayer.setMusicEnabled(false);
 ```
 
@@ -582,10 +579,10 @@ audioPlayer.setMusicEnabled(false);
 
 ```ts
 const nineGrid = libPixiCreateNineGrid({
-  texture: yourTexture, // 传入纹理
-  dotWidth: 10, // 四个角的宽度，可以是数字或者数组
-  width: 200, // 宽度
-  height: 150, // 高度
+  texture: yourTexture, //传入纹理
+  dotWidth: 10, //四个角的宽度，可以是数字或者数组
+  width: 200, //宽度
+  height: 150, //高度
 });
 ```
 
@@ -598,7 +595,7 @@ libPixiEvent(container, "pointerdown", (e) => {
   console.log("Pointer down event triggered", e);
 });
 
-// 只执行一次的事件
+//只执行一次的事件
 libPixiEvent(
   container,
   "pointerup",
@@ -618,7 +615,7 @@ const closeEvent = libPixiEventControlled(container, "pointerdown", (e) => {
   console.log("Pointer down event triggered", e);
 });
 
-// 调用返回的函数关闭事件监听
+//调用返回的函数关闭事件监听
 closeEvent();
 ```
 
@@ -627,10 +624,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-间隔触发
@@ -640,15 +637,15 @@ const contrastFilter = libPixiFilter("contrast", 1.5); // 设置对比度为1.5
 ```ts
 const stopInterval = libPixiIntervalTrigger(() => {
   console.log("Triggered interval callback");
-}, [500, 1000]); // 随机间隔 500ms 到 1000ms
+}, [500, 1000]); //随机间隔 500ms 到 1000ms
 
 //or
 
 const stopInterval = libPixiIntervalTrigger(() => {
   console.log("Triggered interval callback");
-}, 500); // 间隔 500ms
+}, 500); //间隔 500ms
 
-// 停止间隔触发
+//停止间隔触发
 stopInterval();
 ```
 
@@ -661,7 +658,7 @@ const stopOutsideClick = libPixiOutsideClick(container, button, () => {
   console.log("Container closed");
 });
 
-// 停止监听点击事件
+//停止监听点击事件
 stopOutsideClick();
 ```
 
@@ -670,7 +667,7 @@ stopOutsideClick();
 > 为容器创建并应用一个矩形遮罩，用于隐藏溢出的内容，函数会返回遮罩，可控制是否显示遮罩
 
 ```ts
-const mask = libPixiOverflowHidden(container); // 为容器创建并应用矩形蒙版
+const mask = libPixiOverflowHidden(container); //为容器创建并应用矩形蒙版
 ```
 
 ### LibPixiPromiseTickerTimeout-TickerPromise 定时器
@@ -690,7 +687,7 @@ libPixiPromiseTickerTimeout(1000, () => {
 > 元素超过指定宽度就缩放
 
 ```ts
-libPixiScaleContainer(container, 500, 300); // 容器超过 500px 宽度或 300px 高度时进行缩放
+libPixiScaleContainer(container, 500, 300); //容器超过 500px 宽度或 300px 高度时进行缩放
 ```
 
 ### LibPixiShadow-阴影
@@ -716,6 +713,6 @@ const stopTimer = libPixiTickerTimeout(() => {
   console.log("Callback after delay");
 }, 1000);
 
-// 停止定时器
+//停止定时器
 stopTimer();
 ```

package/Utils/LibPixiAudio.d.ts

@@ -1,3 +1,4 @@
+import "@pixi/sound";
 /** @description 音频播放器
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiAudio-音频播放器
  */
@@ -31,7 +32,7 @@ export declare class LibPixiAudio {
     /** @description 停止播放指定音效
      * @param key 音效资源Key，内部会使用Assets.get(key)获取音频资源进行停止
      */
-    stopEffect(link: string): void;
+    stopEffect(key: string): void;
     /** @description 设置启用音效
      * @param enabled 启用状态，false为禁用
      */

package/Utils/LibPixiAudio.js

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import gsap from "gsap";
 import { Assets } from "pixi.js";
+import "@pixi/sound";
 /** @description 音频播放器
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiAudio-音频播放器
  */
@@ -28,11 +29,12 @@ export class LibPixiAudio {
          * @param status 播放状态，false为暂停
          */
         this._setPlayStatus = (status) => {
+            var _a, _b;
             if (status) {
-                !this._isMusicPaused && this._musicPlayer.play();
+                !this._isMusicPaused && ((_a = this._musicPlayer) === null || _a === void 0 ? void 0 : _a.play());
             }
             else {
-                this._musicPlayer.pause();
+                (_b = this._musicPlayer) === null || _b === void 0 ? void 0 : _b.pause();
             }
             this._playingList.forEach((item) => {
                 if (status) {
@@ -58,12 +60,6 @@ export class LibPixiAudio {
             const id = new Date().getTime();
             const url = Assets.get(key).url;
             const audio = new Audio(url);
-            //倒数几秒位置播放
-            if (end) {
-                const duration = audio.duration;
-                const start = duration - end;
-                audio.currentTime = Math.max(start, 0);
-            }
             audio.muted = this._isBackground || !this.effectEnabled;
             audio.addEventListener("ended", () => {
                 this._playingList = this._playingList.filter((item) => item.id !== id);
@@ -72,6 +68,12 @@ export class LibPixiAudio {
             audio
                 .play()
                 .then(() => {
+                //倒数几秒位置播放
+                if (end) {
+                    const duration = audio.duration;
+                    const start = duration - end;
+                    audio.currentTime = Math.max(start, 0);
+                }
                 this._playingList.push({
                     id,
                     audio,
@@ -86,6 +88,7 @@ export class LibPixiAudio {
      */
     playMusic(key) {
         return __awaiter(this, void 0, void 0, function* () {
+            var _a;
             //如果有音乐正在播放，则停止
             if (this._musicPlayer) {
                 gsap.killTweensOf(this._musicPlayer);
@@ -94,7 +97,7 @@ export class LibPixiAudio {
                     duration: 1,
                     ease: "linear",
                 });
-                this._musicPlayer.pause();
+                (_a = this._musicPlayer) === null || _a === void 0 ? void 0 : _a.pause();
             }
             const url = Assets.get(key).url;
             this._musicPlayer.src = url;
@@ -121,19 +124,21 @@ export class LibPixiAudio {
     }
     /** @description 暂停音乐 */
     pauseMusic() {
+        var _a;
         this._isMusicPaused = true;
-        this._musicPlayer.pause();
+        (_a = this._musicPlayer) === null || _a === void 0 ? void 0 : _a.pause();
     }
     /** @description 继续播放音乐 */
     resumeMusic() {
+        var _a;
         this._isMusicPaused = false;
-        this._musicPlayer.play();
+        (_a = this._musicPlayer) === null || _a === void 0 ? void 0 : _a.play();
     }
     /** @description 停止播放指定音效
      * @param key 音效资源Key，内部会使用Assets.get(key)获取音频资源进行停止
      */
-    stopEffect(link) {
-        const url = Assets.get(link).url;
+    stopEffect(key) {
+        const url = Assets.get(key).url;
         this._playingList.forEach((item) => {
             if (item.url === url) {
                 item.audio.pause();