lyb-pixi-js 1.1.11 → 1.1.13

package/Components/Custom/LibPixiScrollNum.js

@@ -0,0 +1,146 @@
+import { Graphics } from "pixi.js";
+import gsap from "gsap";
+import { LibPixiContainer } from '../Base/LibPixiContainer';
+/** @description 通过鼠标或手指拖动数字列选择数字
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
+ */
+export class LibPixiScrollNum extends LibPixiContainer {
+    constructor(params) {
+        const { width, height, content, slideCallback, scrollCallback, pageNum, pageHeight, } = params;
+        super(width, height);
+        /** 当前幻灯片索引 */
+        this._currentIndex = 0;
+        /** 滚动区域高度 */
+        this._scrollHeight = 0;
+        /** 滑动区域高度 */
+        this._slideHeight = 0;
+        /** 记录拖动开始时的Y坐标 */
+        this._startY = 0;
+        /** 偏移量 */
+        this._offsetY = 0;
+        /** 最大索引 */
+        this._pageNum = 0;
+        /** 记录开始时间 */
+        this._startTime = new Date().getTime();
+        /** 是否正在拖动 */
+        this._isDragging = false;
+        //设置遮罩
+        const mask = new Graphics();
+        mask.beginFill(0xffffff);
+        mask.drawRect(0, 0, this.width, this.height);
+        mask.endFill();
+        this.addChild(mask);
+        this.mask = mask;
+        this._scrollHeight = height;
+        this._slideHeight = pageHeight;
+        this._slideArea = content;
+        this._slideCallback = slideCallback;
+        this._scrollCallback = scrollCallback;
+        this._pageNum = pageNum - 1;
+        this.addChild(this._slideArea);
+        this._slideArea.x = width / 2;
+        this._slideArea.y = this._scrollHeight / 2;
+        // 监听拖动事件
+        this.eventMode = "static";
+        this.cursor = "pointer";
+        this.on("pointerdown", this._onDragStart);
+        window.addEventListener("pointermove", this._onDragMove.bind(this));
+        window.addEventListener("pointerup", this._onDragEnd.bind(this));
+    }
+    /** @description 更新坐标
+     * @param y Y坐标
+     * @param index 页数索引
+     */
+    updatePosition(y, index) {
+        this._slideArea.y = y;
+        this._currentIndex = index;
+    }
+    /** @description 滑动到指定索引
+     * @param index 页数索引
+     * @param animate 是否需要过渡动画
+     */
+    slideTo(index, animate = true) {
+        var _a;
+        if (index < 0) {
+            // 回弹到第一张
+            gsap.to(this._slideArea, {
+                y: this._scrollHeight / 2,
+                duration: 0.25,
+                onUpdate: () => {
+                    var _a;
+                    (_a = this._scrollCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._slideArea.y, this._currentIndex);
+                },
+            });
+            this._currentIndex = 0;
+        }
+        else if (index > this._pageNum) {
+            // 回弹到最后一张
+            gsap.to(this._slideArea, {
+                y: -this._pageNum * this._slideHeight + this._scrollHeight / 2,
+                duration: 0.5,
+                onUpdate: () => {
+                    var _a;
+                    (_a = this._scrollCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._slideArea.y, this._currentIndex);
+                },
+            });
+            this._currentIndex = this._pageNum;
+        }
+        else {
+            // 正常滑动
+            this._currentIndex = index;
+            gsap.to(this._slideArea, {
+                y: -this._currentIndex * this._slideHeight + this._scrollHeight / 2,
+                duration: animate ? 0.25 : 0.01,
+                onUpdate: () => {
+                    var _a;
+                    (_a = this._scrollCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._slideArea.y, this._currentIndex);
+                },
+            });
+        }
+        (_a = this._slideCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._currentIndex);
+    }
+    /** @description 开始拖动 */
+    _onDragStart(event) {
+        this._isDragging = true;
+        this._startY = event.data.global.y;
+        this._offsetY = this._slideArea.y;
+        gsap.killTweensOf(this._slideArea);
+        this._startTime = new Date().getTime();
+    }
+    /** @description 拖动中 */
+    _onDragMove(event) {
+        var _a;
+        if (!this._isDragging)
+            return;
+        const moveY = event.pageY - this._startY;
+        this._slideArea.y = this._offsetY + moveY;
+        (_a = this._scrollCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._slideArea.y, this._currentIndex);
+    }
+    /** @description 结束拖动 */
+    _onDragEnd(event) {
+        if (!this._isDragging)
+            return;
+        this._isDragging = false;
+        const endTime = new Date().getTime() - this._startTime;
+        const slide = this._startY - event.pageY; // 计算滑动的距离
+        const slideSpeed = Math.abs(slide) / endTime; // 计算滑动速度
+        const speedThreshold = 0.275;
+        // 计算滑动的页面变化数，根据滑动距离来调整页码
+        const slideThreshold = this._slideHeight / 2;
+        // 计算实际的翻页增量，使用 `slide / this._slideHeight` 来计算滑动的页数
+        const pageChange = Math.round(slide / this._slideHeight);
+        // 如果滑动速度足够快，且滑动的距离大于阈值，强制翻页
+        if (Math.abs(slide) > slideThreshold || slideSpeed > speedThreshold) {
+            this._currentIndex += pageChange; // 这里会根据滑动的方向来增加或减少当前页码
+        }
+        // 防止超出页面的上下限
+        if (this._currentIndex < 0) {
+            this._currentIndex = 0; // 保证当前页码不小于 0
+        }
+        else if (this._currentIndex > this._pageNum) {
+            this._currentIndex = this._pageNum; // 保证当前页码不大于最大页码
+        }
+        // 执行滑动到目标页码
+        this.slideTo(this._currentIndex);
+    }
+}

