rt-sim-training-client/src/jmapNew/shape/graph/Station/EStationText.js

import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';

class EStationText extends Group {
    constructor(model) {
        super();
        this.model = model;
        this.style = model.style;
        this.create();
    }

    create() {
        const model = this.model.modelData;
        const style = this.model.style;
        //  车站名称
        this.stationName = new Text({
            zlevel: this.model.zlevel,
            z: this.model.z,
            silent: !model.visible || false,
            style: {
                x: model.position.x,
                y: model.position.y,
                fontWeight: style.Station.stationText.fontWeight,
                fontSize: isNaN(Number(model.nameFont)) ? 20 : Number(model.nameFont),
                fontFamily: style.fontFamily,
                text: model.number ? model.number + model.name : model.name,
                textAlign: 'middle',
                textFill: model.nameFontColor,
                textVerticalAlign: 'top',
                textPadding:style.Station.stationText.textPadding,
                textBorderColor:style.Station.stationText.borderColor || model.nameFontColor,
                textBorderWidth:style.Station.stationText.textBorderWidth
            }
        });
        this.add(this.stationName);
        if (!model.visible) {
            this.stationName.setStyle('fontSize', 0);
        }
        if (model.subheadDisplay) { // 副标题
            this.subheadText = new Text({
                zlevel: this.model.zlevel,
                z: this.model.z,
                silent: !model.visible || false,
                style: {
                    x: model.subheadPosition.x,
                    y: model.subheadPosition.y,
                    fontWeight: model.fontWeight,
                    fontSize: model.subheadFont || 18,
                    fontFamily: style.fontFamily,
                    text: model.subhead,
                    textAlign: 'middle',
                    textVerticalAlign: 'top',
                    textFill: model.subheadFontColor,
                    textPadding:style.Station.stationText.textPadding,
                    textBorderColor:style.Station.stationText.borderColor || model.nameFontColor,
                    textBorderWidth:style.Station.stationText.textBorderWidth
                }
            });
            this.add(this.subheadText);
        }
    }

    recover() {
    }

    setState() {
    }
    setAnimateStyle(noneBeforeMode) {
        this.stopAnimate();
        const color = noneBeforeMode === 'Center' ? this.style.Station.stationText.centerModeColor : this.style.Station.stationText.localModeColor;
        this.stationName.animateStyle(true).when(500, {textFill: '#000'}).when(1000, {textFill: color}).when(1500, {textFill: '#000'}).start();
    }
    stopAnimate() {
        this.stationName.stopAnimation(true);
    }
    setColor(color) {
        const style = this.model.style;
        if (style.Station.StationControl.disPlayNone) {
            this.stationName.setStyle('textFill', color);
            this.subheadText && this.subheadText.setStyle('textFill', color);
        }
    }
    setBackground(color) {
        const style = this.model.style;
        if (style.Station.StationControl.disPlayNone) {
            this.stationName.setStyle('textBackgroundColor', color);
            this.subheadText && this.subheadText.setStyle('textBackgroundColor', color);
        }
    }

    setFlash() {
        this.stopAnimate();
        this.stationName.animateStyle(true).when(500, {opacity: 1}).when(1000, {opacity: 0}).when(1500, {opacity: 1}).start();
    }

    getBoundingRect() {
        return this.stationName.getBoundingRect();
    }
}

export default EStationText;