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

import { WorkingAreaComponent } from '../working-area.component';
import * as PIXI from 'pixi.js';

/**
 * 箭头
 * 创建一个只有2个点组成的箭头
 */
export class Arrows extends PIXI.Container {
    public line: PIXI.Graphics = new PIXI.Graphics();
    public ready = false;
    constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
        super();
        this.workingArea.backgroundImage.addChild(this);
        this.name = this.assetData.Id;
        this.addChild(this.line);
        this.refresh();
        this.interactive = true;
        this.on('mousedown', event => {
            if (!this.ready) { return; }
            event.stopPropagation();
            this.workingArea.selection.selectOne(this);
        });
    }
    /**
     * 刷新
     */
    public refresh() {
        this.line.clear();
        this.line.lineStyle(5, 0xff0000, 1);
        this.line.moveTo(this.assetData.pointA.x, this.assetData.pointA.y);
        this.line.lineTo(this.assetData.pointB.x, this.assetData.pointB.y);

        const angle = Math.atan2((this.assetData.pointB.y - this.assetData.pointA.y), (this.assetData.pointB.x - this.assetData.pointA.x))
            * (180 / Math.PI) + 90;

        this.line.beginFill(0xff0000);
        console.log(Math.PI / 180 / 1.6);
        this.line.drawStar(this.assetData.pointB.x, this.assetData.pointB.y, 3, 10, 0, (Math.PI / 180 * angle));
        this.line.endFill();
    }
}