package/Components/Custom/LibPixiSlider.d.ts

@@ -0,0 +1,45 @@
+import { Container } from "pixi.js";
+import { LibPixiContainer } from '../Base/LibPixiContainer';
+/** @description 类似轮播图，但是不会自动轮播
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlider-横向滑动图
+ */
+export declare class LibPixiSlider extends LibPixiContainer {
+    /** 当前幻灯片索引 */
+    private _currentIndex;
+    /** 滑动区域宽度 */
+    private _slideWidth;
+    /** 记录拖动开始时的X坐标 */
+    private _startX;
+    /** 偏移量 */
+    private _offsetX;
+    /** 最大索引 */
+    private _pageNum;
+    /** 记录开始时间 */
+    private _startTime;
+    private _isDragging;
+    /** 滑动内容 */
+    private _slideArea;
+    /** @description 滑动回调 */
+    private slideCallback;
+    /**
+     * @param width 宽度
+     * @param height 高度
+     * @param content 内容
+     * @param slideCallback 滑动结束回调
+     */
+    constructor(width: number, height: number, content: Container, slideCallback: (pageIndex: number, _pageNum: number) => void);
+    /** @description 上一页 */
+    prev(): void;
+    /** @description 下一页 */
+    next(): void;
+    /** @description 滑动到指定索引
+     * @param index 索引
+     */
+    private _slideTo;
+    /** @description 开始拖动 */
+    private _onDragStart;
+    /** @description 拖动中 */
+    private _onDragMove;
+    /** @description 结束拖动 */
+    private _onDragEnd;
+}

package/Components/Custom/LibPixiSlider.js

