lyb-pixi-js 1.12.33 → 1.12.34

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/LibPixiPolygonDrawTool.d.ts

@@ -0,0 +1,44 @@
+import { type Application } from "pixi.js";
+export interface LibPixiPolygonDrawToolParams {
+    /** 输出的数组内容格式 */
+    outFormat?: "object" | "number";
+    /** 圆点半径 */
+    dotRadius?: number;
+    /** 圆点颜色 */
+    dotColor?: string | number;
+    /** 多边形颜色 */
+    polygonColor?: string | number;
+    /** 多边形透明度 */
+    polygonAlpha?: number;
+}
+/** @description 多边形绘制工具，绘制时浏览器窗口需要全屏显示，空格键控制开始和结束，开始后鼠标进行点击绘制，退格删除点，空格结束绘制，绘制结果在控制台打印，不满意可再次按空格清空并重新绘制
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygonDrawTool-多边形绘制
+ */
+export declare class LibPixiPolygonDrawTool {
+    /** App */
+    private _app;
+    /** 多边形 */
+    private _polygon;
+    /** 是否正在绘制 */
+    private _drawing;
+    /** 储点的数组 */
+    private _points;
+    /** 起始点 */
+    private _startPoint;
+    /** 实际绘制的点 */
+    private _realPoints;
+    /** 点元素 */
+    private _pointElements;
+    /** 参数 */
+    private _params;
+    constructor(app: Application, params?: LibPixiPolygonDrawToolParams);
+    private _setupListeners;
+    /** @description 控制绘制开始和结束 */
+    private toggleDrawing;
+    /** @description 添加点坐标 */
+    private _addPoint;
+    /** @description 绘制多边形 */
+    private _drawPolygon;
+    /** @description 绘制一个点 */
+    private _drawDot;
+}

package/Utils/LibPixiPolygonDrawTool.js

