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

import { WorkingAreaComponent } from '../working-area.component';
import { GameMode } from './gameMode';
import * as PIXI from 'pixi.js';
import { PaintMode } from './paintModel';
import { AxShape } from './axShape';

/**
 * 多边形
 */
export class PolygonIcon extends AxShape {
    public pointsData: PIXI.Point[];
    public pointsGraphics: PIXI.Sprite[] = [];
    public polygonGraphics: PIXI.Graphics = new PIXI.Graphics();
    // public polygonLineGraphics: PIXI.Graphics = new PIXI.Graphics();
    style = new PIXI.TextStyle({
        fontFamily: 'Arial',
        fontSize: 18,
        fontStyle: 'normal',
        fontWeight: 'bold',
        fill: ['#000000'],
        stroke: '#ffffff',
        strokeThickness: 3,
        dropShadow: true,
        dropShadowColor: '#000000',
        dropShadowBlur: 3,
        dropShadowAngle: Math.PI / 6,
        dropShadowDistance: 1,
        wordWrap: false,
        wordWrapWidth: 100,
    });

    public text = new PIXI.Text(this.assetData.Name
        + '\r\n'
        + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
    /**
     *
     * @param points  点集合
     */
    constructor(assetData: any,workingArea: WorkingAreaComponent) {
        super(assetData,workingArea);
        this.name = this.assetData.Id;
        this.x = this.assetData.Point.x;
        this.y = this.assetData.Point.y;
        this.pointsData = this.assetData.MultiPoint;
        this.workingArea.backgroundImage.addChild(this);
        this.sortableChildren = true;
        // 画点
        this.pointsData.forEach((item, index, array) => {
            const iconPoint = PIXI.Sprite.from(this.pointTexture);
            // iconPoint.lineStyle(1, 0xFFBD01, 1);
            // iconPoint.beginFill(0xFFFFFF, 1);
            // iconPoint.drawCircle(0, 0, 15);
            iconPoint.anchor.set(0.5);
            iconPoint.x = item.x;
            iconPoint.y = item.y;
            // iconPoint.endFill();
            iconPoint.visible = false;
            this.pointsGraphics.push(iconPoint);
            this.addChild(iconPoint);
        });
        // 填充多边形

        const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x');
        const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255;
        this.polygonGraphics.beginFill(color, angle);
        this.polygonGraphics.drawPolygon(this.getPoints());
        this.polygonGraphics.endFill();
        this.addChild(this.polygonGraphics);
        // 画多边形
        // this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1);
        // this.polygonLineGraphics.drawPolygon(this.getPoints());
        // this.polygonLineGraphics.closePath();
        // this.addChild(this.polygonLineGraphics);

        this.text.anchor.set(0.5);
        this.text.position = this.calculatePolygonGravityCenter(this.pointsData);
        this.text.visible = this.showName;
                this.text.angle = -this.workingArea.backgroundImage.angle;
        // console.log(this.calculatePolygonGravityCenter(this.pointsData));
        this.polygonGraphics.addChild(this.text);
        // 添加圆点事件
        this.pointsGraphics.forEach((item, index, array) => {
            item.interactive = true;
            item.buttonMode = true;
            item.zIndex = 1;
            item.on('pointerdown', event => {
                event.stopPropagation();
                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;
                }
            })
                .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);
                        event.currentTarget.x = newPosition.x;
                        event.currentTarget.y = newPosition.y;

                        this.assetData.MultiPoint[index].x = newPosition.x;
                        this.assetData.MultiPoint[index].y = newPosition.y;
                        this.workingArea.canvasData.isChange = true;
                        // 填充多边形
                        this.polygonGraphics.clear();
                        this.polygonGraphics.beginFill(color, angle);
                        this.polygonGraphics.drawPolygon(this.getPoints());
                        this.polygonGraphics.endFill();
                        // // 画多边形
                        // this.polygonLineGraphics.clear();
                        // this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1);
                        // this.polygonLineGraphics.drawPolygon(this.getPoints());
                        // this.polygonLineGraphics.closePath();

                        this.text.position = this.calculatePolygonGravityCenter(this.pointsData);
                        this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
                    }
                })
                .on('rightclick', event => {
                })            .on('mouseover', event => {
                event.stopPropagation();
                if (this.workingArea.previewImage !== null
                    && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
                    this.workingArea.previewImage.visible = false;
                }
            })
            .on('pointerout', event => {
                event.stopPropagation();
                if (this.workingArea.previewImage !== null
                && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
                    this.workingArea.previewImage.visible = true;
                }
            });
        });
    }
    /**
     * 设置点显示状态
     * @param value 显示状态
     */
    public setPointVisiable(value: boolean) {
        this.pointsGraphics.forEach((item) => {
            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);
        this.pointsGraphics.forEach(point => {
            point.scale.set(scale);
        });
    }

    /**
     * 获取点集合
     */
    public getPoints(): PIXI.Point[] {
        const points: PIXI.Point[] = [];
        this.pointsGraphics.forEach(item => {
            points.push(item.position);
        });
        return points;
    }
    /**
     * 设置名称显示
     * @param value true/false 显示/隐藏
     * @param mode BasicInformation = 0 基本信息
     *             Assignment想定作业 = 1 想定作业
     */
    public setNameVisible(value: boolean, mode: GameMode) {
        if (this.assetData.GameMode === mode) {
            this.text.visible = value;
        }
    }
    public refresh() {
        this.text.text = this.assetData.Name
            + '\r\n'
            + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
        // 填充多边形
        const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x');
        const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255;
        this.polygonGraphics.clear();
        this.polygonGraphics.beginFill(color, angle);
        this.polygonGraphics.drawPolygon(this.getPoints());
        this.polygonGraphics.endFill();
        this.text.angle = -this.workingArea.backgroundImage.angle;
    }
}