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

import { Graphics, Sprite, Text } from "pixi.js";
import { WorkingAreaComponent } from "../working-area.component";
import { AxArrowConnector } from "./axArrowConnector";
import { AxImageShape } from "./axImageShape";
import { AxShape } from "./axShape";
import { MultipointIcon } from "./multipointIcon";
import { PolygonIcon } from "./polygonIcon";


export class Legend extends AxShape{
    background: Graphics = null;
    data:Map<string,string> = new Map<string,string>()
    /**
     *
     */
    constructor(workingArea: WorkingAreaComponent) {
        super(null, workingArea);
        this.draw();
    }

    getData() {
        this.workingArea.backgroundImage.children.forEach(item => {
            if (item instanceof AxImageShape|| item instanceof AxArrowConnector || item instanceof PolygonIcon || item instanceof MultipointIcon) {
                if (!this.data.has(item.assetData.Name)) {
                    this.data[item.assetData.Name] = item.assetData.ImageUrl;
                }
            }
        })
    }

    draw() {
        this.getData();
        this.background = new Graphics();
        this.background.lineStyle(1, 0xff0000);
        this.background.beginFill(0xffffff);
        this.background.drawRect(0, 0, 200, 300);
        this.background.endFill();
        this.background.x = -(this.parent.width/2/ this.parent.scale.x);
        this.background.y = -(this.parent.height/2/ this.parent.scale.x);
        this.addChild(this.background);
        var showName: Text = new Text('图例');
        showName.x = 0;
        showName.y = 0;
        this.background.addChild(showName);
        var showDescrption: Text = new Text('说明')
        showDescrption.x = 100;
        showDescrption.y = 0;
        this.background.addChild(showDescrption);
        let index = 1;
        this.data.forEach((value, key) => {
            var image: Sprite = Sprite.from(value);
            image.width = 32;
            image.height = 32;
            image.x = 0;
            image.y = index * 32;
            this.background.addChild(image);
            var description = new Text(key);
            description.x = 100;
            description.y = index * 32;
            this.background.addChild(description);
            index++;
        })
    }
    redraw() {
        this.background.destroy();
        this.draw();
    }
}