@@ -0,0 +1,114 @@
+import { Graphics, } from "pixi.js";
+/** @description 多边形绘制工具，绘制时浏览器窗口需要全屏显示，空格键控制开始和结束，开始后鼠标进行点击绘制，退格删除点，空格结束绘制，绘制结果在控制台打印，不满意可再次按空格清空并重新绘制
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygonDrawTool-多边形绘制
+ */
+export class LibPixiPolygonDrawTool {
+    constructor(app, params = {}) {
+        /** 是否正在绘制 */
+        this._drawing = false;
+        /** 储点的数组 */
+        this._points = [];
+        /** 起始点 */
+        this._startPoint = [];
+        /** 实际绘制的点 */
+        this._realPoints = [];
+        /** 点元素 */
+        this._pointElements = [];
+        this._app = app;
+        this._params = Object.assign({ outFormat: "number", dotRadius: 2, dotColor: "#fff", polygonColor: "#68CCFF", polygonAlpha: 0.5 }, params);
+        this._app.stage.sortableChildren = true;
+        this._polygon = new Graphics();
+        this._app.stage.addChild(this._polygon);
+        this._polygon.zIndex = 999999;
+        this._setupListeners();
+    }
+    _setupListeners() {
+        // 监听键盘空格键按下事件
+        window.addEventListener("keydown", (event) => {
+            if (event.code === "Space") {
+                this.toggleDrawing();
+            }
+            else if (event.code === "Backspace") {
+                this._points.pop();
+                this._realPoints.pop();
+                this._drawPolygon();
+            }
+        });
+        // 监听鼠标点击事件
+        this._app.stage.eventMode = "static";
+        this._app.stage.on("pointerdown", (event) => {
+            if (this._drawing) {
+                this._addPoint(event);
+            }
+        });
+    }
+    /** @description 控制绘制开始和结束 */
+    toggleDrawing() {
+        if (this._drawing) {
+            alert("绘制结束");
+            this._points.push({ x: 0, y: 0 });
+            if (this._params.outFormat === "object") {
+                console.log(this._points);
+            }
+            else {
+                console.log(this._points.map((item) => [item.x, item.y]).flat());
+            }
+        }
+        else {
+            alert("开始绘制");
+            this._startPoint = [];
+            this._points = [];
+            this._realPoints = [];
+            this._polygon.clear();
+            this._pointElements.forEach((item) => item.destroy());
+            this._pointElements = [];
+        }
+        this._drawing = !this._drawing;
+    }
+    /** @description 添加点坐标 */
+    _addPoint(event) {
+        const x = Number(event.clientX.toFixed(0));
+        const y = Number(event.clientY.toFixed(0));
+        this._realPoints.push({ x, y });
+        // 如果是第一个点，记录为原点（0, 0）
+        if (this._startPoint.length === 0) {
+            this._startPoint = [{ x, y }];
+            this._points.push({ x: 0, y: 0 });
+        }
+        else {
+            // 计算相对于第一个点的偏移
+            const offsetX = x - this._startPoint[0].x;
+            const offsetY = y - this._startPoint[0].y;
+            // 将相对坐标添加到数组
+            this._points.push({
+                x: Number(offsetX.toFixed(0)),
+                y: Number(offsetY.toFixed(0)),
+            });
+        }
+        this._drawPolygon();
+    }
+    /** @description 绘制多边形 */
+    _drawPolygon() {
+        this._polygon.clear();
+        this._polygon.beginFill(this._params.polygonColor);
+        this._polygon.drawPolygon(this._realPoints);
+        this._polygon.endFill();
+        this._polygon.alpha = this._params.polygonAlpha;
+        //渲染点
+        this._pointElements.forEach((point) => point.destroy());
+        this._pointElements = [];
+        this._realPoints.forEach((point) => {
+            this._pointElements.push(this._drawDot(point.x, point.y));
+        });
+    }
+    /** @description 绘制一个点 */
+    _drawDot(x, y) {
+        const pointElement = new Graphics();
+        pointElement.beginFill(this._params.dotColor);
+        pointElement.drawCircle(x, y, this._params.dotRadius || 2);
+        pointElement.endFill();
+        this._app.stage.addChild(pointElement);
+        pointElement.zIndex = 999999;
+        return pointElement;
+    }
+}

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 = Ticker.shared;
+        const tickerCallback = () => {
+            elapsedTime += ticker.deltaMS;
+            if (elapsedTime >= delay) {
+                callback === null || callback === void 0 ? void 0 : callback();
+                ticker.remove(tickerCallback);
+                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/LibPixiSlideInput.d.ts

@@ -0,0 +1,55 @@
+import type { Application, Container } from "pixi.js";
+export interface LibPixiSlideInputParams {
+    /** App */
+    app: Application;
+    /** 有效点击范围 */
+    clickArea: Container[];
+    /** 滑动区域 */
+    sideArea: Container;
+    /** 最大移动距离 */
+    maxMoveDistance: number;
+    /** 起点坐标 */
+    startX?: number;
+    /** 按下回调 */
+    onDown?: () => void;
+    /** 抬起回调 */
+    onUp?: () => void;
+    /** 拖动回调 */
+    onChange: (x: number, value: number) => void;
+}
+/** @description 滑动选择器核心代码
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlideInput-滑动选择值
+ */
+export declare class LibPixiSlideInput {
+    /** App */
+    private _app;
+    /** 滑动区域 */
+    private _sideArea;
+    /** 最大移动距离 */
+    private _maxMoveDistance;
+    /** 是否处于拖动中 */
+    private _isDragging;
+    /** 当前移动的位置 */
+    private _moveX;
+    /** 上次移动的位置 */
+    private _lastMoveX;
+    /** 当前进度 */
+    private _progress;
+    /** 按下回调 */
+    private _onDown?;
+    /** 抬起回调 */
+    private _onUp?;
+    /** 拖动回调 */
+    private _onChange;
+    constructor(params: LibPixiSlideInputParams);
+    /** @description 设置进度
+     * @param value 进度值，范围 0-1
+     */
+    setValue(value: number): void;
+    /** @description 按下触发 */
+    private _onDragStart;
+    /** @description 移动触发 */
+    private _onDragMove;
+    /** @description 抬起触发 */
+    private _onDragEnd;
+}

package/Utils/LibPixiSlideInput.js

@@ -0,0 +1,61 @@
+import { libPixiEvent } from "./LibPixiEvent";
+/** @description 滑动选择器核心代码
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlideInput-滑动选择值
+ */
+export class LibPixiSlideInput {
+    constructor(params) {
+        /** 是否处于拖动中 */
+        this._isDragging = false;
+        /** 当前移动的位置 */
+        this._moveX = 0;
+        /** 上次移动的位置 */
+        this._lastMoveX = 0;
+        /** 当前进度 */
+        this._progress = 0;
+        const { app, clickArea, maxMoveDistance, onChange, onDown, onUp, sideArea, } = params;
+        this._app = app;
+        this._maxMoveDistance = maxMoveDistance;
+        this._onChange = onChange;
+        this._onDown = onDown;
+        this._onUp = onUp;
+        this._sideArea = sideArea;
+        clickArea.forEach((item) => {
+            libPixiEvent(item, "pointerdown", this._onDragStart.bind(this));
+        });
+        libPixiEvent(sideArea, "pointerdown", this._onDragMove.bind(this));
+        app.stage.on("pointermove", this._onDragMove.bind(this));
+        app.stage.on("pointerup", this._onDragEnd.bind(this));
+    }
+    /** @description 设置进度
+     * @param value 进度值，范围 0-1
+     */
+    setValue(value) {
+        this._progress = value;
+        this._lastMoveX = this._maxMoveDistance * value;
+        this._onChange(this._lastMoveX, value);
+    }
+    /** @description 按下触发 */
+    _onDragStart() {
+        var _a;
+        this._app.stage.eventMode = "static";
+        this._isDragging = true;
+        (_a = this._onDown) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    /** @description 移动触发 */
+    _onDragMove(event) {
+        const position = event.getLocalPosition(this._sideArea);
+        if (this._isDragging) {
+            this._moveX = Math.max(0, Math.min(position.x, this._maxMoveDistance));
+            this._progress = Number((this._moveX / this._maxMoveDistance).toFixed(2));
+            this._onChange(this._moveX, this._progress);
+        }
+    }
+    /** @description 抬起触发 */
+    _onDragEnd() {
+        var _a;
+        this._app.stage.eventMode = "auto";
+        this._isDragging = false;
+        this._lastMoveX = this._moveX;
+        (_a = this._onUp) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}

package/Utils/LibPixiTicker.d.ts

@@ -0,0 +1,14 @@
+/** @description Ticker管理器 */
+export declare class LibPixiTicker {
+    private static _callbacks;
+    /** @description 添加回调，重复 ID 会覆盖 */
+    static add(id: string, fn: () => void): () => void;
+    /** @description 删除回调 */
+    static remove(id: string): void;
+    /** @description 停止某个回调（pause） */
+    static stop(id: string): void;
+    /** @description 启动某个回调（resume） */
+    static start(id: string): void;
+    /** @description 清空所有回调 */
+    static clearAll(): void;
+}

package/Utils/LibPixiTicker.js

@@ -0,0 +1,49 @@
+import { Ticker } from "pixi.js";
+/** @description Ticker管理器 */
+export class LibPixiTicker {
+    /** @description 添加回调，重复 ID 会覆盖 */
+    static add(id, fn) {
+        // 如果已有相同 ID，先移除旧回调
+        if (this._callbacks.has(id)) {
+            Ticker.shared.remove(this._callbacks.get(id).fn);
+        }
+        // 默认 active
+        this._callbacks.set(id, { fn, active: true });
+        Ticker.shared.add(fn);
+        return () => {
+            LibPixiTicker.remove(id);
+        };
+    }
+    /** @description 删除回调 */
+    static remove(id) {
+        const cb = this._callbacks.get(id);
+        if (cb) {
+            Ticker.shared.remove(cb.fn);
+            this._callbacks.delete(id);
+        }
+    }
+    /** @description 停止某个回调（pause） */
+    static stop(id) {
+        const cb = this._callbacks.get(id);
+        if (cb && cb.active) {
+            Ticker.shared.remove(cb.fn);
+            cb.active = false;
+        }
+    }
+    /** @description 启动某个回调（resume） */
+    static start(id) {
+        const cb = this._callbacks.get(id);
+        if (cb && !cb.active) {
+            Ticker.shared.add(cb.fn);
+            cb.active = true;
+        }
+    }
+    /** @description 清空所有回调 */
+    static clearAll() {
+        this._callbacks.forEach((cb) => {
+            Ticker.shared.remove(cb.fn);
+        });
+        this._callbacks.clear();
+    }
+}
+LibPixiTicker._callbacks = new Map();

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,22 @@
+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 = Ticker.shared;
+    const tickerCallback = () => {
+        elapsedTime += ticker.deltaMS;
+        if (elapsedTime >= delay) {
+            callback === null || callback === void 0 ? void 0 : callback();
+            ticker.remove(tickerCallback);
+        }
+    };
+    ticker.add(tickerCallback);
+    ticker.start();
+    return () => {
+        ticker.remove(tickerCallback);
+    };
+};

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "lyb-pixi-js",
-  "version": "1.12.33",
+  "version": "1.12.34",
   "description": "自用Pixi.JS方法库",
   "license": "ISC",
   "exports": {
-    ".": "./index.js",
     "./Components/Base/*": "./Components/Base/*",
     "./Components/Custom/*": "./Components/Custom/*",
     "./Utils/*": "./Utils/*"

package/index.js

@@ -1,5 +0,0 @@
-(function(factory) {
-  typeof define === "function" && define.amd ? define(factory) : factory();
-})(function() {
-  "use strict";
-});