lyb-pixi-js 1.1.11 → 1.1.13

package/Utils/LibPixiAudio.js

@@ -0,0 +1,172 @@
+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 gsap from "gsap";
+import { Assets } from "pixi.js";
+/** @description 音频播放器
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiAudio-音频播放器
+ */
+export class LibPixiAudio {
+    constructor() {
+        /** 是否启用音效 */
+        this.effectEnabled = true;
+        /** 是否启用音乐 */
+        this.musicEnabled = true;
+        /** 音乐是否处于暂停状态 */
+        this._isMusicPaused = false;
+        /** 是否已切换后台 */
+        this._isBackground = false;
+        /** 当前正在播放的音效列表 */
+        this._playingList = [];
+        /** @description 设置音效和音乐播放状态
+         * @param status 播放状态，false为暂停
+         */
+        this._setPlayStatus = (status) => {
+            if (status) {
+                !this._isMusicPaused && this._musicPlayer.play();
+            }
+            else {
+                this._musicPlayer.pause();
+            }
+            this._playingList.forEach((item) => {
+                if (status) {
+                    item.audio.play();
+                }
+                else {
+                    item.audio.pause();
+                }
+            });
+        };
+        this._musicPlayer = new Audio();
+        document.addEventListener("visibilitychange", () => {
+            this._isBackground = document.hidden;
+            this._setPlayStatus(!document.hidden);
+        });
+    }
+    /** @description 播放音效
+     * @param key 音效资源Key，内部会使用Assets.get(key)获取音频资源
+     * @param end 倒数几秒位置播放，单位秒
+     */
+    playEffect(key, end) {
+        return new Promise((resolve) => {
+            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);
+                resolve();
+            });
+            audio
+                .play()
+                .then(() => {
+                this._playingList.push({
+                    id,
+                    audio,
+                    url,
+                });
+            })
+                .catch(() => { });
+        });
+    }
+    /** @description 播放音乐
+     * @param key 音效资源Key，内部会使用Assets.get(key)获取音频资源
+     */
+    playMusic(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            //如果有音乐正在播放，则停止
+            if (this._musicPlayer) {
+                gsap.killTweensOf(this._musicPlayer);
+                yield gsap.to(this._musicPlayer, {
+                    volume: 0,
+                    duration: 1,
+                    ease: "linear",
+                });
+                this._musicPlayer.pause();
+            }
+            const url = Assets.get(key).url;
+            this._musicPlayer.src = url;
+            this._musicPlayer.loop = true;
+            this._musicPlayer.volume = 0;
+            const play = () => {
+                this._musicPlayer
+                    .play()
+                    .then(() => {
+                    this._isMusicPaused = false;
+                    gsap.killTweensOf(this._musicPlayer);
+                    gsap.to(this._musicPlayer, {
+                        volume: 1,
+                        duration: 1,
+                        ease: "linear",
+                    });
+                })
+                    .catch(() => {
+                    requestAnimationFrame(play.bind(this));
+                });
+            };
+            play();
+        });
+    }
+    /** @description 暂停音乐 */
+    pauseMusic() {
+        this._isMusicPaused = true;
+        this._musicPlayer.pause();
+    }
+    /** @description 继续播放音乐 */
+    resumeMusic() {
+        this._isMusicPaused = false;
+        this._musicPlayer.play();
+    }
+    /** @description 停止播放指定音效
+     * @param key 音效资源Key，内部会使用Assets.get(key)获取音频资源进行停止
+     */
+    stopEffect(link) {
+        const url = Assets.get(link).url;
+        this._playingList.forEach((item) => {
+            if (item.url === url) {
+                item.audio.pause();
+            }
+        });
+        this._playingList = this._playingList.filter((item) => item.url !== url);
+    }
+    /** @description 设置启用音效
+     * @param enabled 启用状态，false为禁用
+     */
+    setEffectEnabled(enabled) {
+        this.effectEnabled = enabled;
+        this._setEffectMute(!enabled);
+    }
+    /** @description 设置启用音乐
+     * @param enabled 启用状态，false为禁用
+     */
+    setMusicEnabled(enabled) {
+        this.musicEnabled = enabled;
+        this._setMusicMute(!enabled);
+    }
+    /** @description 设置静音音乐
+     * @param disabled 静音状态，true为静音
+     */
+    _setMusicMute(disabled) {
+        this._musicPlayer.muted = disabled || !this.musicEnabled;
+    }
+    /** @description 设置静音音效
+     * @param disabled 静音状态，true为静音
+     */
+    _setEffectMute(disabled) {
+        this._playingList.forEach((item) => {
+            item.audio.muted = disabled || !this.effectEnabled;
+        });
+    }
+}

