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

import { Constructor } from '@angular/material/core/common-behaviors/constructor';
import * as PIXI from 'pixi.js';
import { Point, Rectangle, Graphics, Container } from 'pixi.js';
import { WorkingAreaComponent } from '../working-area.component';

/**
 * 安信形状
 */
export class AxShape extends Container {
    assetData: any;
    workingArea: WorkingAreaComponent;
    // 可以被移动的
    moveable = true;
    // 可以被选中的
    selectable = true;
    // 允许编辑
    allowEdit = true;
    // 是否显示名称
    showName = true;
    // 边框
    border: PIXI.Graphics = new PIXI.Graphics();
    
    constructor(assetData: any, workingArea: WorkingAreaComponent) {
        super();
        this.border.visible = false;
        this.addChild(this.border);
        this.assetData = assetData;
        this.workingArea = workingArea;
        this.workingArea.backgroundImage.addChild(this);
        this.zIndex = 200;
        this.interactive = true;
        this.buttonMode = true;
        this
            .on('pointerdown', event => {
            console.log(this.assetData);
            event.stopPropagation();
            if (this.selectable) {
                this.workingArea.selection.selectOne(this);
            }
            if (this.moveable) {
                event.currentTarget.data = event.data;
                event.currentTarget.alpha = 0.5;
                event.currentTarget.dragging = true;

                event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
                event.currentTarget.dragPoint.x -= event.currentTarget.x;
                event.currentTarget.dragPoint.y -= event.currentTarget.y;
                console.log(event.currentTarget.dragPoint);
                console.log(this.position);
            }
            })
            .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 offsetX = newPosition.x - event.currentTarget.dragPoint.x;
                    // const offsetY = newPosition.y - event.currentTarget.dragPoint.y;
                    // const offset = this.workingArea.backgroundImage.toLocal(new Point(offsetX, offsetY));
                    // event.currentTarget.position += offset;
                    // // this.workingArea.selection.objects.forEach(shpae => {
                    // //     shpae.x = newPosition.x - event.currentTarget.dragPoint.x;
                    // //     shpae.y = newPosition.y - event.currentTarget.dragPoint.y;
                    // //     shpae.assetData.Point = new PIXI.Point(this.x, this.y);
                    // //     this.workingArea.canvasData.isChange = true;
                    // // })
                    event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x;
                    event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y;
                    this.assetData.Point = new PIXI.Point(this.x, this.y);
                    this.workingArea.canvasData.isChange = true;
                }
            })
            .on('rightclick', event => {
                this.border.visible = false;
            })
            .on('pointerover', event => {
                event.stopPropagation();
            })
            .on('pointerout', event => {
                event.stopPropagation();
            });
    }
    redraw(): void {
        
    }

    refresh(): void{
        
    }
    /**
     * 显示边框
     */
    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;
    }
        /**
     * 设置点显示状态
     * @param value 显示状态
     */
    public setPointVisiable(value: boolean) {
        
    }
    /**
   * 
   * @param rect 画边框
   */
    public drawBorder(scale: number) {
        if (this.visible === false) { return;}
        this.border.clear();
        const rect = this.getLocalBounds();
        const p1 = new PIXI.Point(rect.left, rect.top);
        const p2 = new PIXI.Point(rect.right, rect.top);
        const p3 = new PIXI.Point(rect.right, rect.bottom);
        const p4 = new PIXI.Point(rect.left, rect.bottom);

        this.border.lineStyle(scale * 1, 0x00a8ff);

        var spaceLength = scale * 1;
        var lineLenght = rect.width + 0.5 + 0.5;
        var dashLength = scale*( lineLenght +spaceLength - Math.floor((rect.width + rect.height)/2 / 4.1))/Math.floor((rect.width + rect.height)/2 / 4.1);
        this.drawDash(this.border, p1.x -0.5*scale, p1.y, p2.x + 0.5*scale, p2.y,dashLength,spaceLength);
        this.drawDash(this.border, p2.x, p2.y -0.5*scale, p3.x, p3.y + 0.5*scale, dashLength, spaceLength);
        this.drawDash(this.border, p3.x+0.5*scale, p3.y, p4.x - 0.5*scale, p4.y, dashLength, spaceLength);
        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.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();
  }
  // 画虚线
  drawDash(target, x1, y1, x2, y2,dashLength = 5, spaceLength = 1) {
    let x = x2 - x1;
    let y = y2 - y1;
    let hyp = Math.sqrt((x) * (x) + (y) * (y));
    let units = hyp / (dashLength + spaceLength);
    let dashSpaceRatio = dashLength / (dashLength + spaceLength);
    let dashX = (x / units) * dashSpaceRatio;
    let spaceX = (x / units) - dashX;
    let dashY = (y / units) * dashSpaceRatio;
    let spaceY = (y / units) - dashY;

    target.moveTo(x1, y1);
    
    while (hyp > 0) {
        x1 += dashX;
        y1 += dashY;
        hyp -= dashLength;
        if (hyp < 0) {
        x1 = x2;
        y1 = y2;
        }
        target.lineTo(x1, y1);
        x1 += spaceX;
        y1 += spaceY;
        target.moveTo(x1, y1);
        hyp -= spaceLength;
    }
    target.moveTo(x2, y2);
  }
}