lyb-pixi-js 1.3.10 → 1.4.1

package/README.md

@@ -144,6 +144,8 @@ app.stage.addChild(box);
 
 \- [LibGlobalUpdater-事件实例汇总](#LibGlobalUpdater-事件实例汇总)
 
+\- [LibPixiPolygonDrawTool-多边形绘制](#LibPixiPolygonDrawTool-多边形绘制)
+
 ## Base-基础
 
 ### LibPixiText-文本
@@ -791,3 +793,11 @@ $bus.on("play", () => {
 });
 ```
 
+### LibPixiPolygonDrawTool-多边形绘制
+
+> 多边形绘制工具，绘制时浏览器窗口需要全屏显示，空格键控制开始和结束，开始后鼠标进行点击绘制，退格删除点，空格结束绘制，绘制结果在控制台打印，不满意可再次按空格清空并重新绘制
+
+```ts
+new LibPixiPolygonDrawTool(app)
+```
+

package/Utils/LibPixiGlobalUpdater.d.ts

@@ -0,0 +1,15 @@
+import type { Container } from "pixi.js";
+/** @description 事件总线更新实例汇总 */
+export declare class LibPixiGlobalUpdater<Instances> {
+    /** 实例列表 */
+    private instances;
+    /** @description 存储实例
+     * @param key 实例key
+     * @param instance 实例
+     */
+    setInstance(key: Instances, instance: Container): void;
+    /** @description 获取实例
+     * @param key 实例key
+     */
+    getInstance<T>(key: Instances): T;
+}

package/Utils/LibPixiGlobalUpdater.js

@@ -0,0 +1,21 @@
+/** @description 事件总线更新实例汇总 */
+export class LibPixiGlobalUpdater {
+    constructor() {
+        /** 实例列表 */
+        this.instances = new Map();
+    }
+    /** @description 存储实例
+     * @param key 实例key
+     * @param instance 实例
+     */
+    setInstance(key, instance) {
+        this.instances.has(key) && this.instances.delete(key);
+        this.instances.set(key, instance);
+    }
+    /** @description 获取实例
+     * @param key 实例key
+     */
+    getInstance(key) {
+        return this.instances.get(key);
+    }
+}

package/Utils/LibPixiPolygonDrawTool.d.ts

@@ -0,0 +1,30 @@
+import { type Application } from "pixi.js";
+/** @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;
+    constructor(app: Application);
+    private _setupListeners;
+    /** @description 控制绘制开始和结束 */
+    private toggleDrawing;
+    /** @description 添加点坐标 */
+    private _addPoint;
+    /** @description 绘制多边形 */
+    private _drawPolygon;
+    /** @description 绘制一个点 */
+    private _drawDot;
+}

package/Utils/LibPixiPolygonDrawTool.js

@@ -0,0 +1,109 @@
+import { Graphics, } from "pixi.js";
+/** @description 多边形绘制工具，绘制时浏览器窗口需要全屏显示，空格键控制开始和结束，开始后鼠标进行点击绘制，退格删除点，空格结束绘制，绘制结果在控制台打印，不满意可再次按空格清空并重新绘制
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygonDrawTool-多边形绘制
+ */
+export class LibPixiPolygonDrawTool {
+    constructor(app) {
+        /** 是否正在绘制 */
+        this._drawing = false;
+        /** 储点的数组 */
+        this._points = [];
+        /** 起始点 */
+        this._startPoint = [];
+        /** 实际绘制的点 */
+        this._realPoints = [];
+        /** 点元素 */
+        this._pointElements = [];
+        this._app = app;
+        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) {
+            console.warn("绘制结束");
+            this._points.push({ x: 0, y: 0 });
+            console.log(this._points.flat());
+        }
+        else {
+            console.warn("开始绘制");
+            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(0x66ccff);
+        this._polygon.drawPolygon(this._realPoints);
+        this._polygon.endFill();
+        this._polygon.alpha = 0.5;
+        //渲染点
+        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(0xff0000);
+        pointElement.drawCircle(x, y, 5);
+        pointElement.endFill();
+        pointElement.alpha = 0.5;
+        this._app.stage.addChild(pointElement);
+        pointElement.zIndex = 999999;
+        return pointElement;
+    }
+}

package/libPixiJs.d.ts

@@ -16,7 +16,8 @@ import { LibPixiSubAddMinMax } from "./Components/Custom/LibPixiSubAddMinMax";
 import { LibPixiTable } from "./Components/Custom/LibPixiTable";
 import { LibPixiAudio } from "./Utils/LibPixiAudio";
 import { LibPixiSlideInput } from "./Utils/LibPixiSlideInput";
-import { LibGlobalUpdater } from "./Utils/LibGlobalUpdater";
+import { LibPixiGlobalUpdater } from "./Utils/LibPixiGlobalUpdater";
+import { LibPixiPolygonDrawTool } from "./Utils/LibPixiPolygonDrawTool";
 /** @description 组件 */
 export declare const Components: {
     Base: {
@@ -169,5 +170,9 @@ export declare const Utils: {
     /** @description 事件总线更新实例汇总
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibGlobalUpdater-事件实例汇总
      */
-    LibGlobalUpdater: typeof LibGlobalUpdater;
+    LibPixiGlobalUpdater: typeof LibPixiGlobalUpdater;
+    /** @description 多边形绘制工具，绘制时浏览器窗口需要全屏显示，空格键控制开始和结束，开始后鼠标进行点击绘制，退格删除点，空格结束绘制，绘制结果在控制台打印，不满意可再次按空格清空并重新绘制
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygonDrawTool-多边形绘制
+     */
+    LibPixiPolygonDrawTool: typeof LibPixiPolygonDrawTool;
 };

package/libPixiJs.js

@@ -27,7 +27,8 @@ import { libPixiFilter } from "./Utils/LibPixiFilter";
 import { libPixiShadow } from "./Utils/LibPixiShadow";
 import { libPixiTickerTimeout } from "./Utils/LibPixiTickerTimeout";
 import { LibPixiSlideInput } from "./Utils/LibPixiSlideInput";
-import { LibGlobalUpdater } from "./Utils/LibGlobalUpdater";
+import { LibPixiGlobalUpdater } from "./Utils/LibPixiGlobalUpdater";
+import { LibPixiPolygonDrawTool } from "./Utils/LibPixiPolygonDrawTool";
 /** @description 组件 */
 export const Components = {
     Base: {
@@ -180,5 +181,9 @@ export const Utils = {
     /** @description 事件总线更新实例汇总
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibGlobalUpdater-事件实例汇总
      */
-    LibGlobalUpdater,
+    LibPixiGlobalUpdater,
+    /** @description 多边形绘制工具，绘制时浏览器窗口需要全屏显示，空格键控制开始和结束，开始后鼠标进行点击绘制，退格删除点，空格结束绘制，绘制结果在控制台打印，不满意可再次按空格清空并重新绘制
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygonDrawTool-多边形绘制
+     */
+    LibPixiPolygonDrawTool,
 };