[修改] 修改箭头样式

src/app/working-area/working-area.component.ts

@@ -7,6 +7,7 @@ import { CanvasShareDataService, GameMode } from '../canvas-share-data.service';
 import {CacheTokenService} from '../http-interceptors/cache-token.service'; // 引入自动登录 获取token服务
 import * as ObjectID from 'bson-objectid';
 import { Router } from '@angular/router';
+import { isThisSecond } from 'date-fns';
 
 
 @Component({
@@ -527,7 +528,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
 
     // // 开始绘制管线
     // this.beginPaintPipeline();
-    // this.beginPaintingArrows();
+    this.beginPaintingArrows();
   }
   /**
    * 显示车辆图标
@@ -1796,11 +1797,11 @@ export class Pipeline extends PIXI.Graphics {
     if (this.assetData.MultiPoint.length >= 2) {
       const pointA = this.assetData.MultiPoint[0];
       const pointB = this.assetData.MultiPoint[this.assetData.MultiPoint.length - 1];
-      // const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (5 / Math.PI);
+      const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI) + 90;
       this.beginFill(0x0000ff);
-      // this.drawStar(pointB.x, pointB.y, 3, 5, 0, angle);
-      this.drawCircle(pointA.x, pointA.y, 5);
-      this.drawCircle(pointB.x, pointB.y, 5);
+      this.drawStar(pointB.x, pointB.y, 3, 5, 0, (Math.PI / 180 * angle));
+      // this.drawCircle(pointA.x, pointA.y, 5);
+      // this.drawCircle(pointB.x, pointB.y, 5);
       this.endFill();
     }
   }
@@ -1811,15 +1812,19 @@ export class Pipeline extends PIXI.Graphics {
  */
 export class Arrows extends PIXI.Container {
   public data: any;
-  public icon: PIXI.TilingSprite;
+  // public icon: PIXI.Sprite;
+  public line: PIXI.Graphics = new PIXI.Graphics();
+  public san: PIXI.Graphics = new PIXI.Graphics();
   public ready = false;
   constructor(assetData: any, private workingArea: WorkingAreaComponent) {
     super();
     this.workingArea.backgroundImage.addChild(this);
     this.data = assetData;
     // 画线图标
-    this.icon = new PIXI.TilingSprite(PIXI.Texture.from(this.data.source), 0, 68);
-    this.addChild(this.icon);
+    // this.icon = new PIXI.Sprite(PIXI.Texture.from(this.data.source));
+    this.addChild(this.line);
+    this.addChild(this.san);
+    // this.addChild(this.icon);
     this.refresh();
     this.interactive = true;
     this.on('mousedown', event => {
@@ -1832,17 +1837,24 @@ export class Arrows extends PIXI.Container {
    * 刷新
    */
   public refresh() {
-    const angle = Math.atan2((this.data.pointB.y - this.data.pointA.y), (this.data.pointB.x - this.data.pointA.x)) * (180 / Math.PI);
-    const a = this.data.pointB.x - this.data.pointA.x;
-    const b = this.data.pointB.y - this.data.pointA.y;
-    const distance = Math.sqrt(a * a + b * b);
-
-    this.icon.width = distance;
-    this.icon.height = 68;
-    this.icon.anchor.set(0, 0.5);
-    this.icon.x = this.data.pointA.x;
-    this.icon.y = this.data.pointA.y;
-    this.icon.angle = angle;
+    this.line.clear();
+    this.line.lineStyle(5, 0xff0000, 1);
+    this.line.moveTo(this.data.pointA.x, this.data.pointA.y);
+    this.line.lineTo(this.data.pointB.x, this.data.pointB.y);
+
+    const angle = Math.atan2((this.data.pointB.y - this.data.pointA.y), (this.data.pointB.x - this.data.pointA.x)) * (180 / Math.PI) + 90;
+
+    // this.san.clear();
+    // this.san.lineStyle(5, 0xff0000, 1);
+    this.line.beginFill(0xff0000);
+    console.log(Math.PI / 180 / 1.6);
+    this.line.drawStar(this.data.pointB.x, this.data.pointB.y, 3, 10, 0, (Math.PI / 180 * angle));
+    // this.san.angle = angle;
+    this.line.endFill();
+    // this.icon.anchor.set(0, 0.5);
+    // this.icon.x = this.data.pointB.x;
+    // this.icon.y = this.data.pointB.y;
+    // this.icon.angle = angle;
   }
 }
 /**