lyb-pixi-js 1.0.22 → 1.1.0

package/README.md

@@ -1,4 +1,4 @@
-# Lib自用PixiJS工具方法
+# Lib自用PixiJS组件&工具方法
 
 ## 介绍
 
@@ -94,6 +94,26 @@ app.stage.addChild(text);
 
 \- [LibPixiParticleMove-粒子容器](#LibPixiParticleMove-粒子容器)
 
+\- [LibPixiButtonHover-按钮悬浮](#LibPixiButtonHover-按钮悬浮)
+
+\- [LibPixiCloseBtn-关闭按钮](#LibPixiCloseBtn-关闭按钮)
+
+\- [LibPixiDrawer-抽屉](#LibPixiDrawer-抽屉)
+
+\- [LibPixiPerforMon-性能监视器](#LibPixiPerforMon-性能监视器)
+
+\- [LibPixiProgress-进度条](#LibPixiProgress-进度条)
+
+\- [LibPixiScrollContainer-滚动容器](#LibPixiScrollContainer-滚动容器)
+
+\- [LibPixiScrollNum-数字滑动](#LibPixiScrollNum-数字滑动)
+
+\- [LibPixiSlider-横向滑动图](#LibPixiSlider-横向滑动图)
+
+\- [LibPixiSubAddMinMax-数字控制器](#LibPixiSubAddMinMax-数字控制器)
+
+\- [LibPixiTable-数字表格](#LibPixiTable-数字表格)
+
 
 ## Base-基础
 
@@ -204,3 +224,466 @@ const libPixiParticleMove = new LibPixiJs.Base.LibPixiParticleMove({
 });
 ```
 
+## Custom-定制
+
+### LibPixiButtonHover-按钮悬浮
+
+> 悬浮切换材质
+
+```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");
+
+//创建按钮实例
+const button = new LibPixiButtonHover({
+  texture: defaultTexture,
+  hoverTexture: hoverTexture,
+  tintColor: "#FF0000", //可选：按钮的初始颜色
+});
+
+//设置按钮状态
+button.setDisabled(true); //禁用按钮
+
+//在Pixi.js应用的容器中添加按钮
+app.stage.addChild(button);
+
+//切换按钮材质
+button.toggleTexture(Texture.from("new-default.png"), Texture.from("new-hover.png"));
+```
+
+### LibPixiCloseBtn-关闭按钮
+
+> 右上角关闭按钮，支持悬浮旋转动画
+
+```ts
+import { Sprite, Texture } from "pixi.js";
+import { LibPixiCloseBtn } from "./path/to/LibPixiCloseBtn";
+
+//创建按钮材质
+const closeTexture = Texture.from("close-icon.png");
+
+//创建按钮精灵
+const closeButton = new Sprite(closeTexture);
+
+//创建关闭按钮实例
+const closeBtn = new LibPixiCloseBtn({
+  sprite: closeButton,
+  onClick: () => {
+    console.log("Close button clicked!");
+  },
+});
+
+//添加到Pixi.js场景
+app.stage.addChild(closeBtn);
+```
+
+### LibPixiDrawer-抽屉
+
+> 底部弹出抽屉
+
+```ts
+import { Container } from "pixi.js";
+import { LibPixiDrawer } from "./path/to/LibPixiDrawer";
+
+//创建抽屉内容容器
+const drawerContent = new Container();
+//在这里添加你想要的内容，例如一些按钮或文本等
+//drawerContent.addChild(someOtherPixiElement);
+
+//创建抽屉实例
+const drawer = new LibPixiDrawer(drawerContent);
+
+//添加到Pixi.js场景
+app.stage.addChild(drawer);
+
+//关闭抽屉
+//drawer.close();
+```
+
+### LibPixiPerforMon-性能监视器
+
+> 监视帧率、Draw Call、Max Draw Call
+
+```ts
+import { LibPixiPerforMon } from "./path/to/LibPixiPerforMon";
+
+//创建性能监视实例
+const perforMon = new LibPixiPerforMon(app);
+
+//添加到Pixi应用的舞台
+app.stage.addChild(perforMon);
+```
+
+### LibPixiProgress-进度条
+
+> 通过裁剪的方式显示进度条
+
+```ts
+import { Texture } from "pixi.js";
+import { LibPixiProgress } from "./path/to/LibPixiProgress";
+
+//创建进度条背景和进度条材质
+const bgTexture = Texture.from("background.png");
+const barTexture = Texture.from("progress-bar.png");
+
+//创建进度条实例
+const progress = new LibPixiProgress({
+  bgWidth: 400,
+  bgHeight: 50,
+  barWidth: 400,
+  barHeight: 50,
+  bgTexture: bgTexture,
+  barTexture: barTexture,
+});
+
+//设置进度值
+progress.setProgress(0.5); //50% 完成
+
+//添加到Pixi.js场景
+app.stage.addChild(progress);
+```
+
+### LibPixiScrollContainer-滚动容器
+
+> 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
+
+```ts
+import { Container } from "pixi.js";
+import { LibPixiScrollContainer } from "./path/to/LibPixiScrollContainer";
+
+//创建滚动内容容器
+const scrollContent = new Container();
+//在这里添加滚动内容，例如图片、文本等
+//scrollContent.addChild(someOtherPixiElement);
+
+//创建滚动容器实例
+const scrollContainer = new LibPixiScrollContainer({
+  width: 800,
+  height: 600,
+  scrollContent: scrollContent,
+  bottomMargin: 50, //可选：底部内边距
+});
+
+//添加到Pixi.js场景
+app.stage.addChild(scrollContainer);
+
+//设置容器大小
+scrollContainer.setDimensions(800, 600);
+
+//将内容添加到滚动容器
+scrollContainer.addContent(new Sprite(Texture.from("new-content.png")));
+```
+
+### LibPixiScrollNum-数字滑动
+
+> 通过鼠标或手指拖动数字列选择数字
+
+```ts
+import { Container } from "pixi.js";
+import { LibPixiScrollNum } from "./path/to/LibPixiScrollNum";
+
+//创建滚动内容容器
+const scrollContent = new Container();
+//在这里添加滚动内容，例如数字、文本等
+//scrollContent.addChild(someTextOrSprite);
+
+//创建数字选择滚动器
+const scrollNum = new LibPixiScrollNum({
+  width: 300,
+  height: 600,
+  pageHeight: 100,
+  content: scrollContent,
+  pageNum: 5, //设定总行数
+  slideCallback: (index) => {
+    console.log("滑动到行:", index);
+  },
+  scrollCallback: (y, index) => {
+    console.log(`当前Y: ${y}, 当前行: ${index}`);
+  },
+});
+
+//将滚动器添加到场景
+app.stage.addChild(scrollNum);
+
+//手动滑动到特定行
+scrollNum.slideTo(2);
+```
+
+### LibPixiSlider-横向滑动图
+
+> 类似轮播图，但是不会自动轮播
+
+```ts
+import { Container } from "pixi.js";
+import { LibPixiSlider } from "./path/to/LibPixiSlider";
+
+//创建滑动内容容器
+const slideContent = new Container();
+//在这里添加幻灯片内容，例如图片、文本等
+//slideContent.addChild(someImageOrText);
+
+//创建幻灯片
+const slider = new LibPixiSlider(
+  400, //宽度
+  300, //高度
+  slideContent,
+  (pageIndex, pageNum) => {
+    console.log(`当前页: ${pageIndex + 1} / ${pageNum + 1}`);
+  }
+);
+
+//将幻灯片添加到场景
+app.stage.addChild(slider);
+
+//手动滑动到上一页或下一页
+slider.prev();
+slider.next();
+```
+
+### LibPixiSubAddMinMax-数字控制器
+
+> 最小、最大按钮和增减按钮功能及置灰逻辑
+
+```ts
+import { LibPixiSubAddMinMax } from "./path/to/LibPixiSubAddMinMax";
+import { Container } from "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,
+});
+
+//绑定按钮事件
+minBtn.on("pointerdown", () => betAmountController.min());
+maxBtn.on("pointerdown", () => betAmountController.max());
+subBtn.on("pointerdown", () => betAmountController.sub());
+addBtn.on("pointerdown", () => betAmountController.add());
+```
+
+### LibPixiTable-数字表格
+
+> 绘制表格并填充数字
+
+```ts
+import { LibPixiTable } from "./path/to/LibPixiTable";
+import { Container } from "pixi.js";
+
+//定义表格数据
+const data: (number | string)[][] = [
+  [1, 2, 3],
+  [4, 5, 6],
+  [7, 8, 9],
+];
+
+//创建LibPixiTable实例
+const table = new LibPixiTable({
+  data,
+  cellWidth: 130,
+  cellHeight: 100,
+  fontSize: 24,
+  fontColor: "#B4B4B8",
+  lineWidth: 3,
+  lineColor: "#B4B4B8",
+});
+
+//将表格添加到舞台
+stage.addChild(table);
+```
+
+## Utils-工具方法
+
+### LibPixiAudio-音频播放器
+
+> 音频播放器
+
+```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);
+```
+
+### LibPixiCreateNineGrid-九宫格图
+
+> 九宫格图
+
+```ts
+const nineGrid = libPixiCreateNineGrid({
+  texture: yourTexture, // 传入纹理
+  dotWidth: 10, // 四个角的宽度，可以是数字或者数组
+  width: 200, // 宽度
+  height: 150, // 高度
+});
+```
+
+### LibPixiEvent-事件注册
+
+> 事件注册
+
+```ts
+libPixiEvent(container, 'pointerdown', (e) => {
+  console.log('Pointer down event triggered', e);
+});
+
+// 只执行一次的事件
+libPixiEvent(container, 'pointerup', (e) => {
+  console.log('Pointer up event triggered', e);
+}, true);
+```
+
+### LibPixiEventControlled-可关闭的事件
+
+> 设置可关闭的事件监听，调用自身后不再触发
+
+```ts
+const closeEvent = libPixiEventControlled(container, 'pointerdown', (e) => {
+  console.log('Pointer down event triggered', e);
+});
+
+// 调用返回的函数关闭事件监听
+closeEvent();
+```
+
+### LibPixiFilter-滤镜
+
+> 滤镜
+
+```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
+```
+
+### LibPixiIntervalTrigger-间隔触发
+
+> 间隔触发
+
+```ts
+const stopInterval = libPixiIntervalTrigger(() => {
+  console.log('Triggered interval callback');
+}, [500, 1000]); // 随机间隔 500ms 到 1000ms
+
+//or
+
+const stopInterval = libPixiIntervalTrigger(() => {
+  console.log('Triggered interval callback');
+}, 500); // 间隔 500ms
+
+// 停止间隔触发
+stopInterval();
+```
+
+### LibPixiOutsideClick-失焦隐藏
+
+> 点击容器外或入口按钮时隐藏
+
+```ts
+const stopOutsideClick = libPixiOutsideClick(container, button, () => {
+  console.log('Container closed');
+});
+
+// 停止监听点击事件
+stopOutsideClick();
+```
+
+### LibPixiOverflowHidden-溢出裁剪
+
+> 为容器创建并应用一个矩形遮罩，用于隐藏溢出的内容，函数会返回遮罩，可控制是否显示遮罩
+
+```ts
+const mask = libPixiOverflowHidden(container); // 为容器创建并应用矩形蒙版
+```
+
+### LibPixiPromiseTickerTimeout-TickerPromise定时器
+
+> 基于 Ticker 和 Promise 的定时器
+
+```ts
+libPixiPromiseTickerTimeout(1000, () => {
+  console.log('Callback after 1000ms');
+}).then(() => {
+  console.log('Timer completed');
+});
+```
+
+### LibPixiScaleContainer-超出缩放
+
+> 元素超过指定宽度就缩放
+
+```ts
+libPixiScaleContainer(container, 500, 300); // 容器超过 500px 宽度或 300px 高度时进行缩放
+```
+
+### LibPixiShadow-阴影
+
+> 为图片或容器设置阴影
+
+```ts
+libPixiShadow(container, {
+  color: "#ff0000",
+  alpha: 0.5,
+  blur: 5,
+  distance: 10,
+  offset: { x: 2, y: 2 },
+});
+```
+
+### LibPixiTickerTimeout-Ticker定时器
+
+> 基于 Ticker 的定时器
+
+```ts
+const stopTimer = libPixiTickerTimeout(() => {
+  console.log('Callback after delay');
+}, 1000);
+
+// 停止定时器
+stopTimer();
+```

package/dist/Components/Custom/LibPixiButtonHover/index.d.ts

@@ -0,0 +1,32 @@
+import { Container, type Texture } from "pixi.js";
+export interface LibPixiButtonHoverParams {
+    /** 图标资源 */
+    texture: Texture;
+    /** 悬浮图标 */
+    hoverTexture: Texture;
+    /** 染色 */
+    tintColor?: string;
+}
+/** @description 悬浮切换材质
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiButtonHover-按钮悬浮
+ */
+export declare class LibPixiButtonHover extends Container {
+    /** 按钮 */
+    private _btn;
+    /** 默认材质 */
+    private _texture;
+    /** 悬浮材质 */
+    private _hoverTexture;
+    /** 染色 */
+    private _tintColor?;
+    constructor(params: LibPixiButtonHoverParams);
+    /** @description 切换材质
+     * @param texture 默认材质
+     * @param hoverTexture 悬浮材质
+     */
+    toggleTexture(texture: Texture, hoverTexture: Texture): void;
+    /** @description 屏蔽
+     * @param status 状态
+     */
+    setDisabled(status: boolean): void;
+}

package/dist/Components/Custom/LibPixiButtonHover/index.js

@@ -0,0 +1,44 @@
+import { Container, Sprite } from "pixi.js";
+import { libPixiEvent } from "../../../Utils/LibPixiEvent";
+/** @description 悬浮切换材质
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiButtonHover-按钮悬浮
+ */
+export class LibPixiButtonHover extends Container {
+    constructor(params) {
+        super();
+        const { texture, hoverTexture, tintColor } = params;
+        this._texture = texture;
+        this._hoverTexture = hoverTexture;
+        this._tintColor = tintColor;
+        //创建图标容器
+        const iconBox = new Container();
+        this.addChild(iconBox);
+        //创建图标
+        this._btn = new Sprite(texture);
+        iconBox.addChild(this._btn);
+        tintColor && (this._btn.tint = tintColor);
+        libPixiEvent(iconBox, "pointerenter", () => {
+            this._btn._texture = this._hoverTexture;
+            this._btn.tint = "#fff";
+        });
+        libPixiEvent(iconBox, "pointerleave", () => {
+            this._btn._texture = this._texture;
+            tintColor && (this._btn.tint = tintColor);
+        });
+    }
+    /** @description 切换材质
+     * @param texture 默认材质
+     * @param hoverTexture 悬浮材质
+     */
+    toggleTexture(texture, hoverTexture) {
+        this._texture = texture;
+        this._hoverTexture = hoverTexture;
+        this._btn._texture = hoverTexture;
+    }
+    /** @description 屏蔽
+     * @param status 状态
+     */
+    setDisabled(status) {
+        this._btn.tint = status ? "#7C7C7C" : this._tintColor || "#fff";
+    }
+}

package/dist/Components/Custom/LibPixiCloseBtn/index.d.ts

@@ -0,0 +1,14 @@
+import { LibPixiContainer } from "../../Base/LibPixiContainer";
+import type { Sprite } from "pixi.js";
+export interface LibPixiCloseBtnParams {
+    /** 按钮素材 */
+    sprite: Sprite;
+    /** 点击回调 */
+    onClick: () => void;
+}
+/** @description 右上角关闭按钮，支持悬浮旋转动画
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiCloseBtn-关闭按钮
+ */
+export declare class LibPixiCloseBtn extends LibPixiContainer {
+    constructor(params: LibPixiCloseBtnParams);
+}

package/dist/Components/Custom/LibPixiCloseBtn/index.js

@@ -0,0 +1,35 @@
+import gsap from "gsap";
+import { LibPixiContainer } from "../../Base/LibPixiContainer";
+import { libPixiEvent } from "../../../Utils/LibPixiEvent";
+/** @description 右上角关闭按钮，支持悬浮旋转动画
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiCloseBtn-关闭按钮
+ */
+export class LibPixiCloseBtn extends LibPixiContainer {
+    constructor(params) {
+        const { sprite, onClick } = params;
+        super(sprite.width, sprite.height);
+        this.addChild(sprite);
+        sprite.anchor.set(0.5);
+        sprite.x = sprite.width / 2;
+        sprite.y = sprite.height / 2;
+        libPixiEvent(this, "pointerenter", () => {
+            gsap.to(sprite, {
+                duration: 0.25,
+                rotation: 180 * (Math.PI / 180),
+            });
+        });
+        libPixiEvent(this, "pointerleave", () => {
+            sprite.alpha = 1;
+            gsap.to(sprite, {
+                duration: 0.25,
+                rotation: 0,
+            });
+        });
+        libPixiEvent(this, "pointerdown", () => {
+            sprite.alpha = 0.5;
+        });
+        libPixiEvent(this, "pointerup", () => {
+            onClick();
+        });
+    }
+}

package/dist/Components/Custom/LibPixiDrawer/index.d.ts

@@ -0,0 +1,16 @@
+import { Container } from "pixi.js";
+/** @description 底部弹出抽屉
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDrawer-抽屉
+ */
+export declare class LibPixiDrawer extends Container {
+    /** 蒙版UI */
+    private _maskUI;
+    /** 抽屉容器 */
+    private _drawerContainer;
+    /**
+     * @param content 抽屉内容
+     */
+    constructor(content: Container);
+    /** @description 关闭 */
+    close(): Promise<void>;
+}

package/dist/Components/Custom/LibPixiDrawer/index.js

@@ -0,0 +1,59 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Container } from "pixi.js";
+import gsap from "gsap";
+import { LibPixiRectBgColor } from "../../Base/LibPixiRectBgColor";
+/** @description 底部弹出抽屉
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDrawer-抽屉
+ */
+export class LibPixiDrawer extends Container {
+    /**
+     * @param content 抽屉内容
+     */
+    constructor(content) {
+        super();
+        //蒙版
+        this._maskUI = new LibPixiRectBgColor({
+            bgColor: "#000",
+            width: 1080,
+            height: 1920,
+        });
+        this.addChild(this._maskUI);
+        this._maskUI.alpha = 0;
+        this._maskUI.eventMode = "static";
+        //弹窗内容容器
+        this._drawerContainer = content;
+        this.addChild(this._drawerContainer);
+        this._drawerContainer.y = this._maskUI.height;
+        gsap.to(this._maskUI, {
+            duration: 0.25,
+            alpha: 0.5,
+        });
+        gsap.to(this._drawerContainer, {
+            duration: 0.25,
+            ease: "power1.out",
+            y: this._maskUI.height - this._drawerContainer.height,
+        });
+    }
+    /** @description 关闭 */
+    close() {
+        return __awaiter(this, void 0, void 0, function* () {
+            gsap.to(this._drawerContainer, {
+                duration: 0.25,
+                y: this._maskUI.height,
+            });
+            yield gsap.to(this._maskUI, {
+                duration: 0.25,
+                delay: 0.125,
+                alpha: 0,
+            });
+        });
+    }
+}