信号机更改

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@pixi/filter-outline": "^5.2.0",
+    "@pixi/graphics-extras": "^7.2.4",
     "@quasar/extras": "^1.0.0",
     "@stomp/stompjs": "^7.0.0",
     "axios": "^1.2.1",

quasar.config.js

@@ -30,7 +30,7 @@ module.exports = configure(function (/* ctx */) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ['axios'],
+    boot: ['axios', '@pixi/graphics-extras'],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ['app.scss'],

src/boot/@pixi/graphics-extras.ts

@@ -0,0 +1,7 @@
+import { boot } from 'quasar/wrappers';
+import * as GraphicsExtras from '@pixi/graphics-extras';
+// "async" is optional;
+// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
+export default boot(async (/* { app, router, ... } */) => {
+  GraphicsExtras;
+});

src/drawApp/graphics/SignalInteraction.ts

@@ -13,9 +13,9 @@ export class SignalData extends GraphicDataBase implements ISignalData {
     } else {
       signal = data;
     }
+    signal.common.graphicType = 'signal';
     super(signal);
   }
-
   public get data(): graphicData.Signal {
     return this.getData<graphicData.Signal>();
   }

src/graphics/CommonGraphics.ts

@@ -0,0 +1,51 @@
+import { Graphics } from 'pixi.js';
+export function drawArrow(
+  polygon: Graphics,
+  x: number,
+  y: number,
+  length: number,
+  radius: number,
+  lineWidth: number
+) {
+  const trianglAcme = { x, y };
+  const triangleP1 = {
+    x: x - radius - Math.sin(Math.PI / 6),
+    y: y + Math.cos(Math.PI / 6) * radius,
+  };
+  const triangleP2 = {
+    x: x - radius - Math.sin(Math.PI / 6),
+    y: y - Math.cos(Math.PI / 6) * radius,
+  };
+  const lineP1 = {
+    x: x - radius - Math.sin(Math.PI / 6),
+    y: y + lineWidth / 2,
+  };
+  const lineP2 = {
+    x: x - length,
+    y: y + lineWidth / 2,
+  };
+  const lineP3 = {
+    x: x - length,
+    y: y - lineWidth / 2,
+  };
+  const lineP4 = {
+    x: x - radius - Math.sin(Math.PI / 6),
+    y: y - lineWidth / 2,
+  };
+  polygon.drawPolygon(
+    trianglAcme.x,
+    trianglAcme.y,
+    triangleP1.x,
+    triangleP1.y,
+    lineP1.x,
+    lineP1.y,
+    lineP2.x,
+    lineP2.y,
+    lineP3.x,
+    lineP3.y,
+    lineP4.x,
+    lineP4.y,
+    triangleP2.x,
+    triangleP2.y
+  );
+}

src/graphics/signal/Lamp.ts

@@ -0,0 +1,52 @@
+import { Container } from '@pixi/display';
+import { Graphics, Color } from 'pixi.js';
+
+export enum LampEnum {
+  lampPostColor = '0xc0c0c0',
+  lampDefaultColor = '0xff0000',
+  logicModeColor = '0x000000',
+}
+
+const lampConsts = {
+  lampRadius: 10,
+  logicModeLineWidth: 2,
+  logicModeDistance: 7,
+};
+
+export class Lamp extends Container {
+  circleLamp: Graphics = new Graphics();
+  logicMode: Graphics = new Graphics();
+
+  constructor() {
+    super();
+    this.addChild(this.circleLamp);
+    this.addChild(this.logicMode);
+  }
+  paint(radiusX: number, radiusY: number) {
+    this.circleLamp.clear();
+    this.circleLamp
+      .beginFill(LampEnum.lampDefaultColor, 1)
+      .drawCircle(radiusX, radiusY, lampConsts.lampRadius)
+      .endFill();
+
+    this.logicMode
+      .clear()
+      .lineStyle(lampConsts.logicModeLineWidth, LampEnum.logicModeColor)
+      .moveTo(
+        radiusX - lampConsts.logicModeDistance,
+        radiusY + lampConsts.logicModeDistance
+      )
+      .lineTo(
+        radiusX + lampConsts.logicModeDistance,
+        radiusY - lampConsts.logicModeDistance
+      )
+      .moveTo(
+        radiusX - lampConsts.logicModeDistance,
+        radiusY - lampConsts.logicModeDistance
+      )
+      .lineTo(
+        radiusX + lampConsts.logicModeDistance,
+        radiusY + lampConsts.logicModeDistance
+      );
+  }
+}