package/Utils/LibPixiCreateNineGrid.d.ts

@@ -0,0 +1,15 @@
+import { NineSlicePlane, type Texture } from "pixi.js";
+export interface LibPixiCreateNineGridParams {
+    /** 九宫格图片 */
+    texture: Texture;
+    /** 四个角的宽度 */
+    dotWidth: number | [number, number, number, number];
+    /** 宽度 */
+    width: number;
+    /** 高度 */
+    height: number;
+}
+/** @description 九宫格图
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiCreateNineGrid-九宫格图
+ */
+export declare const libPixiCreateNineGrid: (params: LibPixiCreateNineGridParams) => NineSlicePlane;

package/Utils/LibPixiCreateNineGrid.js

@@ -0,0 +1,19 @@
+import { NineSlicePlane } from "pixi.js";
+/** @description 九宫格图
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiCreateNineGrid-九宫格图
+ */
+export const libPixiCreateNineGrid = (params) => {
+    const { texture, dotWidth, width, height } = params;
+    let slice_width = [];
+    // 四个角的宽度
+    if (Array.isArray(dotWidth)) {
+        slice_width = dotWidth;
+    }
+    else {
+        slice_width = [dotWidth, dotWidth, dotWidth, dotWidth];
+    }
+    const nineSlicePlane = new NineSlicePlane(texture, slice_width[0], slice_width[1], slice_width[2], slice_width[3]);
+    nineSlicePlane.width = width;
+    nineSlicePlane.height = height;
+    return nineSlicePlane;
+};

package/Utils/LibPixiEvent.d.ts

@@ -0,0 +1,9 @@
+import type { Container, DisplayObjectEvents } from "pixi.js";
+/** @description 事件注册
+ * @param v 事件容器
+ * @param eventName 事件名称
+ * @param callback 回调函数
+ * @param once 是否只执行一次
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiEvent-事件注册
+ */
+export declare const libPixiEvent: (v: Container, eventName: keyof DisplayObjectEvents, callback: (...args: any) => void, once?: boolean) => void;

package/Utils/LibPixiEvent.js

@@ -0,0 +1,22 @@
+/** @description 事件注册
+ * @param v 事件容器
+ * @param eventName 事件名称
+ * @param callback 回调函数
+ * @param once 是否只执行一次
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiEvent-事件注册
+ */
+export const libPixiEvent = (v, eventName, callback, once = false) => {
+    v.cursor = "pointer";
+    v.eventMode = "static";
+    const fn = (e) => {
+        if (e.button === 2)
+            return;
+        callback(e);
+    };
+    if (once) {
+        v.once(eventName, fn);
+    }
+    else {
+        v.on(eventName, fn);
+    }
+};

package/Utils/LibPixiEventControlled.d.ts

@@ -0,0 +1,8 @@
+import type { Container, DisplayObjectEvents } from "pixi.js";
+/** @description 设置可关闭的事件监听，调用自身后不再触发
+ * @param container 事件容器
+ * @param eventName 事件名称
+ * @param callback 事件回调
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiEventControlled-可关闭的事件
+ */
+export declare const libPixiEventControlled: (container: Container, eventName: keyof DisplayObjectEvents, callback: (...args: any) => void) => () => void;

