rt-sim-training-client/src/jmapNew/shape/Section/EBackArrow.js

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

export default class EBackArrowGroup extends Group {
    constructor(model) {
        super();
        this.model = model;
        this.zlevel = model.zlevel;
        this.z = model.z;
        this.create();
    }
    create() {
        const model = this.model.modelData;
        const style = this.model.style;
        if (model.reentryTrack && style.Section.shuttleBack) {
            const radius = 3;
            model.drict = 1; // 箭头朝向 (是折返轨加一个方向选择) 目前在区段右边
            const width = style.Section.line.width * 2;
            const height = style.Section.line.width * 1;
            const turnBackDistance = style.Section.shuttleBack.distance + radius * 4;

            const points = model.points;
            let x = -model.drict * width * 1.2;
            let y = -turnBackDistance;

            if (model.drict < 0) {
                x += points[0].x;
                y += points[0].y;
            } else {
                x += points[points.length - 1].x;
                y += points[points.length - 1].y;
            }

            this.turnBack = new EBackArrow({
                zlevel: this.zlevel,
                z: this.z,
                shape: {
                    drict: model.drict,
                    width: width,
                    height: height,
                    points: {
                        x: x,
                        y: y
                    }
                },
                style: {
                    lineWidth: style.Section.shuttleBack.width,
                    stroke: style.Section.shuttleBack.color,
                    fill: 'rgba(0, 0, 0, 0)'
                }
            });
            this.turnBackriangle = new EBackArrowTriangle({
                zlevel: this.zlevel,
                z: this.z,
                shape: {
                    drict: model.drict,
                    width: width,
                    height: height,
                    points: {
                        x: x,
                        y: y
                    }
                },
                style: {
                    lineWidth: style.Section.shuttleBack.width,
                    stroke: style.Section.shuttleBack.color,
                    fill: style.Section.shuttleBack.color
                }
            });
            this.add(this.turnBack);
            this.add(this.turnBackriangle);
            this.turnBack.hide();
            this.turnBackriangle.hide();
        }
    }

    hide() {
        this.turnBack.hide();
        this.turnBackriangle.hide();
    }

    show() {
        this.turnBack.show();
        this.turnBackriangle.show();
    }
}
// 成都三号线 折返进路
const EBackArrow = Path.extend({
    type: 'EBackArrow',
    shape: {
        points: null
    },
    buildPath: function (ctx, shape) {
        const points = shape.points;
        var r = shape.height;
        var x = points.x + shape.drict * shape.width / 2;
        var y = points.y;
        ctx.moveTo(points.x - shape.drict * shape.width, points.y + shape.height);
        ctx.lineTo(points.x + shape.drict * shape.width / 2, points.y + shape.height);
        if (shape.drict) {
            ctx.arc(x, y, r, Math.PI / 2, Math.PI * 3 / 2, true);
        } else {
            ctx.arc(x, y, r, Math.PI / 2, Math.PI * 3 / 2, false);
        }
        ctx.moveTo(points.x + shape.drict * shape.width / 2, points.y - shape.height);
        ctx.lineTo(points.x - shape.drict * (shape.width - 5), points.y - shape.height);
    }
});

// 箭头
const EBackArrowTriangle = Path.extend({
    type: 'EBackArrowTriangle',
    shape: {
        points: null
    },
    buildPath: function (ctx, shape) {
        const points = shape.points;
        ctx.moveTo(points.x - shape.drict * (shape.width - 5), points.y - shape.height - 3);
        if (shape.drict) {
            ctx.lineTo(points.x - shape.drict * shape.width, points.y - shape.height);
        } else {
            ctx.lineTo(points.x - shape.drict * shape.width, points.y - shape.height);
        }
        ctx.lineTo(points.x - shape.drict * (shape.width - 5), points.y - shape.height + 3);
    }
});