src/graphics/signal/Signal.ts

@@ -5,8 +5,8 @@ import {
   JlGraphicTemplate,
   VectorText,
 } from 'src/jl-graphic';
-import { LampBody } from './lampBody';
+import { LampBody } from './LampBody';
-import { SignalDraw } from './SignalDrawAssistant';
+import { drawArrow } from '../CommonGraphics';
 
 export interface ISignalData extends GraphicData {
   get code(): string; // 编号
@@ -26,8 +26,9 @@ const signalConsts = {
   lampNum: 1,
   codeFontSize: 11,
   nameOffsetY: 20,
-  humanControlPath: [-2, 0, -17, 10, -17, -10],
+  fleetModeLength: 33,
-  fleetModePath: [2, -4, 22, -4, 22, -10, 35, 0, 22, 10, 22, 4, 2, 4],
+  fleetModeRadius: 10,
+  fleetModeLineWidth: 6,
 };
 export class Signal extends JlGraphic {
   static Type = 'signal';
@@ -49,47 +50,43 @@ export class Signal extends JlGraphic {
     return this.getDatas<ISignalData>();
   }
 
-  static computedFleetModePath(x: number): number[] {
+  paint(): void {
-    const fleetModePath: number[] = [];
+    this.lampBody.paint(signalConsts.lampNum);
-    signalConsts.fleetModePath.forEach((item: number, index: number) => {
+    this.humanControl.beginFill(SignalColorEnum.humanControlColor, 1);
-      if (!(index % 2)) {
+    if (this.humanControl.drawRegularPolygon) {
-        fleetModePath.push(item + x);
+      this.humanControl.drawRegularPolygon(-10, 0, 10, 3, Math.PI / 2);
-      } else {
+    }
-        fleetModePath.push(item);
+    this.humanControl.endFill();
-      }
+    this.fleetMode.beginFill(SignalColorEnum.fleetModeColor, 1);
-    });
+    drawArrow(
-    return fleetModePath;
+      this.fleetMode,
-  }
+      this.lampBody.width + signalConsts.fleetModeLength,
-
+      0,
-  static paint(signal: Signal | SignalDraw, data?: ISignalData): void {
+      signalConsts.fleetModeLength,
-    signal.lampBody.paint(signalConsts.lampNum);
+      signalConsts.fleetModeRadius,
-    signal.humanControl.beginFill(SignalColorEnum.humanControlColor, 1);
+      signalConsts.fleetModeLineWidth
-    signal.humanControl.drawPolygon(signalConsts.humanControlPath);
+    );
-    signal.humanControl.endFill();
+    this.fleetMode.endFill();
-    signal.fleetMode.beginFill(SignalColorEnum.fleetModeColor, 1);
+    this.codeGraph.text = this.datas?.code || '信号机编号';
-    const fleetModePath = Signal.computedFleetModePath(signal.lampBody.width);
+    this.codeGraph.style.fill = SignalColorEnum.codeColor;
-    signal.fleetMode.drawPolygon(fleetModePath);
+    this.codeGraph.setVectorFontSize(signalConsts.codeFontSize);
-    signal.fleetMode.endFill();
+    this.codeGraph.anchor.set(0.5);
-    signal.codeGraph.text = data?.code || '信号机编号';
+    this.codeGraph.style.fill = SignalColorEnum.codeColor;
-    signal.codeGraph.style.fill = SignalColorEnum.codeColor;
+    const codeTransform = this.datas?.childTransforms?.find(
-    signal.codeGraph.setVectorFontSize(signalConsts.codeFontSize);
-    signal.codeGraph.anchor.set(0.5);
-    signal.codeGraph.style.fill = SignalColorEnum.codeColor;
-    const codeTransform = data?.childTransforms?.find(
       (item) => item.name === 'signalCode'
     );
     if (codeTransform) {
       const position = codeTransform?.transform.position;
       const rotation = codeTransform?.transform?.rotation;
-      signal.codeGraph.position.set(position?.x, position?.y);
+      this.codeGraph.position.set(position?.x, position?.y);
-      signal.codeGraph.rotation = rotation || 0;
+      this.codeGraph.rotation = rotation || 0;
     } else {
-      signal.codeGraph.position.set(0, signalConsts.nameOffsetY);
+      this.codeGraph.position.set(0, signalConsts.nameOffsetY);
     }
   }
 
   doRepaint(): void {
-    Signal.paint(this, this.datas);
+    this.paint();
   }
 }
 

src/graphics/signal/SignalDrawAssistant.ts

@@ -1,14 +1,12 @@
-import { FederatedPointerEvent, Point, Graphics } from 'pixi.js';
+import { FederatedPointerEvent, Point } from 'pixi.js';
 import {
   GraphicDrawAssistant,
   GraphicInteractionPlugin,
   JlDrawApp,
   JlGraphic,
-  GraphicTransformEvent,
-  VectorText,
 } from 'src/jl-graphic';
 import { ISignalData, Signal, SignalTemplate } from './Signal';
-import { LampBody } from './lampBody';
+import { SignalData } from 'src/drawApp/graphics/SignalInteraction';
 
 export interface ISignalDrawOptions {
   newData: () => ISignalData;
@@ -18,10 +16,7 @@ export class SignalDraw extends GraphicDrawAssistant<
   SignalTemplate,
   ISignalData
 > {
-  codeGraph: VectorText = new VectorText('');
+  _signal: Signal | null = null;
-  humanControl: Graphics = new Graphics();
-  fleetMode: Graphics = new Graphics();
-  lampBody: LampBody = new LampBody();
 
   constructor(app: JlDrawApp, createData: () => ISignalData) {
     super(
@@ -31,13 +26,19 @@ export class SignalDraw extends GraphicDrawAssistant<
       'svguse:../drawIcon.svg#icon-signal',
       '信号机Signal'
     );
-    this.container.addChild(this.codeGraph);
+
-    this.container.addChild(this.humanControl);
-    this.container.addChild(this.fleetMode);
-    this.container.addChild(this.lampBody);
     signalInteraction.init(app);
   }
 
+  public get signal(): Signal {
+    if (!this._signal) {
+      this._signal = this.graphicTemplate.new();
+      this.signal.loadData(new SignalData());
+      this.container.addChild(this.signal);
+    }
+    return this._signal;
+  }
+
   bind(): void {
     super.bind();
   }
@@ -57,8 +58,7 @@ export class SignalDraw extends GraphicDrawAssistant<
   }
 
   redraw(p: Point): void {
-    console.log(this);
+    this.signal.paint();
-    Signal.paint(this);
     this.container.position.set(p.x, p.y);
   }
   prepareData(data: ISignalData): boolean {

src/graphics/signal/lampBody.ts

@@ -1,11 +1,9 @@
 import { Container } from '@pixi/display';
-import { Graphics, Color } from 'pixi.js';
+import { Graphics } from 'pixi.js';
+import { Lamp } from './Lamp';
 
 export enum LampEnum {
   lampPostColor = '0xc0c0c0',
-  lampDefaultColor = '0xff0000',
-  logicModeColor = '0x000000',
-  codeColor = '0X000000',
 }
 
 const lampConsts = {
@@ -13,15 +11,12 @@ const lampConsts = {
   levelLampPostLength: 5,
   postLineWidth: 3,
   lampRadius: 10,
-  logicModeLineWidth: 2,
-  logicModeDistance: 7,
 };
 
 export class LampBody extends Container {
   lampNum = 1;
   lampPost: Graphics = new Graphics();
-  lamps: Graphics[] = [];
+  lamps: Lamp[] = [];
-  logicModes: Graphics[] = [];
 
   constructor() {
     super();
@@ -33,50 +28,22 @@ export class LampBody extends Container {
     this.lampNum = lampNum;
     this.removeChildren(0);
     this.lampPost = new Graphics();
-    this.lampPost.lineStyle(
+    this.lampPost
-      lampConsts.postLineWidth,
+      .lineStyle(lampConsts.postLineWidth, LampEnum.lampPostColor)
-      new Color(LampEnum.lampPostColor)
+      .moveTo(0, -lampConsts.verticalLampPostLength / 2)
-    );
+      .lineTo(0, lampConsts.verticalLampPostLength / 2)
-    this.lampPost.moveTo(0, -lampConsts.verticalLampPostLength / 2);
+      .moveTo(0, 0)
-    this.lampPost.lineTo(0, lampConsts.verticalLampPostLength / 2);
+      .lineTo(lampConsts.levelLampPostLength, 0);
-    this.lampPost.moveTo(0, 0);
-    this.lampPost.lineTo(lampConsts.levelLampPostLength, 0);
     this.addChild(this.lampPost);
 
     this.lamps = [];
-    this.logicModes = [];
     for (let i = 0; i < this.lampNum; i++) {
-      const lamp = new Graphics();
+      const lamp = new Lamp();
-      lamp.beginFill(LampEnum.lampDefaultColor, 1);
+      const radiusX =
-      const lampX =
+        (1 + i * 2) * lampConsts.lampRadius + lampConsts.levelLampPostLength;
-        lampConsts.lampRadius * (i * 2 + 1) + lampConsts.levelLampPostLength;
+      lamp.paint(radiusX, 0);
-      lamp.drawCircle(lampX, 0, lampConsts.lampRadius);
-      lamp.endFill();
       this.addChild(lamp);
       this.lamps.push(lamp);
-      const logicMode = new Graphics();
-      logicMode.lineStyle(
-        lampConsts.logicModeLineWidth,
-        new Color(LampEnum.logicModeColor)
-      );
-      logicMode.moveTo(
-        lampX - lampConsts.logicModeDistance,
-        lampConsts.logicModeDistance
-      );
-      logicMode.lineTo(
-        lampX + lampConsts.logicModeDistance,
-        -lampConsts.logicModeDistance
-      );
-      logicMode.moveTo(
-        lampX - lampConsts.logicModeDistance,
-        -lampConsts.logicModeDistance
-      );
-      logicMode.lineTo(
-        lampX + lampConsts.logicModeDistance,
-        lampConsts.logicModeDistance
-      );
-      this.addChild(logicMode);
-      this.logicModes.push(logicMode);
     }
   }
 

yarn.lock

@@ -193,6 +193,11 @@
   resolved "https://registry.npmmirror.com/@pixi/filter-outline/-/filter-outline-5.2.0.tgz#8572ed2c847c31c5a142db04e86f081baed0365a"
   integrity sha512-xKfAouhZNKl6A0RvxT5i+2/ean7r16dE/QswwIkbWvr2hhHlp4p9U6XsqdgUERCDxK+IZibMAumbWs4DGxOUeQ==
 
+"@pixi/graphics-extras@^7.2.4":
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/@pixi/graphics-extras/-/graphics-extras-7.2.4.tgz#72ac967992f239d3671d6e680ac891471619fe07"
+  integrity sha512-0yT91yqF3KLiZI/iLRcfcYlTVpkVyWsfGtWEIorZs0eX+/zYx7um7EJ2h7tFORI/1FxA2maR4td5vpgCwOLJAQ==
+
 "@pixi/graphics@7.2.4":
   version "7.2.4"
   resolved "https://registry.npmmirror.com/@pixi/graphics/-/graphics-7.2.4.tgz#8500b604c36184736926393cb0ca9b9de9afef86"