package/Utils/LibPixiEventControlled.js

@@ -0,0 +1,21 @@
+/** @description 设置可关闭的事件监听，调用自身后不再触发
+ * @param container 事件容器
+ * @param eventName 事件名称
+ * @param callback 事件回调
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiEventControlled-可关闭的事件
+ */
+export const libPixiEventControlled = (container, eventName, callback) => {
+    let isDestroy = false;
+    container.cursor = "pointer";
+    container.eventMode = "static";
+    container.on(eventName, (e) => {
+        if (isDestroy)
+            return;
+        if (e.button === 2)
+            return;
+        callback(e);
+    });
+    return () => {
+        isDestroy = true;
+    };
+};

package/Utils/LibPixiFilter.d.ts

@@ -0,0 +1,9 @@
+/** @description 设置滤镜 */
+import { ColorMatrixFilter, BlurFilter } from "pixi.js";
+export type LibPixiSetFilterFilterName = "brightness" | "blur" | "desaturate" | "contrast";
+/** @description 滤镜
+ * @param filterName 滤镜名称
+ * @param v 滤镜值
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiFilter-滤镜
+ */
+export declare const libPixiFilter: (filterName: LibPixiSetFilterFilterName, v?: number) => ColorMatrixFilter | BlurFilter;

package/Utils/LibPixiFilter.js

@@ -0,0 +1,30 @@
+/** @description 设置滤镜 */
+import { ColorMatrixFilter, BlurFilter } from "pixi.js";
+/** @description 滤镜
+ * @param filterName 滤镜名称
+ * @param v 滤镜值
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiFilter-滤镜
+ */
+export const libPixiFilter = (filterName, v) => {
+    let filter;
+    if (filterName === "brightness") {
+        filter = new ColorMatrixFilter();
+        filter.brightness(v, false); // 设置亮度
+    }
+    else if (filterName === "blur") {
+        filter = new BlurFilter();
+    }
+    else if (filterName === "desaturate") {
+        filter = new ColorMatrixFilter();
+        filter.desaturate();
+    }
+    else if (filterName === "contrast") {
+        filter = new ColorMatrixFilter();
+        filter.contrast(v, false);
+    }
+    else {
+        throw new Error("未知滤镜名称");
+    }
+    filter.resolution = window.devicePixelRatio || 1;
+    return filter;
+};

package/Utils/LibPixiIntervalTrigger.d.ts

@@ -0,0 +1,6 @@
+/** @description 间隔触发
+ * @param callback 回调函数
+ * @param interval 间隔毫秒，或随机范围
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiIntervalTrigger-间隔触发
+ */
+export declare const libPixiIntervalTrigger: (callback: () => void, interval: number | [number, number]) => () => void;

package/Utils/LibPixiIntervalTrigger.js

@@ -0,0 +1,33 @@
+import { Ticker } from "pixi.js"; //@ts-ignore
+import { libJsRandom } from "lyb-js/Random/LibJsRandom.js";
+/** @description 间隔触发
+ * @param callback 回调函数
+ * @param interval 间隔毫秒，或随机范围
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiIntervalTrigger-间隔触发
+ */
+export const libPixiIntervalTrigger = (callback, interval) => {
+    let elapsedTime = 0;
+    // 创建一个新的 Ticker 实例
+    const ticker = new Ticker();
+    // 创建回调函数
+    const tickerCallback = (deltaTime) => {
+        elapsedTime += deltaTime * ticker.deltaMS;
+        let intervalNum = 0;
+        if (Array.isArray(interval)) {
+            intervalNum = libJsRandom(interval[0], interval[1], 2);
+        }
+        else {
+            intervalNum = interval;
+        }
+        if (elapsedTime >= intervalNum) {
+            callback();
+            elapsedTime = 0;
+        }
+    };
+    ticker.add(tickerCallback);
+    ticker.start();
+    return () => {
+        ticker.remove(tickerCallback);
+        ticker.stop();
+    };
+};

package/Utils/LibPixiOutsideClick.d.ts

