Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/examSystem-Anxin

src/app/working-area/model/axArrowConnector.ts

@@ -9,7 +9,7 @@ import { GameMode } from './gameMode';
  */
 export class AxArrowConnector extends AxShape {
     pointSprites: Array<Sprite> = new Array<Sprite>();
-    line: PIXI.Graphics;
+    tempLine: PIXI.Graphics;
     text: PIXI.Text;
     style = new PIXI.TextStyle({
         fontFamily: 'Arial',
@@ -29,9 +29,9 @@ export class AxArrowConnector extends AxShape {
     });
     pts: PIXI.Point[];
 
-    markerStart = true;// 是否绘制起始箭头
+    markerStart = true; // 是否绘制起始箭头
-    markerEnd = true;// 是否绘制结束箭头
+    markerEnd = true; // 是否绘制结束箭头
-    constructor(assetData: any, workingArea: WorkingAreaComponent,markerStart: boolean,markerEnd:boolean) {
+    constructor(assetData: any, workingArea: WorkingAreaComponent, markerStart: boolean, markerEnd: boolean) {
         super(assetData, workingArea);
 
         this.markerStart = markerStart;
@@ -42,21 +42,21 @@ export class AxArrowConnector extends AxShape {
         + '\r\n'
             + this.assetData.PropertyInfos?.find((item: { PropertyName: string; }) =>
             item.PropertyName === '名称/编号')?.PropertyValue, this.style);
-        this.line = new PIXI.Graphics();
+        this.tempLine = new PIXI.Graphics();
         this.addChild(this.text);
-        this.addChild(this.line);
+        this.addChild(this.tempLine);
         this.workingArea.backgroundImage.addChild(this);
         this.refresh();
         this.drawPoints();
         this.sortableChildren = true;
         this.text.zIndex = this.children.length;
         this.text.visible = this.showName;
-                this.text.angle = -this.workingArea.backgroundImage.angle;
+        this.text.angle = -this.workingArea.backgroundImage.angle;
     }
 
     public drawPoints() {
         this.assetData.MultiPoint.forEach(element => {
-            var point = new Sprite(this.pointTexture);
+            const point = new Sprite(this.pointTexture);
             point.position = element;
             point.anchor.set(0.5);
             this.pointSprites.push(point);
@@ -67,7 +67,7 @@ export class AxArrowConnector extends AxShape {
             value
             .on('pointerdown', event => {
                     event.stopPropagation();
-                if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
+                    if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
                         event.currentTarget.data = event.data;
                         event.currentTarget.alpha = 0.5;
                         event.currentTarget.dragging = true;
@@ -102,7 +102,7 @@ export class AxArrowConnector extends AxShape {
                 })
             .on('rightclick', event => {
             });
-        })
+        });
         this.setPointVisiable(false);
     }
 
@@ -110,10 +110,10 @@ export class AxArrowConnector extends AxShape {
      * 设置点显示状态
      * @param b true/false
      */
-    public setPointVisiable(b:boolean) {
+    public setPointVisiable(b: boolean) {
         this.pointSprites.forEach(item => {
             item.visible = b;
-        })
+        });
     }
         // 设置缩放
     public setItemScale(scale: number) {
@@ -121,17 +121,28 @@ export class AxArrowConnector extends AxShape {
         this.pointSprites.forEach(point => {
             point.scale.set(scale);
         });
+        this.refresh();
     }
     public setNameVisible(value: boolean, mode: GameMode) {
         if (this.assetData.GameMode === mode) {
             this.text.visible = value;
         }
     }
+    /**
+     *
+     * @param scale 绘制边框
+     */
+    public drawBorder(scale: number) {
+        const visible = this.pointSprites[0].visible;
+        this.setPointVisiable(false);
+        super.drawBorder(scale);
+        this.setPointVisiable(visible);
+    }
     /**
      * 刷新形状
      */
     public refresh(): void {
-        const c = this.line;
+        const c = this.tempLine;
         const pts = this.assetData.MultiPoint;
         if (pts.length < 2) {
             return;
@@ -142,17 +153,22 @@ export class AxArrowConnector extends AxShape {
             + '\r\n'
             + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
         const strokeWidth = 1;
-        const startWidth = 30 + strokeWidth;
+
-        const endWidth = 30 + strokeWidth;
+        const edgeWidth = this.assetData.Thickness === 0 ? 1 : this.assetData.Thickness;  // 宽度
-        const edgeWidth = this.assetData.Thickness === 0 ? 10 : this.assetData.Thickness;  // 宽度
+
+        const startWidth = edgeWidth * 2 + strokeWidth;
+        const endWidth = edgeWidth * 2 + strokeWidth;
+
         const openEnded = false;
 
         const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2;
-        const startSize = 30 + strokeWidth;
+
-        const endSize = 30 + strokeWidth;
+        const startSize = edgeWidth * 2 + strokeWidth;
+        const endSize = edgeWidth * 2 + strokeWidth;
+
         const isRounded = true;
         const lineColor = 0x000000;
-        const fillColor: number = this.assetData.Color.substring(0, 7).replace('#', '0x');;
+        const fillColor: number = this.assetData.Color.substring(0, 7).replace('#', '0x');
 
         const pe = pts[pts.length - 1];
 
@@ -190,8 +206,8 @@ export class AxArrowConnector extends AxShape {
         // }
         // c.lineStyle(1, 0x000000, 1);
         c.clear();
-        c.lineTextureStyle({ width: 1, color: lineColor, join: PIXI.LINE_JOIN.ROUND });
+        c.lineTextureStyle({ width: 1 / this.workingArea.backgroundImage.scale.x, color: lineColor, join: PIXI.LINE_JOIN.ROUND });
-        
+
         const startNx = nx;
         const startNy = ny;
         if (!openEnded) {
@@ -328,12 +344,9 @@ export class AxArrowConnector extends AxShape {
             fns[i]();
         }
 
-        if (openEnded)
+        if (openEnded) {
-        {
             c.closePath();
-        }
+        } else {
-        else
-        {
             c.closePath();
             c.endFill();
         }
@@ -410,10 +423,10 @@ export class AxArrowConnector extends AxShape {
         return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0);
     }
 
-    redraw(): void{
+    redraw(): void {
         this.pointSprites.forEach(item => {
             item.destroy();
-        })
+        });
         this.pointSprites.splice(0, this.pointSprites.length);
         this.refresh();
         this.drawPoints();

src/app/working-area/model/axGrid.ts

@@ -0,0 +1,259 @@
+import * as PIXI from 'pixi.js';
+
+const DEFAULT_LINE_STYLE = {
+  width: 1,
+  color: 0xffffff,
+  alpha: 1,
+  alignment: 0.5,
+  native: true,
+};
+
+/**
+ * @description 在屏幕上绘制网格的实用程序类。
+ * @extends PIXI.Graphics
+ */
+export class AxGrid extends PIXI.Graphics {
+    private _cellSize: number;
+    private _correctedWidth: number;
+    private _gridWidth: number;
+    private _useCorrectedWidth: boolean;
+    private _drawBoundaries: any;
+    private _amtLines: any;
+  /**
+   * @param {number} cellSize 默认值:网格边长的平方根
+   */
+  set cellSize(cellSize) {
+    this._cellSize = cellSize || Math.sqrt(this._correctedWidth);
+  }
+
+  get cellSize() {
+    return this._cellSize;
+  }
+
+  /**
+   * 网格边等距线的数量
+   */
+  get amtLines() {
+    return Math.floor(this.gridWidth / this.cellSize);
+  }
+
+  /**
+   * 由' width '构造函数参数给出的网格的请求宽度。
+   */
+  get originalWidth() {
+    return this._gridWidth;
+  }
+
+  /**
+   * 修正后的网格宽度，即大于最小平方根的数
+   * 修正后的宽度。
+   */
+  get correctedWidth() {
+    return this._correctedWidth;
+  }
+
+  get useCorrectedWidth() {
+    return this._useCorrectedWidth;
+  }
+
+  /**
+   * 网格中每个角落的坐标。
+   * @returns {{ x1: number, y1: number, x2: number, y2: number}}
+   * 最左边(**x1**)，最上面(**y1**)，最右边(**x2**)和最下面(**y2**)的坐标。
+   */
+  get bounds() {
+    return {
+      x1: this.x,
+      y1: this.y,
+      x2: this.x + this._correctedWidth,
+      y2: this.y + this._correctedWidth,
+    };
+  }
+
+  set drawBoundaries(drawBoundaries) {
+    this._drawBoundaries = drawBoundaries;
+  }
+
+  get drawBoundaries() {
+    return this._drawBoundaries;
+  }
+
+  /**
+   * 网格的实际宽度。
+   * 当' cellSize '不是默认值时，网格的宽度将为
+   * 在' width '构造函数中给出的宽度。否则，就是修改后的宽度。
+   */
+  get gridWidth() {
+    if (!this.useCorrectedWidth) { return this._gridWidth; }
+    return Math.abs(this.cellSize - Math.sqrt(this._correctedWidth)) <= 1e-6 ? this._correctedWidth : this._gridWidth;
+  }
+
+  /**
+    *
+    * @param {number} width number. Required.
+    *
+    * The target sidelength of the grid. It is best for `width` to be a perfect square (i.e., 2, 4, 9, 16, 25, etc.). If
+    * not and the parameter `useCorrectedWidth` is set to **false**, then the grid will use a corrected width,
+    * which is the smallest perfect square greater than `width`.
+    *
+    * @param {number} cellSize number, null. Optional, default: square root of corrected width
+    *
+    * The size of each cell in the grid.
+    * If the value is **null**, the grid will use the default value.
+    *
+    * @param {{ width: number, color: number, alpha: number, alignment: number, native: boolean }}. Object. Optional.
+    *
+    *  default:
+    *  **{
+    *    width: 1,
+    *    color: 0xffffff,
+    *    alpha: 1,
+    *    alignment: 0.5,
+    *    native: true
+    *  }**
+    *
+    * Configuration for the line style on the object. See documentation on `PIXI.Graphics` for more on the `LineStyle` class.
+    *
+    * @param {boolean} useCorrectedWidth boolean. Optional. default: **true**
+    * If **true**, the grid will use the smallest perfect square greater than `width`.
+    * Otherwise, the grid will use the exact value given by `width`.
+    *
+    * @param {boolean} drawBoundaries boolean. Optional. default: **true**
+    * If **true**, the grid will draw its boundaries.
+    * Otherwise, the grid will not draw its boundaries. Mouse pointer detection is not affected.
+   */
+  constructor(
+    width,
+    cellSize= null,
+    lineConfig = null,
+    useCorrectedWidth = true,
+    drawBoundaries = true,
+  ) {
+    super();
+
+    this._cellSize = null;
+    this._amtLines = null;
+
+    this._gridWidth = width;
+    this._useCorrectedWidth = useCorrectedWidth;
+    this._correctedWidth = null;
+    this._correctWidth();
+
+    this._drawBoundaries = drawBoundaries;
+
+    this.cellSize = cellSize;
+
+    const lConfig = { ...DEFAULT_LINE_STYLE, ...(lineConfig || {} )};
+    this.lineStyle(
+      lConfig.width,
+      lConfig.color,
+      lConfig.alpha,
+      lConfig.alignment,
+      lConfig.native
+    );
+
+    // handle mouse move
+    this.interactive = true;
+    this.on('mousemove', (evt) => {
+      const mouseCoords = evt.data.getLocalPosition(evt.currentTarget.parent);
+      // 检查鼠标是否在此网格的范围内。如果不是，那就什么都不做。
+      if (
+        mouseCoords.x >= this.bounds.x1 &&
+        mouseCoords.x <= this.bounds.x2 &&
+        mouseCoords.y >= this.bounds.y1 &&
+        mouseCoords.y <= this.bounds.y2
+      ) {
+        const gridCoords = this.getCellCoordinates(mouseCoords.x, mouseCoords.y);
+        this.onMousemove(evt, gridCoords);
+      }
+    });
+  }
+
+  /**
+   * 绘制网格
+   */
+  drawGrid() {
+    this.clearGrid(true);
+    for (let i = (this._drawBoundaries ? 0 : 1); i <= this.amtLines - (this._drawBoundaries ? 0 : 1); i += 1) {
+      const startCoord = i * this._cellSize;
+
+      // 画列
+      this.moveTo(startCoord, 0);
+      this.lineTo(startCoord, this._correctedWidth);
+
+      // 画行
+      this.moveTo(0, startCoord);
+      this.lineTo(this._correctedWidth, startCoord);
+    }
+    this.endFill();
+
+    return this;
+  }
+
+  /**
+   * 清除网格
+   *
+   * @param {boolean} retainLineStyle 可选，默认：true
+   *
+   * 当**true**时，线条样式对象的配置将被保留。
+   * 否则，对象的行样式将恢复为' PIXI '指定的默认值。图形的对象。
+   */
+  clearGrid(retainLineStyle = true) {
+    const { width, alignment, color, alpha, native } = this.line;
+    this.clear();
+
+    if (!retainLineStyle) { return; }
+    this.lineStyle(width, color, alpha, alignment, native);
+
+    return this;
+  }
+
+  /**
+   * Transforms global coordinates to grid coordinates.
+   * @param {number} x
+   * The global X coordinate.
+   *
+   * @param {number} y
+   * The global Y coordinate.
+   */
+  getCellCoordinates(x, y)  {
+    return {
+      x: Math.floor((x - this.bounds.x1) / this.cellSize),
+      y: Math.floor((y - this.bounds.y1) / this.cellSize),
+    };
+  }
+
+  /**
+   * 检测到mousemove事件后触发的回调。
+   *
+   * @param {PIXI.InteractionData} evt
+   * 'PIXI.InteractionData '事件
+   *
+   * @param {{x: number, y: number}} gridCoords
+   * 网格坐标
+   */
+  onMousemove(evt, gridCoords) {
+
+  }
+
+    // 计算修正后的宽度。如果`useCorrectedWidth`构造函数参数设置为**false**，
+  // 然后，它简单地保持“width”的给定值作为修正后的宽度。
+  _correctWidth() {
+    if (!this._useCorrectedWidth) {
+      this._correctedWidth = this._gridWidth;
+    }
+
+    this._correctedWidth = Math.ceil(Math.sqrt(this._gridWidth)) ** 2;
+  }
+
+  // 计算修正后的宽度。如果`useCorrectedWidth`构造函数参数设置为**false**，
+  // 然后，它简单地保持“width”的给定值作为修正后的宽度。
+  correctWidth(width: number) {
+    if (!this._useCorrectedWidth) {
+      this._correctedWidth = width;
+    }
+
+    this._correctedWidth = Math.ceil(Math.sqrt(width)) ** 2;
+    this.cellSize = null;
+  }
+}

src/app/working-area/model/axImageShape.ts

@@ -13,7 +13,7 @@ import { AxArrowConnector } from './axArrowConnector';
  * AxImageShape
  */
 export class AxImageShape extends AxShape {
-    connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png');
+    // connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png');
     style = new PIXI.TextStyle({
         fontFamily: 'Arial',
         fontSize: 18,
@@ -100,55 +100,55 @@ export class AxImageShape extends AxShape {
 
 
 
-        if (this.assetData.CanConnect) {
+        // if (this.assetData.CanConnect) {
-            // connectPoint
+        //     // connectPoint
-            this.connectPoint = new PIXI.Sprite(this.connectPointTexture);
+        //     this.connectPoint = new PIXI.Sprite(this.connectPointTexture);
-            this.connectPoint.anchor.set(0.5);
+        //     this.connectPoint.anchor.set(0.5);
-            this.connectPoint.x = this.image.x;
+        //     this.connectPoint.x = this.image.x;
-            this.connectPoint.y = this.image.y;
+        //     this.connectPoint.y = this.image.y;
-            this.addChild(this.connectPoint);
+        //     this.addChild(this.connectPoint);
-            this.connectPoint.interactive = true;
+        //     this.connectPoint.interactive = true;
-            this.connectPoint
+        //     this.connectPoint
-                .on('pointerdown', event => {
+        //         .on('pointerdown', event => {
-                    event.stopPropagation();
+        //             event.stopPropagation();
-                    this.paintingPipeline(this.x, this.y);
+        //             // this.paintingPipeline(this.x, this.y);
-                })
+        //         })
-                .on('pointerover', event => {
+        //         .on('pointerover', event => {
-                    this.setSelectionBox(true, this.connectPoint);
+        //             this.setSelectionBox(true, this.connectPoint);
-                })
+        //         })
-                .on('pointerout', event => {
+        //         .on('pointerout', event => {
-                    this.setSelectionBox(false);
+        //             this.setSelectionBox(false);
-                });   
+        //         });
-            this.showConnectionPoint(false);
+        //     // this.showConnectionPoint(false);
-        }
+        // }
         this.setItemScale(1 / this.workingArea.backgroundImage.scale.x);
     }
-    // 设置选择框
+    // // 设置选择框
-    public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) {
+    // public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) {
-        if (b) {
+    //     if (b) {
-            this.selectionBox.lineStyle(2, 0x00EB00, 1);
+    //         this.selectionBox.lineStyle(2, 0x00EB00, 1);
-            this.selectionBox.position = sprite.position;
+    //         this.selectionBox.position = sprite.position;
-            this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height);
+    //         this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height);
-        } else {
+    //     } else {
-            this.selectionBox.clear();
+    //         this.selectionBox.clear();
-        }
+    //     }
-    }
+    // }
     // 设置名称
     public setNameVisible(value: boolean, mode: GameMode) {
         if (this.assetData.GameMode === mode) {
             this.text.visible = value;
         }
     }
-    // 显示连接点
+    // // 显示连接点
-    public showConnectionPoint(b: boolean) {
+    // public showConnectionPoint(b: boolean) {
-        this.connectPoint.visible = b;
+    //     this.connectPoint.visible = b;
-    }
+    // }
     /**
      * 设置点显示状态
      * @param value 显示状态
      */
     public setPointVisiable(value: boolean) {
-        let rect = this.getLocalBounds();
+        const rect = this.getLocalBounds();
         this.upLeft.x = rect.left;
         this.upLeft.y = rect.top;
         this.upRight.x = rect.right;
@@ -163,15 +163,15 @@ export class AxImageShape extends AxShape {
         this.downRight.visible = value;
     }
     /**
-     * 
+     *
      * @param scale 绘制边框
      */
     public drawBorder(scale: number) {
-        let visible = this.upLeft.visible;
+        const visible = this.upLeft.visible;
         this.setPointVisiable(false);
-        
+
         super.drawBorder(scale);
-        let rect = this.getLocalBounds();
+        const rect = this.getLocalBounds();
         this.upLeft.x = rect.left;
         this.upLeft.y = rect.top;
         this.upRight.x = rect.right;
@@ -193,66 +193,66 @@ export class AxImageShape extends AxShape {
             this.downRight.scale.set(scale);
         }
     }
-    paintingPipeline(x: number, y: number) {
+    // paintingPipeline(x: number, y: number) {
-        if (this.assetData.CanConnect) {
+    //     if (this.assetData.CanConnect) {
-                    if (this.workingArea.getPaintMode() === PaintMode.Pipeline) {
+    //                 if (this.workingArea.getPaintMode() === PaintMode.Pipeline) {
-                        if (this.workingArea.paintingShape === null) {
+    //                     if (this.workingArea.paintingShape === null) {
-                            this.workingArea.previewLineSegment.visible = true;
+    //                         this.workingArea.previewLineSegment.visible = true;
-                            this.workingArea.currentClickPoint.position =
+    //                         this.workingArea.currentClickPoint.position =
-                                new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
+    //                             new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
-                            this.workingArea.paintPoints.push(new PIXI.Point(x, y));
+    //                         this.workingArea.paintPoints.push(new PIXI.Point(x, y));
-                            const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos));
+    //                         const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos));
-                            const list = [];
+    //                         const list = [];
-                            json.forEach(element => {
+    //                         json.forEach(element => {
-                                const property = new PropertyInfo(element);
+    //                             const property = new PropertyInfo(element);
-                                list.push(property);
+    //                             list.push(property);
-                            });
+    //                         });
-                            const tempData =  {
+    //                         const tempData =  {
-                                TemplateId: this.workingArea.canvasData.selectTemplateData.id,
+    //                             TemplateId: this.workingArea.canvasData.selectTemplateData.id,
-                                CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect,
+    //                             CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect,
-                                Pipelines: new Array(),
+    //                             Pipelines: new Array(),
-                                FloorId: this.workingArea.canvasData.selectStorey.id,
+    //                             FloorId: this.workingArea.canvasData.selectStorey.id,
-                                Angle: this.workingArea.canvasData.selectTemplateData.angle,
+    //                             Angle: this.workingArea.canvasData.selectTemplateData.angle,
-                                Color: this.workingArea.canvasData.selectTemplateData.color,
+    //                             Color: this.workingArea.canvasData.selectTemplateData.color,
-                                Enabled: this.workingArea.canvasData.selectTemplateData.enabled,
+    //                             Enabled: this.workingArea.canvasData.selectTemplateData.enabled,
-                                FillMode: this.workingArea.canvasData.selectTemplateData.fillMode,
+    //                             FillMode: this.workingArea.canvasData.selectTemplateData.fillMode,
-                                FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId,
+    //                             FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId,
-                                FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize,
+    //                             FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize,
-                                Height : 32,
+    //                             Height : 32,
-                                Width : 32,
+    //                             Width : 32,
-                                Id: ObjectID.default.generate(),
+    //                             Id: ObjectID.default.generate(),
-                                ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl,
+    //                             ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl,
-                                InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode,
+    //                             InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode,
-                                MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)),
+    //                             MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)),
-                                Point: new PIXI.Point(0, 0),
+    //                             Point: new PIXI.Point(0, 0),
-                                Name : this.workingArea.canvasData.selectTemplateData.name,
+    //                             Name : this.workingArea.canvasData.selectTemplateData.name,
-                                PropertyInfos: list,
+    //                             PropertyInfos: list,
-                                Border : this.workingArea.canvasData.selectTemplateData.border,
+    //                             Border : this.workingArea.canvasData.selectTemplateData.border,
-                                DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode,
+    //                             DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode,
-                                Thickness : this.workingArea.canvasData.selectTemplateData.thickness,
+    //                             Thickness : this.workingArea.canvasData.selectTemplateData.thickness,
-                                IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding,
+    //                             IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding,
-                                GameMode: this.workingArea.canvasData.gameMode,
+    //                             GameMode: this.workingArea.canvasData.gameMode,
-                                LinkedObjects: new Array(this.assetData.Id),
+    //                             LinkedObjects: new Array(this.assetData.Id),
-                                Tag: this.workingArea.canvasData.selectTemplateData.tag
+    //                             Tag: this.workingArea.canvasData.selectTemplateData.tag
-                            };
+    //                         };
-                            this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea,false,true);
+    //                         this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea, false, true);
-                            this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
+    //                         this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
-                            this.workingArea.emit('createIcon', this.workingArea.paintingShape);
+    //                         this.workingArea.emit('createIcon', this.workingArea.paintingShape);
-                        } else {
+    //                     } else {
-                            this.workingArea.previewLineSegment.visible = false;
+    //                         this.workingArea.previewLineSegment.visible = false;
-                            this.workingArea.currentClickPoint.position =
+    //                         this.workingArea.currentClickPoint.position =
-                                new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
+    //                             new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
-                            this.workingArea.paintPoints.push(new PIXI.Point(x, y));
+    //                         this.workingArea.paintPoints.push(new PIXI.Point(x, y));
-                            this.workingArea.paintingShape.assetData.MultiPoint =
+    //                         this.workingArea.paintingShape.assetData.MultiPoint =
-                                JSON.parse(JSON.stringify(this.workingArea.paintPoints));
+    //                             JSON.parse(JSON.stringify(this.workingArea.paintPoints));
-                            this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id);
+    //                         this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id);
-                            this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
+    //                         this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
-                            this.workingArea.paintingShape.redraw();
+    //                         this.workingArea.paintingShape.redraw();
-                            this.workingArea.initPipelineData();
+    //                         this.workingArea.initPipelineData();
-                        }
+    //                     }
-                    }
+    //                 }
-                }
+    //             }
-    }
+    // }
     // 刷新
     public refresh() {
         if (this.assetData.CanConnect) {

src/app/working-area/model/axImageShapeTest.ts

@@ -0,0 +1,11 @@
+import { AxRectangleShape } from "./axRectangleShape";
+
+export class AxImageShapeTest extends AxRectangleShape{
+    /**
+     * 
+     */
+    constructor(x:number,y:number,width:number,height:number) {
+        super(x,y,width,height);
+        
+    }
+}

src/app/working-area/model/axLegend.ts

@@ -1,5 +1,7 @@
 import { Constructor } from '@angular/material/core/common-behaviors/constructor';
-import { Sprite, Texture,Text, Graphics, Point } from 'pixi.js';
+import { MatGridTileHeaderCssMatStyler } from '@angular/material/grid-list';
+import { DefaultProxy } from 'cesium';
+import { Sprite, Texture, Text, Graphics, Point } from 'pixi.js';
 import { WorkingAreaComponent } from '../working-area.component';
 import { AxShape } from './axShape';
 
@@ -8,20 +10,35 @@ import { AxShape } from './axShape';
  */
 export class AxLegend extends AxShape {
     // 数据
-    public shapeMap: Map<string,Legend> = new Map<string,Legend>();
+    public shapeMap: Map<string, Legend> = new Map<string, Legend>();
     pen: Graphics = new Graphics();
+    // up: Sprite = new Sprite(this.pointTexture);
+    // down: Sprite= new Sprite(this.pointTexture);
+    // left: Sprite= new Sprite(this.pointTexture);
+    // right: Sprite= new Sprite(this.pointTexture);
+    upLeft: Sprite = new Sprite(this.pointTexture);
+    upRight: Sprite = new Sprite(this.pointTexture);
+    downLeft: Sprite = new Sprite(this.pointTexture);
+    downRight: Sprite = new Sprite(this.pointTexture);
     /**
      *
      */
-    constructor(assetData: any, workingArea: WorkingAreaComponent,shapeMap:Map<string,Legend>) {
+    constructor(assetData: any, workingArea: WorkingAreaComponent, shapeMap: Map<string, Legend>) {
         super(assetData, workingArea);
         this.angle = -this.workingArea.backgroundImage.angle;
         this.name = this.assetData.Id;
+        this.pivot.set(this.assetData.PivotX, this.assetData.PivotY);
+        this.x = this.assetData.Point.x;
+        this.y = this.assetData.Point.y;
+        this.scale.set(this.assetData.Scale);
         this.shapeMap = shapeMap;
+        this.createPoint();
         this.refresh();
+        this.sortableChildren = true;
+        this.pen.zIndex = -1;
     }
     // 添加数据
-    public addItem(item:Legend) {
+    public addItem(item: Legend) {
         if (this.shapeMap.has(item.Name)) {
             this.shapeMap.get(item.Name).Count++;
         } else {
@@ -43,35 +60,35 @@ export class AxLegend extends AxShape {
     refresh() {
         this.removeChildren();
         let index = 1;
-        let offset = 25;
+        const offset = 25;
         let number = this.assetData.PropertyInfos[0].PropertyValue;
-        let width = 300;
+        const width = 300;
-        let height = 50;
+        const height = 50;
-        for (let i = 0; i < number; i++){
+        for (let i = 0; i < number; i++) {
-            if (i >= this.shapeMap.size) break;
+            if (i >= this.shapeMap.size) { break; }
-            let x = width * i;
+            const x = width * i;
-            var textImage = new Text('图例',{
+            const textImage = new Text('图例', {
                 fontSize: 20,
-                fill: ['#0000ff'], 
+                fill: ['#0000ff'],
             });
-            textImage.anchor.set(0.5)
+            textImage.anchor.set(0.5);
             textImage.x = x;
             textImage.y = 0;
             this.addChild(textImage);
 
-            var textName = new Text("名称"+' 【数量】',{
+            const textName = new Text('名称' + ' 【数量】', {
                 fontSize: 20,
-                fill: ['#0000ff'], 
+                fill: ['#0000ff'],
             });
-            textName.anchor.set(0,0.5);
+            textName.anchor.set(0, 0.5);
             textName.x = x + 32 + offset;
             textName.y = 0;
             this.addChild(textName);
         }
-        for (let item of this.shapeMap.values()) {
+        for (const item of this.shapeMap.values()) {
-            let x = index % number === 0 ? (number -1) * width : (index % number - 1) * width;
+            const x = index % number === 0 ? (number - 1) * width : (index % number - 1) * width;
-            let y = Math.ceil(index / number) * height;
+            const y = Math.ceil(index / number) * height;
-            let image: Sprite = Sprite.from(item.ImageUrl);
+            const image: Sprite = Sprite.from(item.ImageUrl);
             image.width = 32;
             image.height = 32;
             image.anchor.set(0.5);
@@ -79,40 +96,364 @@ export class AxLegend extends AxShape {
             image.y = y;
             this.addChild(image);
 
-            var textName = new Text(item.Name+' 【'+item.Count.toString()+'】',{
+            const textName = new Text(item.Name + ' 【' + item.Count.toString() + '】', {
                 fontSize: 20,
             });
-            textName.anchor.set(0,0.5);
+            textName.anchor.set(0, 0.5);
-            textName.x = x + image.width/2 + offset;
+            textName.x = x + image.width / 2 + offset;
             textName.y = y;
             this.addChild(textName);
             index++;
         }
         if (this.shapeMap.size > 0) {
-            let rect = this.getLocalBounds();
+            const rect = this.getLocalBounds();
             this.pen.clear();
-            this.pen.beginFill(0xffffff,0.01);
+            this.pen.beginFill(0xffffff, 1);
             this.pen.lineStyle(3, 0x000000);
-            this.pen.moveTo(rect.left-offset, rect.top-offset);
+            this.pen.moveTo(rect.left - offset, rect.top - offset);
-            this.pen.lineTo(rect.right+offset, rect.top-offset);
+            this.pen.lineTo(rect.right + offset, rect.top - offset);
-            this.pen.lineTo(rect.right+offset, rect.bottom+offset);
+            this.pen.lineTo(rect.right + offset, rect.bottom + offset);
             this.pen.lineTo(rect.left - offset, rect.bottom + offset);
             this.pen.closePath();
             this.pen.endFill();
-        }                
+        }
         this.addChild(this.pen);
+        // 添加border
+        this.addChild(this.border);
+        // 添加控制点
+        this.addChild(this.upLeft);
+        this.addChild(this.upRight);
+        this.addChild(this.downLeft);
+        this.addChild(this.downRight);
+
+
         this.angle = -this.workingArea.backgroundImage.angle;
+        this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
+    }
+    public createPoint() {
+        // this.addChild(this.upLeft);
+        this.upLeft.anchor.set(0.5);
+        this.upLeft.interactive = true;
+        this.upLeft.visible = false;
+        this.upLeft
+            .on('pointerdown', event => {
+                event.stopPropagation();
+                event.currentTarget.data = event.data;
+                event.currentTarget.alpha = 0.5;
+                event.currentTarget.dragging = true;
+
+                event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
+
+                const pointStart = this.position;
+                const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downRight.position));
+
+                const delX = pointEnd.x - pointStart.x;
+                const delY = pointEnd.y - pointStart.y;
+
+                this.pivot.set(this.downRight.x, this.downRight.y);
+
+                this.position.x += delX;
+                this.position.y += delY;
+
+                this.assetData.PivotX = this.pivot.x;
+                this.assetData.PivotY = this.pivot.y;
+                this.assetData.Point = new Point(this.x, this.y);
+            })
+            .on('pointerup', event => {
+                if (event.currentTarget.dragging) {
+                    event.currentTarget.alpha = 1;
+                    event.currentTarget.dragging = false;
+                    event.currentTarget.data = null;
+                }
+            })
+            .on('pointerupoutside', event => {
+                if (event.currentTarget.dragging) {
+                    event.currentTarget.alpha = 1;
+                    event.currentTarget.dragging = false;
+                    event.currentTarget.data = null;
+                }
+            })
+            .on('pointermove', event => {
+                if (event.currentTarget.dragging) {
+                    const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
+                    const startPos = this.position;
+                    const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition));
+                    const width = (endPos.x - startPos.x);
+                    const height = (endPos.y - startPos.y);
+                    const scaleX = width / (this.width / this.scale.x);
+                    const scaleY = height / (this.width / this.scale.x);
+                    const angle = Math.abs(this.angle);
+                    console.log(angle);
+                    if (angle === 0) {
+                        this.scale.set(-scaleX);
+                    } else if (angle === 90) {
+                        this.scale.set(scaleY);
+                    } else if (angle === 180) {
+                        this.scale.set(scaleX);
+                    } else if (angle === 270) {
+                        this.scale.set(-scaleY);
+                    }
+                    this.assetData.Scale = this.scale.x;
+                }
+            })
+            .on('rightclick', event => {
+                this.border.visible = false;
+            });
+        // this.addChild(this.upRight);
+        this.upRight.anchor.set(0.5);
+        this.upRight.interactive = true;
+        this.upRight.visible = false;
+        this.upRight
+            .on('pointerdown', event => {
+                event.stopPropagation();
+                event.currentTarget.data = event.data;
+                event.currentTarget.alpha = 0.5;
+                event.currentTarget.dragging = true;
+
+                event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
+
+                const pointStart = this.position;
+                const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downLeft.position));
+
+                const delX = pointEnd.x - pointStart.x;
+                const delY = pointEnd.y - pointStart.y;
+
+                this.pivot.set(this.downLeft.x, this.downLeft.y);
+
+                this.position.x += delX;
+                this.position.y += delY;
+
+                this.assetData.PivotX = this.pivot.x;
+                this.assetData.PivotY = this.pivot.y;
+                this.assetData.Point = new Point(this.x, this.y);
+            })
+            .on('pointerup', event => {
+                if (event.currentTarget.dragging) {
+                    event.currentTarget.alpha = 1;
+                    event.currentTarget.dragging = false;
+                    event.currentTarget.data = null;
+                }
+            })
+            .on('pointerupoutside', event => {
+                if (event.currentTarget.dragging) {
+                    event.currentTarget.alpha = 1;
+                    event.currentTarget.dragging = false;
+                    event.currentTarget.data = null;
+                }
+            })
+            .on('pointermove', event => {
+                if (event.currentTarget.dragging) {
+                    const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
+                    const startPos = this.position;
+                    const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition));
+                    const width = (endPos.x - startPos.x);
+                    const height = (endPos.y - startPos.y);
+                    const scaleX = width / (this.width / this.scale.x);
+                    const scaleY = height / (this.width / this.scale.x);
+                    const angle = Math.abs(this.angle);
+                    console.log(angle);
+                    if (angle === 0) {
+                        this.scale.set(scaleX);
+                    } else if (angle === 90) {
+                        this.scale.set(-scaleY);
+                    } else if (angle === 180) {
+                        this.scale.set(-scaleX);
+                    } else if (angle === 270) {
+                        this.scale.set(scaleY);
+                    }
+                    this.assetData.Scale = this.scale.x;
+                }
+            })
+            .on('rightclick', event => {
+                this.border.visible = false;
+            });
+        // this.addChild(this.downLeft);
+        this.downLeft.anchor.set(0.5);
+        this.downLeft.interactive = true;
+        this.downLeft.visible = false;
+        this.downLeft
+            .on('pointerdown', event => {
+                event.stopPropagation();
+                event.currentTarget.data = event.data;
+                event.currentTarget.alpha = 0.5;
+                event.currentTarget.dragging = true;
+
+                event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
+
+                const pointStart = this.position;
+                const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upRight.position));
+
+                const delX = pointEnd.x - pointStart.x;
+                const delY = pointEnd.y - pointStart.y;
+
+                this.pivot.set(this.upRight.x, this.upRight.y);
+
+                this.position.x += delX;
+                this.position.y += delY;
+
+                this.assetData.PivotX = this.pivot.x;
+                this.assetData.PivotY = this.pivot.y;
+                this.assetData.Point = new Point(this.x, this.y);
+            })
+            .on('pointerup', event => {
+                if (event.currentTarget.dragging) {
+                    event.currentTarget.alpha = 1;
+                    event.currentTarget.dragging = false;
+                    event.currentTarget.data = null;
+                }
+            })
+            .on('pointerupoutside', event => {
+                if (event.currentTarget.dragging) {
+                    event.currentTarget.alpha = 1;
+                    event.currentTarget.dragging = false;
+                    event.currentTarget.data = null;
+                }
+            })
+            .on('pointermove', event => {
+                if (event.currentTarget.dragging) {
+                    const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
+                    const startPos = this.position;
+                    const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition));
+                    const width = (endPos.x - startPos.x);
+                    const height = (endPos.y - startPos.y);
+                    const scaleX = width / (this.width / this.scale.x);
+                    const scaleY = height / (this.width / this.scale.x);
+                    const angle = Math.abs(this.angle);
+                    console.log(angle);
+                    if (angle === 0) {
+                        this.scale.set(-scaleX);
+                    } else if (angle === 90) {
+                        this.scale.set(scaleY);
+                    } else if (angle === 180) {
+                        this.scale.set(scaleX);
+                    } else if (angle === 270) {
+                        this.scale.set(-scaleY);
+                    }
+                    this.assetData.Scale = this.scale.x;
+                }
+            })
+            .on('rightclick', event => {
+                this.border.visible = false;
+            });
+        // this.addChild(this.downRight);
+        this.downRight.anchor.set(0.5);
+        this.downRight.interactive = true;
+        this.downRight.visible = false;
+        this.downRight
+            .on('pointerdown', event => {
+                event.stopPropagation();
+                event.currentTarget.data = event.data;
+                event.currentTarget.alpha = 0.5;
+                event.currentTarget.dragging = true;
+
+                event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
+
+                const pointStart = this.position;
+                const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upLeft.position));
+
+                const delX = pointEnd.x - pointStart.x;
+                const delY = pointEnd.y - pointStart.y;
+
+                this.pivot.set(this.upLeft.x, this.upLeft.y);
+
+                this.position.x += delX;
+                this.position.y += delY;
+
+                this.assetData.PivotX = this.pivot.x;
+                this.assetData.PivotY = this.pivot.y;
+                this.assetData.Point = new Point(this.x, this.y);
+            })
+            .on('pointerup', event => {
+                if (event.currentTarget.dragging) {
+                    event.currentTarget.alpha = 1;
+                    event.currentTarget.dragging = false;
+                    event.currentTarget.data = null;
+                }
+            })
+            .on('pointerupoutside', event => {
+                if (event.currentTarget.dragging) {
+                    event.currentTarget.alpha = 1;
+                    event.currentTarget.dragging = false;
+                    event.currentTarget.data = null;
+                }
+            })
+            .on('pointermove', event => {
+                if (event.currentTarget.dragging) {
+                    const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
+                    const startPos = this.position;
+                    const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition));
+                    const width = (endPos.x - startPos.x);
+                    const height = (endPos.y - startPos.y);
+                    const scaleX = width / (this.width / this.scale.x);
+                    const scaleY = height / (this.width / this.scale.x);
+                    const angle = Math.abs(this.angle);
+                    console.log(angle);
+                    if (angle === 0) {
+                        this.scale.set(scaleX);
+                    } else if (angle === 90) {
+                        this.scale.set(-scaleY);
+                    } else if (angle === 180) {
+                        this.scale.set(-scaleX);
+                    } else if (angle === 270) {
+                        this.scale.set(scaleY);
+                    }
+                    this.assetData.Scale = this.scale.x;
+                }
+            })
+            .on('rightclick', event => {
+                this.border.visible = false;
+            });
+    }
+    /**
+     * 设置点显示状态
+     * @param value 显示状态
+     */
+    public setPointVisiable(value: boolean) {
+        const rect = this.getLocalBounds();
+        this.upLeft.x = rect.left;
+        this.upLeft.y = rect.top;
+        this.upRight.x = rect.right;
+        this.upRight.y = rect.top;
+        this.downLeft.x = rect.left;
+        this.downLeft.y = rect.bottom;
+        this.downRight.x = rect.right;
+        this.downRight.y = rect.bottom;
+        this.upLeft.visible = value;
+        this.upRight.visible = value;
+        this.downLeft.visible = value;
+        this.downRight.visible = value;
+    }
+    /**
+     *
+     * @param scale 绘制边框
+     */
+    public drawBorder(scale: number) {
+        const visible = this.upLeft.visible;
+        console.log(visible);
+        this.setPointVisiable(false);
+
+        super.drawBorder(scale);
+        const rect = this.getLocalBounds();
+        this.upLeft.x = rect.left;
+        this.upLeft.y = rect.top;
+        this.upRight.x = rect.right;
+        this.upRight.y = rect.top;
+        this.downLeft.x = rect.left;
+        this.downLeft.y = rect.bottom;
+        this.downRight.x = rect.right;
+        this.downRight.y = rect.bottom;
+        this.setPointVisiable(visible);
     }
 }
 
-export class Legend{
+export class Legend {
     public Name: string;
     public ImageUrl: string;
     public Count: number;
     /**
      *
      */
-    constructor(name:string,imageUrl:string,count:number) {
+    constructor(name: string, imageUrl: string, count: number) {
         this.Name = name;
         this.ImageUrl = imageUrl;
         this.Count = count;

src/app/working-area/model/axRectangleShape.ts

@@ -0,0 +1,21 @@
+import { Sprite } from "pixi.js";
+import { Graphics } from "pixi.js";
+import { WorkingAreaComponent } from "../working-area.component";
+import { AxShape } from "./axShape";
+
+export class AxRectangleShape extends AxShape{
+    /**
+     *
+     */
+    constructor(x:number,y:number,width:number,height:number,assetData: any, workingArea: WorkingAreaComponent) {
+        super(assetData,workingArea);
+        this.beginFill(0x0000ff,1);
+        this.lineStyle(1, 0xff0000,1);
+        this.drawRect(x, y, width, height);
+        this.endFill();
+        
+        
+    }
+
+    
+}

src/app/working-area/model/axShape.ts

@@ -6,7 +6,7 @@ import { WorkingAreaComponent } from '../working-area.component';
 /**
  * 安信形状
  */
-export class AxShape extends Container {
+export class AxShape extends Graphics {
     assetData: any;
     pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png')
     workingArea: WorkingAreaComponent;
@@ -83,12 +83,6 @@ export class AxShape extends Container {
             })
             .on('rightclick', event => {
                 this.border.visible = false;
-            })
-            .on('pointerover', event => {
-                event.stopPropagation();
-            })
-            .on('pointerout', event => {
-                event.stopPropagation();
             });
     }
     redraw(): void {
@@ -101,23 +95,14 @@ export class AxShape extends Container {
     public setItemScale(scale: number) {
         
     }
-    /**
+
-     * 显示边框
-     */
     public showBorder() {
-        if (this.assetData.FixedSize) {
-            this.drawBorder(1);
-        }
-        else {
-            this.drawBorder(1/this.workingArea.backgroundImage.scale.x);
-        }
         this.border.visible = true;
     }
     /**
      * 隐藏边框
      */
     public hideBorder() {
-        this.border.clear();
         this.border.visible = false;
     }
         /**
@@ -151,13 +136,13 @@ export class AxShape extends Container {
         this.drawDash(this.border, p4.x, p4.y + 0.5*scale, p1.x, p1.y - 0.5*scale, dashLength, spaceLength);
         
         this.border.lineStyle(0, 0x0000ff);
-        this.border.beginFill(0x00ff00,0.1);
+        // this.border.beginFill(0x00ff00,0.1);
         this.border.moveTo(p1.x, p1.y);
         this.border.lineTo(p2.x, p2.y);
         this.border.lineTo(p3.x, p4.y);
         this.border.lineTo(p4.x, p4.y);
         this.border.closePath();
-        this.border.endFill();
+        // this.border.endFill();
   }
   // 画虚线
   drawDash(target, x1, y1, x2, y2,dashLength = 5, spaceLength = 1) {

src/app/working-area/model/messageSystem.ts

@@ -0,0 +1,37 @@
+class MyEvent<T> extends CustomEvent<T> { 
+    public static readonly CMD: string = "EVENT_NAME";
+    public constructor($type: string , $data: T ) { 
+        super( $type , { detail: $data, bubbles: true, cancelable: true, composed: true });
+    }
+}
+
+class MyDispatch extends EventTarget { 
+    private static _instance: MyDispatch;
+    public static get Instance(): MyDispatch { 
+        if (!MyDispatch._instance) MyDispatch._instance = new MyDispatch();
+        return MyDispatch._instance;
+    }
+    public send<T>($data: T, $type: string = MyEvent.CMD): void { 
+        const $event: CustomEvent = new MyEvent<T>($type, $data);
+        this.dispatchEvent($event);
+    }
+}
+
+class Test { 
+
+    public constructor() { 
+        MyDispatch.Instance.addEventListener(MyEvent.CMD, this.onEvent as EventListener);
+    }
+    private onEvent($e: MyEvent<ITest>): void { 
+        console.log(`target  ${$e.target}`);
+        console.log(`name: ${$e.detail._name} , occupation: ${$e.detail._occupation}`);
+    }
+}
+
+interface ITest { 
+    _name: string;
+    _occupation: string;
+}
+
+let $test: Test = new Test();
+MyDispatch.Instance.send<ITest>({ _name: `Aonaufly`, _occupation: `it` });

src/app/working-area/model/multipointIcon.ts

@@ -48,6 +48,8 @@ export class MultipointIcon extends AxShape {
         this.text.visible = this.showName;
         this.text.angle = -this.workingArea.backgroundImage.angle;
         this.addChild(this.text);
+        this.assetData.Thickness = this.assetData.Thickness === 0 ? 32: this.assetData.Thickness;
+        var tileScale = this.assetData.Thickness/64;
         // 画线图标
         for (let i = 0, count = this.pointsData.length - 1; i < count; i++) {
             const pointA = this.pointsData[i];
@@ -58,15 +60,17 @@ export class MultipointIcon extends AxShape {
             const b = pointB.y - pointA.y;
             const distance = Math.sqrt(a * a + b * b);
 
-            const icon = new PIXI.TilingSprite(PIXI.Texture.from(this.assetData.ImageUrl), distance, 64);
+            const icon = new PIXI.TilingSprite(PIXI.Texture.from(this.assetData.ImageUrl), distance, this.assetData.Thickness);
+            icon.tileScale.set(tileScale);
             icon.anchor.set(0, 0.5);
             icon.x = pointA.x;
             icon.y = pointA.y;
             icon.angle = angle;
-            // icon.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness;
             this.iconsTilingSprite.push(icon);
             this.addChild(icon);
             this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]);
+            // 等距等分
+            this.tileDistanceEqual(icon);
         }
         this.sortableChildren = true;
         this.text.zIndex = this.pointsData.length;
@@ -128,6 +132,8 @@ export class MultipointIcon extends AxShape {
                             const distance = Math.sqrt(a * a + b * b);
                             this.iconsTilingSprite[index].angle = angle;
                             this.iconsTilingSprite[index].width = distance;
+
+                            this.tileDistanceEqual(this.iconsTilingSprite[index]);
                         } else if (index < array.length - 1) {// 不是第一个点，也不是最后一个点
                             this.iconsTilingSprite[index].x = newPosition.x;
                             this.iconsTilingSprite[index].y = newPosition.y;
@@ -143,12 +149,16 @@ export class MultipointIcon extends AxShape {
                             this.iconsTilingSprite[index].angle = angle;
                             this.iconsTilingSprite[index].width = distance;
 
+                            this.tileDistanceEqual(this.iconsTilingSprite[index]);
+
                             const angleC = Math.atan2((pointA.y - pointC.y), (pointA.x - pointC.x)) * (180 / Math.PI);
                             const aC = pointA.x - pointC.x;
                             const bC = pointA.y - pointC.y;
                             const distanceC = Math.sqrt(aC * aC + bC * bC);
                             this.iconsTilingSprite[index - 1].angle = angleC;
                             this.iconsTilingSprite[index - 1].width = distanceC;
+
+                            this.tileDistanceEqual(this.iconsTilingSprite[index - 1]);
                         } else if (index === array.length - 1) { // 最后一个点
                             const pointA = array[index]; // 当前点
                             const pointC = array[index - 1]; // 前一个点
@@ -159,6 +169,8 @@ export class MultipointIcon extends AxShape {
                             const distanceC = Math.sqrt(aC * aC + bC * bC);
                             this.iconsTilingSprite[index - 1].angle = angleC;
                             this.iconsTilingSprite[index - 1].width = distanceC;
+
+                            this.tileDistanceEqual(this.iconsTilingSprite[index - 1]);
                         }
                         this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
                         this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]);
@@ -177,6 +189,16 @@ export class MultipointIcon extends AxShape {
             item.visible = value;
         });
     }
+    /**
+     * 
+     * @param scale 绘制边框
+     */
+    public drawBorder(scale: number) {
+        let visible = this.pointsGraphics[0].visible;
+        this.setPointVisiable(false);        
+        super.drawBorder(scale);
+        this.setPointVisiable(visible);
+    }
     // 设置名称
     public setNameVisible(value: boolean, mode: GameMode) {
         if (this.assetData.GameMode === mode) {
@@ -192,13 +214,28 @@ export class MultipointIcon extends AxShape {
     }
     // 刷新数据
     public refresh() {
-        // console.log(this.assetData);
+        this.assetData.Thickness = this.assetData.Thickness === 0 ? 32: this.assetData.Thickness;
-        // this.iconsTilingSprite.forEach(element => {
+        this.iconsTilingSprite.forEach(item => {   
-        //     element.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness;
+            // 厚度优化
-        // });
+            this.tileDistanceEqual(item);
+        });
         this.text.text = this.assetData.Name
             + '\r\n'
             + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
         this.text.angle = -this.workingArea.backgroundImage.angle;
     }
+
+    // 等距等分
+    public tileDistanceEqual(icon: PIXI.TilingSprite) {
+        icon.height = this.assetData.Thickness;
+        var tileScale = this.assetData.Thickness / 64;
+        icon.tileScale.set(tileScale);
+        console.log(tileScale);
+        var tileWidth = tileScale * 64;
+        var tileCount = Math.ceil(icon.width / tileWidth);
+        tileWidth = icon.width / tileCount;
+        tileScale = tileWidth / 64;
+        console.log(tileScale);
+        icon.tileScale.set(tileScale);
+    }
 }

src/app/working-area/model/polygonIcon.ts

@@ -155,6 +155,16 @@ export class PolygonIcon extends AxShape {
             item.visible = value;
         });
     }
+    /**
+     * 
+     * @param scale 绘制边框
+     */
+    public drawBorder(scale: number) {
+        let visible = this.pointsGraphics[0].visible;
+        this.setPointVisiable(false);        
+        super.drawBorder(scale);
+        this.setPointVisiable(visible);
+    }
     // 设置缩放
     public setItemScale(scale: number) {
         // this.text.scale.set(scale);

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

@@ -17,6 +17,8 @@ import { AxPreviewImageShape } from './model/axPreviewImageShape';
 import { AxArrowConnector } from './model/axArrowConnector';
 import { AxLegend, Legend } from './model/axLegend';
 import { NullTemplateVisitor } from '@angular/compiler';
+import { AxRectangleShape } from './model/axRectangleShape';
+import { AxGrid } from './model/axGrid';
 
 
 @Component({
@@ -107,6 +109,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 确认绘制按钮
    */
   private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.png');
+
+  /**
+   * 编辑点图片
+   */
+  editorPointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png');
   /**
    * 框选工具图形
    */
@@ -130,23 +137,23 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   public animation;
   public animationIcon;
   public animationTime;
-  // 车辆作业面
+  /**
-  public carAreas: PolygonIcon[];
+   * 网格
-  // 车辆数据
+   */
-  public carData: Map<string, any> = new Map<string, any>();
+  public grid: AxGrid = null;
-  // 当前选择的车辆id
+  /**
-  public selectCar: any = null;
+   * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta
-  // 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta
+   * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。
-  // Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。
+   * Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。
-  // Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。
+   * RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。
-  // RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。
+   * Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。
-  // Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。
+   */
-  public VERSION = '1.0.4.20210109_beta';
+  public VERSION = '1.0.9.20210118_beta';
   /**
    * 数据初始化
    */
   ngOnInit(): void {
-    PIXI.utils.skipHello()
+    PIXI.utils.skipHello();
     this.sayHello();
     this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
       if (event.keyCode === 17) {
@@ -175,28 +182,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.selection.deselectAll();
   }
   /**
-   * 
+   *
    * @param obj 删除一个形状
    */
   public deleteShape(shape) {
     if (this.allowEdit && this.canvasData.gameMode === shape.assetData.GameMode) {
-      this.emit('deleteIcon',shape);
+      this.emit('deleteIcon', shape);
     }
   }
   /**
    * 打招呼
    */
   sayHello() {
-    var _a;
+    let _a;
     if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
-        var args = [
+        const args = [
-            "\n %c 版本号 - " + this.VERSION + "\n",
+            '\n %c 版本号 - ' + this.VERSION + '\n',
             'color: #ff66a5; background: #000000; padding:5px 0;',
         ];
         (_a = window.console).log.apply(_a, args);
-    }
+    } else if (window.console) {
-    else if (window.console) {
+        window.console.log('\n %c 版本号 - ' + this.VERSION + '\n');
-        window.console.log("\n %c 版本号 - " + this.VERSION + "\n");
     }
 }
   /**
@@ -223,7 +229,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       if (this.backgroundImage.scale.x >= 32) {
         this.backgroundImage.scale.x = 32;
         this.backgroundImage.scale.y = 32;
-        this.resizeItem(1/this.backgroundImage.scale.x)
+        this.resizeItem(1 / this.backgroundImage.scale.x);
         return;
       }
       this.backgroundImage.pivot.set(pivot.x, pivot.y);
@@ -237,7 +243,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       if (this.backgroundImage.scale.x <= 0.1) {
         this.backgroundImage.scale.x = 0.1;
         this.backgroundImage.scale.y = 0.1;
-        this.resizeItem(1/this.backgroundImage.scale.x)
+        this.resizeItem(1 / this.backgroundImage.scale.x);
         return;
       }
       this.backgroundImage.pivot.set(pivot.x, pivot.y);
@@ -248,10 +254,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       this.backgroundImage.position.x += delX;
       this.backgroundImage.position.y += delY;
     }
-    this.resizeItem(1/this.backgroundImage.scale.x)
+    this.resizeItem(1 / this.backgroundImage.scale.x);
   }
   // 重置图形缩放
-  public resizeItem(size:number) {
+  public resizeItem(size: number) {
     this.backgroundImage.children.forEach(item => {
       if (item instanceof AxShape) {
           item.setItemScale(size);
@@ -294,11 +300,24 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       antialias: true,
       transparent: false,
       resolution: 1,
-      backgroundColor: 0xE9FAFF
+      backgroundColor: 0xE9EAEA
     });
     this.content.nativeElement.appendChild(this.app.view);
     this.app.view.style.border = '1px dashed blue';
     this.animator = new Charm(PIXI);
+    // 创建网格
+    this.grid = new AxGrid(this.app.view.width, null, { color: 0xffffff }, true, true);
+    // this.grid.x = (this.app.view.width / 2) - (this.grid.gridWidth / 2);
+    // this.grid.y = (this.app.view.height / 2) - (this.grid.gridWidth / 2);
+    // this.grid.pivot.set(0.5);
+    this.grid.x = this.app.stage.x;
+    this.grid.y = this.app.stage.y;
+    this.app.stage.addChild(this.grid);
+    this.grid.drawGrid();
+    this.grid.onMousemove = (evt, gridCoord) => {
+      console.log(gridCoord);
+    };
+
     this.createBackgroundImage();
     this.app.ticker.add((delta) => {
       this.animator.update();
@@ -339,14 +358,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     /**
      * 选中事件
      */
-    this.on('select', (axShape:AxShape)=> {
+    this.on('select', (axShape: AxShape) => {
-        axShape.showBorder();
+      // if (axShape instanceof AxRectangleShape) {
-        axShape.setPointVisiable(this.allowEdit);
+      //   let upLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture);
+      //   let upRight: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture);
+      //   let downLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture);
+      //   let downRight: PIXI.Sprite = new PIXI.Sprite(this.editorPointTexture);
+      // } else {
+      axShape.showBorder();
+      axShape.drawBorder(1 / this.backgroundImage.scale.x);
+      axShape.setPointVisiable(this.allowEdit);
+      // }
     });
     /**
      * 取消选中事件
      */
-    this.on('deselect', (axShape:AxShape)=> {
+    this.on('deselect', (axShape: AxShape) => {
         axShape.hideBorder();
         axShape.setPointVisiable(false);
     });
@@ -354,10 +381,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
      * 创建图标事件（数据处理）
      */
     this.on('createIcon', (axShape: AxShape) => {
-      console.log("新增图标："+axShape.assetData.Name);
+      console.log('新增图标：' + axShape.assetData.Name);
       if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
         // 添加楼层数据
         this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData;
+        console.log(this.canvasData.originaleveryStoreyData);
         // 添加建筑数据
         this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id] = axShape.assetData;
       } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案
@@ -367,7 +395,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         }
         this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id] = axShape.assetData;
       }
-      else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试      
+      else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试
         if (axShape.assetData.Tag === 1) {
           this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData;
         } else {
@@ -378,10 +406,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
           this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id] = axShape.assetData;
         }
       }
-      var temp = this.backgroundImage.getChildByName("图例") as AxLegend;
+      const temp = this.backgroundImage.getChildByName('图例') as AxLegend;
       if ( temp !== undefined
-        && temp !== null) {
+        && temp !== null
-        var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
+      && axShape.assetData.Name !== '图例') {
+        const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
         temp.addItem(itemLegend);
       }
       this.emit('canvasDataChanged');
@@ -390,12 +419,13 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     /**
      * 删除图标事件(数据处理)
      */
-    this.on('deleteIcon', (axShape:AxShape)=>{
+    this.on('deleteIcon', (axShape: AxShape) => {
       // 删除图例对象
-      var temp = this.backgroundImage.getChildByName("图例") as AxLegend;
+      const temp = this.backgroundImage.getChildByName('图例') as AxLegend;
       if ( temp !== undefined
-        && temp !== null) {
+        && temp !== null
-        var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
+      && axShape.assetData.Name !== '图例') {
+        const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
         temp.deleteItem(itemLegend);
       }
 
@@ -410,7 +440,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id];
         delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id];
       }
-      else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试      
+      else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试
         if (axShape.assetData.Tag === 1) {
           // 删除楼层数据
           delete this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id];
@@ -502,7 +532,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 创建楼层图形
    */
   public createFloorShape(floorData: any) {
-    if (floorData === undefined || floorData === null) return;
+    if (floorData === undefined || floorData === null) { return; }
     Object.keys(floorData).forEach((key) => {
       switch (floorData[key].InteractiveMode) {
         case 0:
@@ -518,9 +548,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         case 3:
           if (floorData[key].Name === '水带') {
             const distance = new AxArrowConnector(floorData[key], this, false, true);
-          } else if(floorData[key].Name === '距离'){
+          } else if (floorData[key].Name === '距离') {
             const distance = new AxArrowConnector(floorData[key], this, true, true);
-          }else if(floorData[key].Name === '普通墙' || floorData[key].Name === '承重墙'){
+          } else if (floorData[key].Name === '普通墙' || floorData[key].Name === '承重墙') {
             const wall = new AxArrowConnector(floorData[key], this, false, false);
           }
           break;
@@ -534,7 +564,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   public createNodeShape(nodeData: any) {
     if (nodeData !== undefined && nodeData !== null) {
       Object.keys(nodeData).forEach((key) => {
-        if (nodeData[key] === undefined || nodeData[key] === null) { return;}
+        if (nodeData[key] === undefined || nodeData[key] === null) { return; }
         Object.keys(nodeData[key]).forEach((tempKey) => {
           switch (nodeData[key][tempKey].InteractiveMode) {
             case 0:
@@ -548,7 +578,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               const polygonIcon = new PolygonIcon(nodeData[key][tempKey], this);
               break;
             case 3:
-              const pipeline = new AxArrowConnector(nodeData[key][tempKey], this,false,true);
+              const pipeline = new AxArrowConnector(nodeData[key][tempKey], this, false, true);
               break;
         }
         });
@@ -578,8 +608,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   /**
    * 创建背景图
    */
-  public createBackgroundImage(){
+  public createBackgroundImage() {
-    this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png')
+    this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png');
     this.backgroundImage.anchor.set(0.5);
     // this.backgroundImage.x = this.app.view.width / 2;
     // this.backgroundImage.y = this.app.view.height / 2;
@@ -601,7 +631,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.backgroundImage.sortableChildren = true;
     this.backgroundImage
       .on('pointerdown', event => {
-        if (event.data.button !== 0) return;
+        if (event.data.button !== 0) { return; }
+        console.log(this.backgroundImage.toLocal(this.mousePosition));
         if (!event.currentTarget.dragging && this.selection.isMultiselection === false) {
           this.selection.deselectAll();
           event.currentTarget.data = event.data;
@@ -735,14 +766,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               // this.paintingIcon = new PolygonIcon(this.paintPoints, this);
               break;
             case PaintMode.Pipeline:
-              if (this.canvasData.selectTemplateData.name === '水带') {
+              // if (this.canvasData.selectTemplateData.name === '水带-------') {
-                if (this.paintingShape !== null) {
+              //   if (this.paintingShape !== null) {
-                  this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              //     this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
-                  this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+              //     this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
-                  this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints));
+              //     this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints));
-                  this.paintingShape.refresh();
+              //     this.paintingShape.refresh();
-                }
+              //   }
-              } else {
+              // } else {
                 this.previewLineSegment.visible = true;
                 this.enterPaintEndButton.position = this.circleShadow.position;
                 this.enterPaintEndButton.visible = true;
@@ -785,17 +816,19 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
                     Tag: this.canvasData.selectTemplateData.tag
                   };
                   if (this.canvasData.selectTemplateData.name === '距离') {
-                    this.paintingShape = new AxArrowConnector(assetData2, this,true,true); 
+                    this.paintingShape = new AxArrowConnector(assetData2, this, true, true);
                   } else if (this.canvasData.selectTemplateData.name === '普通墙' || this.canvasData.selectTemplateData.name === '承重墙') {
-                    this.paintingShape = new AxArrowConnector(assetData2, this,false,false);  
+                    this.paintingShape = new AxArrowConnector(assetData2, this, false, false);
+                  } else if (this.canvasData.selectTemplateData.name === '水带' ) {
+                    this.paintingShape = new AxArrowConnector(assetData2, this, false, true);
                   }
                 } else {
                   this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints));
                   this.paintingShape.redraw();
                 }
-              }
+              // }
               // this.emit('backgroundScale', this.backgroundImage.scale.x);
-              break;
+                break;
           }
         } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) {
           this.rectToolGraphics.visible = true;
@@ -819,7 +852,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               const rect1 = this.rectToolGraphics.getBounds();
               const rect2 = item.getBounds();
               if (this.isOverlap(rect1, rect2)) {
-                this.selection.select(item);       
+                this.selection.select(item);
               }
             }
           });
@@ -869,25 +902,25 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.backgroundImage.addChild(this.paintingLine);
 
   }
-  public isOverlap(rect1, rect2):boolean {
+  public isOverlap(rect1, rect2): boolean {
-    const l1 = { x: rect1.x, y: rect1.y }
+    const l1 = { x: rect1.x, y: rect1.y };
-    const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height }
+    const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height };
-    const l2 = { x: rect2.x, y: rect2.y }
+    const l2 = { x: rect2.x, y: rect2.y };
-    const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height }
+    const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height };
     if (
       l1.x > r2.x ||
       l2.x > r1.x ||
       l1.y > r2.y ||
       l2.y > r1.y
-    ) return false
+    ) { return false; }
-    return true
+    return true;
   }
 
   /**
    * 刷新背景图
    */
-  public async refreshBackgroundImage(imageUrl:string = this.canvasData.selectStorey.imageUrl,imageAngle:number = this.canvasData.selectStorey.imageAngle): Promise<void> {
+  public async refreshBackgroundImage(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise<void> {
-    if (imageUrl === undefined || imageUrl === null || imageUrl === "") {
+    if (imageUrl === undefined || imageUrl === null || imageUrl === '') {
       this.backgroundImage.visible = false;
     } else {
       this.backgroundImage.visible = false;
@@ -898,13 +931,13 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl);
       this.backgroundImage.angle = imageAngle;
       // 等待图片加载完成
-      let imageWidth = this.backgroundImage.texture.width;
+      const imageWidth = this.backgroundImage.texture.width;
-      let imageHeight = this.backgroundImage.texture.height;
+      const imageHeight = this.backgroundImage.texture.height;
-      let appWidth = this.app.view.width - 470;
+      const appWidth = this.app.view.width - 470;
-      let appHeight = this.app.view.height;
+      const appHeight = this.app.view.height;
-      let wScale = appWidth / imageWidth;
+      const wScale = appWidth / imageWidth;
-      let hScale = appHeight / imageHeight;
+      const hScale = appHeight / imageHeight;
-      let scale = wScale < hScale ? wScale : hScale;
+      const scale = wScale < hScale ? wScale : hScale;
       // 设置图片缩放
       this.backgroundImage.scale.set(scale);
       this.backgroundImage.visible = true;
@@ -912,32 +945,32 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         if (item instanceof AxShape) {
           item.refresh();
         }
-      })
+      });
     }
   }
   /**
    * 刷新
-   * @param imageUrl 
+   * @param imageUrl
-   * @param imageAngle 
+   * @param imageAngle
    */
   public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise<void> {
     await this.refreshBackgroundImage();
 
     // 清空所有图形
     this.selection.deselectAll();
-    let itemList = [];
+    const itemList = [];
-    this.backgroundImage.children.forEach(item => { 
+    this.backgroundImage.children.forEach(item => {
-      if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) {
+      if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
-          itemList.push(item.name);    
+          itemList.push(item.name);
       }
     });
 
-    itemList.forEach(item => { 
+    itemList.forEach(item => {
       this.backgroundImage.getChildByName(item).destroy();
       // let child = this.backgroundImage.getChildByName(item);
       // this.backgroundImage.removeChild(child);
-    })
+    });
-    //加载当前数据
+    // 加载当前数据
     this.createFloorShape(this.canvasData.originaleveryStoreyData.data);
     // 创建处置预案图形
     this.createNodeShape(this.canvasData.selectPanelPoint.Data);
@@ -948,8 +981,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   public createAxLegend() {
     const tempAssetData = {
-      Id: "图例",//ObjectID.default.generate()
+      Id: '图例',
-      Color: "#066EED80",
+      Name: '图例',
+      Color: '#066EED80',
+      TemplateId: null,
+      FloorId: this.canvasData.selectStorey.id,
+      Angle: 0,
+      Enabled: null,
+      FillMode: null,
+      FireElementId: null,
+      FixedSize: null,
+      Height: 32,
+      Width: 32,
+      ImageUrl: null,
+      InteractiveMode: null,
+      MultiPoint: null,
+      Point: new PIXI.Point(0, 0),
+      Border: null,
+      DrawMode: null,
+      Thickness: null,
+      IsFromBuilding: null,
+      GameMode: this.canvasData.gameMode,
       PropertyInfos: [
         {
           Tag : '',
@@ -957,33 +1009,46 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
           Enabled : true,
           Visible : true,
           Required : false,
-          RuleName : "",
+          RuleName : '',
-          RuleValue : "",
+          RuleValue : '',
-          PhysicalUnit : "",
+          PhysicalUnit : '',
-          PropertyName : "列",
+          PropertyName : '列',
           PropertyType : 2,
           PropertyValue : 2,
         },
-      ]
+      ],
+      Scale: 1,
+      PivotX: 0,
+      PivotY: 0,
     };
-    let shapeMap: Map<string,Legend> = new Map<string,Legend>();
+    const shapeMap: Map<string, Legend> = new Map<string, Legend>();
-
+    let data = null;
-    for (let item in this.canvasData.originaleveryStoreyData.data) {
+    for (const item in this.canvasData.originaleveryStoreyData.data) {
       if (shapeMap.has(this.canvasData.originaleveryStoreyData.data[item].Name)) {
         shapeMap.get(this.canvasData.originaleveryStoreyData.data[item].Name).Count++;
       } else {
-        shapeMap.set(this.canvasData.originaleveryStoreyData.data[item].Name, new Legend(
+        if (item !== '图例') {
+          shapeMap.set(this.canvasData.originaleveryStoreyData.data[item].Name, new Legend(
           this.canvasData.originaleveryStoreyData.data[item].Name,
           this.canvasData.originaleveryStoreyData.data[item].ImageUrl,
           1
         ));
+        } else {
+          data = this.canvasData.originaleveryStoreyData.data[item];
+        }
       }
     }
-    var axLegend = new AxLegend(tempAssetData, this, shapeMap);
+    if (data === null) {
-    var rect = this.backgroundImage.getLocalBounds();
+      const axLegend = new AxLegend(tempAssetData, this, shapeMap);
-    var itemRect = axLegend.getLocalBounds();
+      const rect = this.backgroundImage.getLocalBounds();
-    axLegend.x = rect.right - itemRect.right;
+      const itemRect = axLegend.getLocalBounds();
-    axLegend.y = rect.bottom - itemRect.bottom;
+      axLegend.x = rect.right - itemRect.right;
+      axLegend.y = rect.bottom - itemRect.bottom;
+      axLegend.assetData.Point = new PIXI.Point(axLegend.x, axLegend.y);
+      this.emit('createIcon', axLegend);
+    } else {
+      const axLegend = new AxLegend(data, this, shapeMap);
+    }
   }
   // /**
   //  * 清空画布
@@ -1011,15 +1076,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 创建预览单点图标
    */
   private createPreviewImage(): void {
-    // if (this.previewSinglePointIcon === null) {
-    //   this.previewSinglePointIcon = PIXI.Sprite.from(this.canvasData.selectTemplateData.imageUrl);
-    //   this.previewSinglePointIcon.width = this.canvasData.selectTemplateData.width;
-    //   this.previewSinglePointIcon.height = this.canvasData.selectTemplateData.height;
-    //   this.previewSinglePointIcon.anchor.set(0.5);
-    //   this.previewSinglePointIcon.interactive = false;
-    //   this.backgroundImage.addChild(this.previewSinglePointIcon);
-    //   this.previewSinglePointIcon.scale.set(1 / this.backgroundImage.scale.x);
-    // }
     this.previewImage = new AxPreviewImageShape(this);
     this.previewImage.visible = false;
   }
@@ -1041,7 +1097,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) {
     this.previewLineSegment.clear();
-    this.previewLineSegment.lineStyle(1/this.backgroundImage.scale.x, 0x00ff00, 1);
+    this.previewLineSegment.lineStyle(1 / this.backgroundImage.scale.x, 0x00ff00, 1);
     this.previewLineSegment.moveTo(pointA.x, pointA.y);
     this.previewLineSegment.lineTo(pointB.x, pointB.y );
   }
@@ -1050,9 +1106,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * @param x 半径
    */
   private createCircleShadow(): void {
-    // this.circleShadow.beginFill(0xFFCC5A);
-    // this.circleShadow.drawCircle(0, 0, 10);
-    // this.circleShadow.endFill();
     this.circleShadow.visible = false;
     this.backgroundImage.addChild(this.circleShadow);
   }
@@ -1062,18 +1115,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   private refreshPreviewPoint() {
     this.circleShadow.clear();
     this.circleShadow.beginFill(0x00ff00);
-    this.circleShadow.drawCircle(0, 0, 5/this.backgroundImage.scale.x);
+    this.circleShadow.drawCircle(0, 0, 5 / this.backgroundImage.scale.x);
     this.circleShadow.endFill();
   }
-  showConnectionPoint(b: boolean) {
-    this.backgroundImage?.children.forEach(item => {
-        if (item instanceof AxImageShape) {
-          if (item.assetData.CanConnect) {
-            item.showConnectionPoint(b);
-         }
-      }
-    });
-  }
   /**
    * 开始绘制
    */
@@ -1126,14 +1170,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         this.circleShadow.visible = true;
         break;
       case PaintMode.Pipeline:
-        if (this.canvasData.selectTemplateData.name==='水带') {
+
-          this.showConnectionPoint(true);
-        } else {
-          
-        }
         break;
       case PaintMode.endPaint:
-        this.showConnectionPoint(false);
         if (this.previewImage !== null) {
           this.previewImage.visible = false;
         }
@@ -1142,11 +1181,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
           && this.paintingIcon !== null) {
           this.backgroundImage.removeChild(this.paintingIcon);
         }
-
-        // if (this.paintingShape !== undefined
-        //   && this.paintingShape !== null) {
-        //   this.backgroundImage.removeChild(this.paintingShape);
-        // }
         if (this.paintingShape !== null) {
           this.backgroundImage.removeChild(this.paintingShape);
           this.paintingShape = null;
@@ -1228,14 +1262,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         }
         break;
       case PaintMode.Pipeline:
-        if (this.canvasData.selectTemplateData.name !== '水带') {
           this.emit('createIcon', this.paintingShape);
           this.paintingShape = null;
-        }
+          break;
-        break;
     }
     this.paintPoints.splice(0, this.paintPoints.length);
-    // this.emit('backgroundScale', this.backgroundImage.scale.x);
   }
   /**
    * 复制
@@ -1259,34 +1290,33 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       newData.BuildingId = buildingId;
       newData.FloorId = floorId;
       newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5);
-      // if (newData.IsFromBuilding) {
-      //   this.canvasData.originalcompanyBuildingData.data[newData.Id] = newData;
-      // } else {
-      this.canvasData.originaleveryStoreyData.data[newData.Id] = newData;
-      // }
       switch (item.InteractiveMode) {
         case PaintMode.singlePointIcon:
           const singleIcon = new AxImageShape(newData, this);
+          this.emit('createIcon', singleIcon);
           break;
         case PaintMode.lineIcon:
           const lineIcon = new MultipointIcon(newData, this);
+          this.emit('createIcon', lineIcon);
           break;
         case PaintMode.polygonIcon:
           const polygonIcon = new PolygonIcon(newData, this);
+          this.emit('createIcon', polygonIcon);
           break;
         case PaintMode.Pipeline:
           if (item.Name === '距离') {
-            const wall = new AxArrowConnector(newData, this,true,true);
+            const wall = new AxArrowConnector(newData, this, true, true);
+            this.emit('createIcon', wall);
           } else if (item.Name === '普通墙' || item.Name === '承重墙') {
-            const wall = new AxArrowConnector(newData, this,false,false);
+            const wall = new AxArrowConnector(newData, this, false, false);
+            this.emit('createIcon', wall);
           }
           break;
       }
       this.selection.select(this.backgroundImage.getChildByName(newData.Id));
     });
-    // this.emit('backgroundScale', this.backgroundImage.scale.x);
   }
-  ////////////////////////////////////////////////////////////////////////通用/////////////////////////////////////////////////////////////////////////////
+  //////////////////////////////////////////////////////////////////////// 通用/////////////////////////////////////////////////////////////////////////////
   /**
    *
    * @param id 图标ID
@@ -1297,11 +1327,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       this.backgroundImage.getChildByName(item).visible = b;
     });
   }
-  ////////////////////////////////////////////////////////////////////////采集平台加载逻辑///////////////////////////////////////////////////////////////////////
+  //////////////////////////////////////////////////////////////////////// 采集平台加载逻辑///////////////////////////////////////////////////////////////////////
 
-  ////////////////////////////////////////////////////////////////////////编制平台加载逻辑///////////////////////////////////////////////////////////////////////
+  //////////////////////////////////////////////////////////////////////// 编制平台加载逻辑///////////////////////////////////////////////////////////////////////
 
-  ////////////////////////////////////////////////////////////////////////考试系统加载逻辑///////////////////////////////////////////////////////////////////////
+  //////////////////////////////////////////////////////////////////////// 考试系统加载逻辑///////////////////////////////////////////////////////////////////////
   /**
    * 考生点击楼层
    */
@@ -1330,7 +1360,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   }
 
   /**
-   * 考官点击楼层
+   * 考官点击楼层-阅卷
    */
   public async onExaminerClickFloor() {
     await this.refreshBackgroundImage();
@@ -1355,6 +1385,30 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     // 隐藏图标
     this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false);
   }
+  /**
+   * 考官点击楼层-创建试卷
+   */
+  public async onExaminerClickFloor_CreateTestpaper() {
+    await this.refreshBackgroundImage();
+    // 清空所有图形
+    this.selection.deselectAll();
+    let itemList = [];
+    this.backgroundImage.children.forEach(item => { 
+      if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) {
+          itemList.push(item.name);    
+      }
+    });
+
+    itemList.forEach(item => { 
+      this.backgroundImage.getChildByName(item).destroy();
+    })
+    // 创建楼层图形
+    this.createFloorShape(this.canvasData.originaleveryStoreyData.data);
+    // 创建处置预案图形
+    this.createNodeShape(this.canvasData.selectPanelPoint.Data);
+    // 隐藏图标
+    this.setNameVisible(false, 0);
+  }
 }
 
 /**