@@ -0,0 +1,111 @@
+import gsap from "gsap";
+import { libPixiOverflowHidden } from "../../Utils/LibPixiOverflowHidden";
+import { LibPixiContainer } from '../Base/LibPixiContainer';
+/** @description 类似轮播图，但是不会自动轮播
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlider-横向滑动图
+ */
+export class LibPixiSlider extends LibPixiContainer {
+    /**
+     * @param width 宽度
+     * @param height 高度
+     * @param content 内容
+     * @param slideCallback 滑动结束回调
+     */
+    constructor(width, height, content, slideCallback) {
+        super(width, height);
+        /** 当前幻灯片索引 */
+        this._currentIndex = 0;
+        /** 滑动区域宽度 */
+        this._slideWidth = 0;
+        /** 记录拖动开始时的X坐标 */
+        this._startX = 0;
+        /** 偏移量 */
+        this._offsetX = 0;
+        /** 最大索引 */
+        this._pageNum = 0;
+        /** 记录开始时间 */
+        this._startTime = new Date().getTime();
+        /* 是否正在拖动 */
+        this._isDragging = false;
+        libPixiOverflowHidden(this);
+        this._slideWidth = width;
+        this._slideArea = content;
+        this.slideCallback = slideCallback;
+        this._pageNum = Math.floor(content.width / this._slideWidth) - 1;
+        this.addChild(content);
+        // 监听拖动事件
+        this.eventMode = "static";
+        this.cursor = "pointer";
+        this.on("pointerdown", this._onDragStart);
+        window.addEventListener("pointermove", this._onDragMove.bind(this));
+        window.addEventListener("pointerup", this._onDragEnd.bind(this));
+    }
+    /** @description 上一页 */
+    prev() {
+        this._slideTo(this._currentIndex - 1);
+    }
+    /** @description 下一页 */
+    next() {
+        this._slideTo(this._currentIndex + 1);
+    }
+    /** @description 滑动到指定索引
+     * @param index 索引
+     */
+    _slideTo(index) {
+        if (index < 0) {
+            // 回弹到第一张
+            gsap.to(this._slideArea, { x: 0, duration: 0.25 });
+            this._currentIndex = 0;
+        }
+        else if (index > this._pageNum) {
+            // 回弹到最后一张
+            gsap.to(this._slideArea, {
+                x: -this._pageNum * this._slideWidth,
+                duration: 0.5,
+            });
+            this._currentIndex = this._pageNum;
+        }
+        else {
+            // 正常滑动
+            this._currentIndex = index;
+            gsap.to(this._slideArea, {
+                x: -this._currentIndex * this._slideWidth,
+                duration: 0.25,
+            });
+        }
+        this.slideCallback(this._currentIndex, this._pageNum);
+    }
+    /** @description 开始拖动 */
+    _onDragStart(event) {
+        this._isDragging = true;
+        this._startX = event.global.x;
+        this._offsetX = this._slideArea.x;
+        gsap.killTweensOf(this._slideArea);
+        this._startTime = new Date().getTime();
+    }
+    /** @description 拖动中 */
+    _onDragMove(event) {
+        if (!this._isDragging)
+            return;
+        const moveX = event.pageX - this._startX;
+        this._slideArea.x = this._offsetX + moveX;
+    }
+    /** @description 结束拖动 */
+    _onDragEnd(event) {
+        if (!this._isDragging)
+            return;
+        this._isDragging = false;
+        const endTime = new Date().getTime() - this._startTime;
+        const slide = this._startX - event.pageX;
+        const slideSpeed = Math.abs(slide) / endTime;
+        //滑动距离阈值，滑动到一半以上必定翻页
+        const slideThreshold = this._slideWidth / 2;
+        //滑动速度阈值，滑动速度大于这个值，必定翻页
+        const speedThreshold = 0.275;
+        //如果滑动距离大于阈值，或速度大于阈值翻页
+        if (Math.abs(slide) > slideThreshold || slideSpeed > speedThreshold) {
+            slide > 0 ? this._currentIndex++ : this._currentIndex--;
+        }
+        this._slideTo(this._currentIndex);
+    }
+}

package/Components/Custom/LibPixiSubAddMinMax.d.ts

@@ -0,0 +1,49 @@
+import type { Container } from "pixi.js";
+export interface LibPixiSubAddMinMaxParams {
+    /** 最小按钮 */
+    minBtn: Container;
+    /** 最大按钮 */
+    maxBtn: Container;
+    /** 增加按钮 */
+    subBtn: Container;
+    /** 减少按钮 */
+    addBtn: Container;
+    /** 初始下注索引 */
+    initialBetIndex: number;
+    /** 下注金额列表 */
+    betAmountListLength: number;
+    /** 金额更新回调 */
+    onAmountIndex: (index: number) => 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 betAmountListLength;
+    /** 金额更新回调 */
+    onAmountIndex: (index: number) => void;
+    constructor(params: LibPixiSubAddMinMaxParams);
+    /** @description 点击最小按钮 */
+    min(): void;
+    /** @description 点击最大按钮 */
+    max(): void;
+    /** @description 点击减少按钮 */
+    sub(): void;
+    /** @description 点击增加按钮 */
+    add(): void;
+    /** @description 改变最小最大按钮状态及回调
+     * @param index 索引
+     */
+    minMaxUpdateIndex(index: number): void;
+    /** @description 设置最大最小按钮置灰及恢复 */
+    private _setGrey;
+}

