lyb-pixi-js 1.4.1 → 1.4.2

package/Utils/LibPixiPolygonDrawTool.d.ts

@@ -1,4 +1,16 @@
 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-多边形绘制
  */
@@ -17,7 +29,9 @@ export declare class LibPixiPolygonDrawTool {
     private _realPoints;
     /** 点元素 */
     private _pointElements;
-    constructor(app: Application);
+    /** 参数 */
+    private _params;
+    constructor(app: Application, params?: LibPixiPolygonDrawToolParams);
     private _setupListeners;
     /** @description 控制绘制开始和结束 */
     private toggleDrawing;

package/Utils/LibPixiPolygonDrawTool.js

@@ -3,7 +3,7 @@ import { Graphics, } from "pixi.js";
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygonDrawTool-多边形绘制
  */
 export class LibPixiPolygonDrawTool {
-    constructor(app) {
+    constructor(app, params = {}) {
         /** 是否正在绘制 */
         this._drawing = false;
         /** 储点的数组 */
@@ -15,6 +15,7 @@ export class LibPixiPolygonDrawTool {
         /** 点元素 */
         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);
@@ -44,12 +45,17 @@ export class LibPixiPolygonDrawTool {
     /** @description 控制绘制开始和结束 */
     toggleDrawing() {
         if (this._drawing) {
-            console.warn("绘制结束");
+            alert("绘制结束");
             this._points.push({ x: 0, y: 0 });
-            console.log(this._points.flat());
+            if (this._params.outFormat === "object") {
+                console.log(this._points);
+            }
+            else {
+                console.log(this._points.map((item) => [item.x, item.y]).flat());
+            }
         }
         else {
-            console.warn("开始绘制");
+            alert("开始绘制");
             this._startPoint = [];
             this._points = [];
             this._realPoints = [];
@@ -84,10 +90,10 @@ export class LibPixiPolygonDrawTool {
     /** @description 绘制多边形 */
     _drawPolygon() {
         this._polygon.clear();
-        this._polygon.beginFill(0x66ccff);
+        this._polygon.beginFill(this._params.polygonColor);
         this._polygon.drawPolygon(this._realPoints);
         this._polygon.endFill();
-        this._polygon.alpha = 0.5;
+        this._polygon.alpha = this._params.polygonAlpha;
         //渲染点
         this._pointElements.forEach((point) => point.destroy());
         this._pointElements = [];
@@ -98,10 +104,9 @@ export class LibPixiPolygonDrawTool {
     /** @description 绘制一个点 */
     _drawDot(x, y) {
         const pointElement = new Graphics();
-        pointElement.beginFill(0xff0000);
-        pointElement.drawCircle(x, y, 5);
+        pointElement.beginFill(this._params.dotColor);
+        pointElement.drawCircle(x, y, this._params.dotRadius || 2);
         pointElement.endFill();
-        pointElement.alpha = 0.5;
         this._app.stage.addChild(pointElement);
         pointElement.zIndex = 999999;
         return pointElement;