@@ -0,0 +1,8 @@
+import type { Container } from "pixi.js";
+/** @description 点击容器外或入口按钮时隐藏
+ * @param container 容器
+ * @param btn 按钮
+ * @param onClose 关闭回调
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiOutsideClick-失焦隐藏
+ */
+export declare const libPixiOutsideClick: (container: Container, btn: Container, onClose: () => void) => () => void;

package/Utils/LibPixiOutsideClick.js

@@ -0,0 +1,22 @@
+/** @description 点击容器外或入口按钮时隐藏
+ * @param container 容器
+ * @param btn 按钮
+ * @param onClose 关闭回调
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiOutsideClick-失焦隐藏
+ */
+export const libPixiOutsideClick = (container, btn, onClose) => {
+    const outsideClick = (e) => {
+        const btnInside = btn.getBounds().contains(e.clientX, e.clientY);
+        const containerInside = container
+            .getBounds()
+            .contains(e.clientX, e.clientY);
+        if (!btnInside && !containerInside && container.visible) {
+            onClose();
+            window.removeEventListener("pointerdown", outsideClick);
+        }
+    };
+    window.addEventListener("pointerdown", outsideClick);
+    return () => {
+        window.removeEventListener("pointerdown", outsideClick);
+    };
+};

package/Utils/LibPixiOverflowHidden.d.ts

@@ -0,0 +1,6 @@
+import { Graphics, type Container } from "pixi.js";
+/** @description 为容器创建并应用一个矩形遮罩，用于隐藏溢出的内容，函数会返回遮罩，可控制是否显示遮罩
+ * @param container 需要设置遮罩裁剪的容器
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiOverflowHidden-溢出裁剪
+ */
+export declare const libPixiOverflowHidden: (container: Container) => Graphics;

package/Utils/LibPixiOverflowHidden.js

@@ -0,0 +1,14 @@
+import { Graphics } from "pixi.js";
+/** @description 为容器创建并应用一个矩形遮罩，用于隐藏溢出的内容，函数会返回遮罩，可控制是否显示遮罩
+ * @param container 需要设置遮罩裁剪的容器
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiOverflowHidden-溢出裁剪
+ */
+export const libPixiOverflowHidden = (container) => {
+    const mask = new Graphics();
+    mask.beginFill(0xffffff);
+    mask.drawRect(0, 0, container.width, container.height);
+    mask.endFill();
+    container.addChild(mask);
+    container.mask = mask;
+    return mask;
+};

package/Utils/LibPixiPromiseTickerTimeout.d.ts

@@ -0,0 +1,6 @@
+/** @description 基于 Ticker 和 Promise 的定时器
+ * @param delay 延迟时间
+ * @param callback 延迟后执行的函数
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPromiseTickerTimeout-TickerPromise定时器
+ */
+export declare const libPixiPromiseTickerTimeout: (delay?: number, callback?: () => void) => Promise<void>;

package/Utils/LibPixiPromiseTickerTimeout.js

@@ -0,0 +1,22 @@
+import { Ticker } from "pixi.js";
+/** @description 基于 Ticker 和 Promise 的定时器
+ * @param delay 延迟时间
+ * @param callback 延迟后执行的函数
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPromiseTickerTimeout-TickerPromise定时器
+ */
+export const libPixiPromiseTickerTimeout = (delay = 1, callback) => {
+    return new Promise((resolve) => {
+        let elapsedTime = 0;
+        const ticker = new Ticker();
+        const tickerCallback = () => {
+            elapsedTime += ticker.deltaMS;
+            if (elapsedTime >= delay) {
+                callback === null || callback === void 0 ? void 0 : callback();
+                ticker.destroy();
+                resolve();
+            }
+        };
+        ticker.add(tickerCallback);
+        ticker.start();
+    });
+};

package/Utils/LibPixiScaleContainer.d.ts