package/Components/Custom/LibPixiSubAddMinMax.js

@@ -0,0 +1,76 @@
+import { libPixiFilter } from "../../Utils/LibPixiFilter"; //@ts-ignore
+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.onAmountIndex = onAmountIndex;
+        this.betAmountListLength = betAmountListLength;
+        //金额增减步进器
+        this.baseNumSteper = new LibJsNumberStepper(betAmountListLength, //@ts-ignore
+        (index) => {
+            this.onAmountIndex(index);
+            this.minMaxUpdateIndex(index);
+        });
+        //设置初始状态
+        this.minMaxUpdateIndex(initialBetIndex);
+        this.baseNumSteper.updateIndex(initialBetIndex);
+    }
+    /** @description 点击最小按钮 */
+    min() {
+        this.minMaxUpdateIndex(0);
+        this.onAmountIndex(0);
+    }
+    /** @description 点击最大按钮 */
+    max() {
+        const index = this.betAmountListLength - 1;
+        this.minMaxUpdateIndex(index);
+        this.onAmountIndex(index);
+    }
+    /** @description 点击减少按钮 */
+    sub() {
+        this.baseNumSteper.down("sub");
+    }
+    /** @description 点击增加按钮 */
+    add() {
+        this.baseNumSteper.down("add");
+    }
+    /** @description 改变最小最大按钮状态及回调
+     * @param index 索引
+     */
+    minMaxUpdateIndex(index) {
+        if (index === 0) {
+            this._setGrey("min");
+        }
+        else if (index === this.betAmountListLength - 1) {
+            this._setGrey("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")];
+        }
+    }
+}

package/Components/Custom/LibPixiTable.d.ts

@@ -0,0 +1,52 @@
+/** @description 表格绘制并填入数字 */
+import { Container } from "pixi.js";
+export interface LibPixiTableParams {
+    /** 表格数据 */
+    data: (number | string)[][];
+    /** 单元格宽度 */
+    cellWidth?: number;
+    /** 单元格高度 */
+    cellHeight?: number;
+    /** 字体大小 */
+    fontSize?: number;
+    /** 字体颜色 */
+    fontColor?: string;
+    /** 线条厚度 */
+    lineWidth?: number;
+    /** 线条颜色 */
+    lineColor?: string;
+}
+/** @description 绘制表格并填充数字
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiTable-数字表格
+ */
+export declare class LibPixiTable extends Container {
+    /** 行数 */
+    private _rows;
+    /** 列数 */
+    private _cols;
+    /** 单元格宽度 */
+    private _cellWidth;
+    /** 单元格高度 */
+    private _cellHeight;
+    /** 字体大小 */
+    private _fontSize;
+    /** 线条宽度 */
+    private _lineWidth;
+    /** 字体颜色 */
+    private _fontColor;
+    /** 线条颜色 */
+    private _lineColor;
+    /** 二维数字数组 */
+    private _data;
+    constructor(params: LibPixiTableParams);
+    /** @description 绘制表格 */
+    private _drawTable;
+    /** @description 填充数字 */
+    private fillNumbers;
+    /** @description 创建数字文本
+     * @param number 数字
+     * @param col 列索引
+     * @param row 行索引
+     */
+    private _createNumberText;
+}

package/Components/Custom/LibPixiTable.js

