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

import { Constructor } from '@angular/material/core/common-behaviors/constructor';
import { Sprite, Texture,Text, Graphics, Point } from 'pixi.js';
import { WorkingAreaComponent } from '../working-area.component';
import { AxShape } from './axShape';

/**
 * 安信图例形状
 */
export class AxLegend extends AxShape {
    // 数据
    public shapeMap: Map<string,Legend> = new Map<string,Legend>();
    pen: Graphics = new Graphics();
    /**
     *
     */
    constructor(assetData: any, workingArea: WorkingAreaComponent,shapeMap:Map<string,Legend>) {
        super(assetData, workingArea);
        this.angle = -this.workingArea.backgroundImage.angle;
        this.name = this.assetData.Id;
        this.shapeMap = shapeMap;
        this.refresh();
    }
    // 添加数据
    public addItem(item:Legend) {
        if (this.shapeMap.has(item.Name)) {
            this.shapeMap.get(item.Name).Count++;
        } else {
            this.shapeMap.set(item.Name, item);
        }
        this.refresh();
    }
    // 删除数据
    public deleteItem(item: Legend) {
        if (this.shapeMap.has(item.Name)) {
            this.shapeMap.get(item.Name).Count--;
            if (this.shapeMap.get(item.Name).Count === 0) {
                this.shapeMap.delete(item.Name);
            }
        }
        this.refresh();
    }
    // 刷新
    refresh() {
        this.removeChildren();
        let index = 1;
        let offset = 25;
        let number = 2;
        let width = 300;
        let height = 50;
        for (let i = 0; i < number; i++){
            if (i >= this.shapeMap.size) break;
            let x = width * i;
            var textImage = new Text('图例',{
                fontSize: 20,
                fill: ['#0000ff'], 
            });
            textImage.anchor.set(0.5)
            textImage.x = x;
            textImage.y = 0;
            this.addChild(textImage);

            var textName = new Text("名称"+' 【数量】',{
                fontSize: 20,
                fill: ['#0000ff'], 
            });
            textName.anchor.set(0,0.5);
            textName.x = x + 32 + offset;
            textName.y = 0;
            this.addChild(textName);
        }
        for (let item of this.shapeMap.values()) {
            let x = index % number === 0 ? (number -1) * width : (index % number - 1) * width;
            let y = Math.ceil(index / number) * height;
            let image: Sprite = Sprite.from(item.ImageUrl);
            image.width = 32;
            image.height = 32;
            image.anchor.set(0.5);
            image.x = x;
            image.y = y;
            this.addChild(image);

            var textName = new Text(item.Name+' 【'+item.Count.toString()+'】',{
                fontSize: 20,
            });
            textName.anchor.set(0,0.5);
            textName.x = x + image.width/2 + offset;
            textName.y = y;
            this.addChild(textName);
            index++;
        }
        if (this.shapeMap.size > 0) {
            let rect = this.getLocalBounds();
            this.pen.clear();
            this.pen.beginFill(0xffffff,0.01);
            this.pen.lineStyle(3, 0x000000);
            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.bottom+offset);
            this.pen.lineTo(rect.left - offset, rect.bottom + offset);
            this.pen.closePath();
            this.pen.endFill();
        }                
        this.addChild(this.pen);
        this.angle = -this.workingArea.backgroundImage.angle;
    }
}

export class Legend{
    public Name: string;
    public ImageUrl: string;
    public Count: number;
    /**
     *
     */
    constructor(name:string,imageUrl:string,count:number) {
        this.Name = name;
        this.ImageUrl = imageUrl;
        this.Count = count;
    }
}