@@ -0,0 +1,8 @@
+import type { Container, Sprite, Text } from "pixi.js";
+/** @description 元素超过指定宽度就缩放
+ * @param scaleContainer 需要缩放的元素
+ * @param maxWidth 最大宽度
+ * @param maxHeight 最大高度
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScaleContainer-超出缩放
+ */
+export declare const libPixiScaleContainer: (scaleContainer: Container | Sprite | Text, maxWidth: number, maxHeight?: number) => void;

package/Utils/LibPixiScaleContainer.js

@@ -0,0 +1,14 @@
+/** @description 元素超过指定宽度就缩放
+ * @param scaleContainer 需要缩放的元素
+ * @param maxWidth 最大宽度
+ * @param maxHeight 最大高度
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScaleContainer-超出缩放
+ */
+export const libPixiScaleContainer = (scaleContainer, maxWidth, maxHeight) => {
+    const scaleX = (maxWidth / scaleContainer.width) * scaleContainer.scale.x;
+    const scaleY = maxHeight
+        ? (maxHeight / scaleContainer.height) * scaleContainer.scale.y
+        : scaleX;
+    const scale = Math.min(scaleX, scaleY);
+    scaleContainer.scale.set(scale > 1 ? 1 : scale);
+};

package/Utils/LibPixiShadow.d.ts

@@ -0,0 +1,17 @@
+import type { Container } from "pixi.js";
+export interface LibPixiShadowShadowConfig {
+    color?: string;
+    alpha?: number;
+    blur?: number;
+    distance?: number;
+    offset?: {
+        x: number;
+        y: number;
+    };
+}
+/** @description 为图片或容器设置阴影
+ * @param container 需要添加阴影的元素
+ * @param config 配置项
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiShadow-阴影
+ */
+export declare const libPixiShadow: (container: Container, config?: LibPixiShadowShadowConfig) => void;

package/Utils/LibPixiShadow.js

@@ -0,0 +1,18 @@
+import { DropShadowFilter } from "@pixi/filter-drop-shadow";
+/** @description 为图片或容器设置阴影
+ * @param container 需要添加阴影的元素
+ * @param config 配置项
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiShadow-阴影
+ */
+export const libPixiShadow = (container, config) => {
+    const { color = "#000", alpha = 0.25, blur = 1, distance = 0, offset = { x: 0, y: 0 }, } = config || {};
+    const shadowFilter = new DropShadowFilter({
+        color: color,
+        alpha,
+        blur,
+        distance,
+        offset,
+    });
+    shadowFilter.resolution = window.devicePixelRatio || 1;
+    container.filters = [shadowFilter];
+};

package/Utils/LibPixiTickerTimeout.d.ts

@@ -0,0 +1,6 @@
+/** @description 基于 Ticker 的定时器
+ * @param callback 延迟后执行的函数
+ * @param delay 延迟时间
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiTickerTimeout-Ticker定时器
+ */
+export declare const libPixiTickerTimeout: (callback: () => void, delay?: number) => () => void;

package/Utils/LibPixiTickerTimeout.js

@@ -0,0 +1,28 @@
+import { Ticker } from "pixi.js";
+/** @description 基于 Ticker 的定时器
+ * @param callback 延迟后执行的函数
+ * @param delay 延迟时间
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiTickerTimeout-Ticker定时器
+ */
+export const libPixiTickerTimeout = (callback, delay = 1) => {
+    let elapsedTime = 0;
+    const ticker = new Ticker();
+    const tickerCallback = () => {
+        elapsedTime += ticker.deltaMS;
+        if (elapsedTime >= delay) {
+            callback === null || callback === void 0 ? void 0 : callback();
+            try {
+                ticker.destroy();
+            }
+            catch (error) { }
+        }
+    };
+    ticker.add(tickerCallback);
+    ticker.start();
+    return () => {
+        try {
+            ticker.destroy();
+        }
+        catch (error) { }
+    };
+};

package/index.d.ts

@@ -0,0 +1 @@
+export * as LibPixiJs from "./libPixiJs";

package/index.js

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