@@ -0,0 +1,70 @@
+/** @description 表格绘制并填入数字 */
+import { Text, Container, Graphics } from "pixi.js";
+import { libPixiScaleContainer } from "../../Utils/LibPixiScaleContainer";
+/** @description 绘制表格并填充数字
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiTable-数字表格
+ */
+export class LibPixiTable extends Container {
+    constructor(params) {
+        super();
+        const { data, cellWidth = 130, cellHeight = 100, fontColor = "#B4B4B8", fontSize = 24, lineWidth = 3, lineColor = "#B4B4B8", } = params;
+        this._data = data;
+        this._rows = data.length;
+        this._cols = data[0].length;
+        this._cellWidth = cellWidth;
+        this._cellHeight = cellHeight;
+        this._fontColor = fontColor;
+        this._fontSize = fontSize;
+        this._lineWidth = lineWidth;
+        this._lineColor = lineColor;
+        this._drawTable();
+        this.fillNumbers();
+    }
+    /** @description 绘制表格 */
+    _drawTable() {
+        const tableWidth = this._cellWidth * this._cols;
+        const tableHeight = this._cellHeight * this._rows;
+        const graphics = new Graphics();
+        graphics.lineStyle(this._lineWidth, this._lineColor);
+        // 绘制表格外框
+        graphics.drawRect(0, 0, tableWidth, tableHeight);
+        // 绘制横线
+        for (let i = 1; i < this._rows; i++) {
+            graphics.moveTo(0, i * this._cellHeight);
+            graphics.lineTo(tableWidth, i * this._cellHeight);
+        }
+        // 绘制竖线
+        for (let j = 1; j < this._cols; j++) {
+            graphics.moveTo(j * this._cellWidth, 0);
+            graphics.lineTo(j * this._cellWidth, tableHeight);
+        }
+        this.addChild(graphics);
+    }
+    /** @description 填充数字 */
+    fillNumbers() {
+        for (let row = 0; row < this._rows; row++) {
+            for (let col = 0; col < this._cols; col++) {
+                const number = this._data[row][col];
+                this._createNumberText(number, col, row);
+            }
+        }
+    }
+    /** @description 创建数字文本
+     * @param number 数字
+     * @param col 列索引
+     * @param row 行索引
+     */
+    _createNumberText(number, col, row) {
+        const text = new Text(number.toString(), {
+            _fontSize: this._fontSize,
+            fill: this._fontColor,
+        });
+        // 计算文本的居中位置
+        const x = col * this._cellWidth + this._cellWidth / 2;
+        const y = row * this._cellHeight + this._cellHeight / 2;
+        this.addChild(text);
+        text.anchor.set(0.5);
+        text.position.set(x, y);
+        libPixiScaleContainer(text, this._cellWidth * 0.9);
+    }
+}

package/Utils/LibPixiAudio.d.ts

@@ -0,0 +1,55 @@
+/** @description 音频播放器
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiAudio-音频播放器
+ */
+export declare class LibPixiAudio {
+    /** 是否启用音效 */
+    effectEnabled: boolean;
+    /** 是否启用音乐 */
+    musicEnabled: boolean;
+    /** 音乐是否处于暂停状态 */
+    private _isMusicPaused;
+    /** 是否已切换后台 */
+    private _isBackground;
+    /** 当前音乐播放器 */
+    private _musicPlayer;
+    /** 当前正在播放的音效列表 */
+    private _playingList;
+    constructor();
+    /** @description 播放音效
+     * @param key 音效资源Key，内部会使用Assets.get(key)获取音频资源
+     * @param end 倒数几秒位置播放，单位秒
+     */
+    playEffect(key: string, end?: number): Promise<void>;
+    /** @description 播放音乐
+     * @param key 音效资源Key，内部会使用Assets.get(key)获取音频资源
+     */
+    playMusic(key: string): Promise<void>;
+    /** @description 暂停音乐 */
+    pauseMusic(): void;
+    /** @description 继续播放音乐 */
+    resumeMusic(): void;
+    /** @description 停止播放指定音效
+     * @param key 音效资源Key，内部会使用Assets.get(key)获取音频资源进行停止
+     */
+    stopEffect(link: string): void;
+    /** @description 设置启用音效
+     * @param enabled 启用状态，false为禁用
+     */
+    setEffectEnabled(enabled: boolean): void;
+    /** @description 设置启用音乐
+     * @param enabled 启用状态，false为禁用
+     */
+    setMusicEnabled(enabled: boolean): void;
+    /** @description 设置音效和音乐播放状态
+     * @param status 播放状态，false为暂停
+     */
+    private _setPlayStatus;
+    /** @description 设置静音音乐
+     * @param disabled 静音状态，true为静音
+     */
+    private _setMusicMute;
+    /** @description 设置静音音效
+     * @param disabled 静音状态，true为静音
+     */
+    private _setEffectMute;
+}