rt-graphic-component/components/Transponder/Transponder.js

import { Container, Graphics } from 'pixi.js';
import { VectorText, JlGraphic } from 'jl-graphic';
import { getTransponderConsts, getTypePoints, TransponderTypeEnum } from './TransponderConfig.js';

class TransponderCode extends Container {
    codeText = new VectorText('');
    name = 'transponderCode';
    constructor() {
        super();
        this.addChild(this.codeText);
    }
    clear() {
        this.codeText.text = '';
    }
    paint(datas) {
        this.codeText.text = datas.code;
        this.codeText.anchor.set(0.5);
    }
}
class Transponder extends JlGraphic {
    static Type = 'Transponder';
    polygonGraphic = new Graphics();
    labelGraphic = new TransponderCode();
    constDatas;
    constructor(data) {
        super(Transponder.Type);
        this.addChild(this.polygonGraphic);
        this.addChild(this.labelGraphic);
        this.constDatas = getTransponderConsts();
        if (data) {
            Object.assign(this.constDatas, data);
        }
    }
    get datas() {
        return this.getDatas();
    }
    clear() {
        this.polygonGraphic.clear();
        this.labelGraphic.clear();
    }
    doRepaint() {
        this.clear();
        const polygonGraphic = this.polygonGraphic;
        const ps = getTypePoints(this.datas.type, this.constDatas);
        let lineColor = this.constDatas.lineColor;
        if (this.datas.type == TransponderTypeEnum.WB) {
            lineColor = this.constDatas.wblineColor;
        }
        else if (this.datas.type == TransponderTypeEnum.VB) {
            lineColor = this.constDatas.vblineColor;
        }
        else if (this.datas.type == TransponderTypeEnum.IB) {
            lineColor = this.constDatas.iblineColor;
        }
        polygonGraphic.lineStyle(this.constDatas.lineWidth, lineColor);
        polygonGraphic.beginFill(this.constDatas.lineColor, 0.00001); // 填充透明色（用于碰撞检测）
        const indexArr = [0, 5, 7];
        ps.forEach((item, index) => {
            if (indexArr.includes(index)) {
                polygonGraphic.moveTo(item[0], item[1]);
            }
            else {
                polygonGraphic.lineTo(item[0], item[1]);
            }
        });
        polygonGraphic.endFill;
        this.labelGraphic.paint(this.datas);
        const style = {
            fill: lineColor,
            fontSize: this.constDatas.textFontSize,
        };
        this.labelGraphic.codeText.style = style;
        const codeTransform = this.datas?.childTransforms?.find((item) => item.name === 'transponderCode');
        if (codeTransform) {
            const position = codeTransform?.transform.position;
            const rotation = codeTransform?.transform?.rotation;
            this.labelGraphic.position.set(position?.x, position?.y);
            this.labelGraphic.rotation = rotation || 0;
        }
        else {
            const { height: polygonHeight } = this.polygonGraphic.getLocalBounds();
            const { height: textHeight } = this.labelGraphic.getLocalBounds();
            this.labelGraphic.position.set(0, polygonHeight / 2 + textHeight / 2 + this.constDatas.textMarginY);
        }
    }
}

export { Transponder, TransponderCode };