function draw (g, state, drawInfo) {
    var x = drawInfo.texArea[0];
    var y = drawInfo.texArea[1];
    var w = drawInfo.texArea[2] - drawInfo.texArea[0];
    var h = drawInfo.texArea[3] - drawInfo.texArea[1];
    const headAlign = drawInfo.arrowDirection ? Number(drawInfo.arrowDirection) : 0;
    var routeInfo = drawInfo.routeInfo;
    g.setColor(Color.WHITE);
    g.fillRect(x, y, w, h);
    if (routeInfo != null && routeInfo != undefined) {
        const terminalStnDL = getNonExtraParts(routeInfo.drawStations[routeInfo.drawStations.length - 1].stationName);
        const terStaName = parseStr(terminalStnDL);
        const font = loadResource("font", "mtrsteamloco:fonts/simhei.otf");
        const fontEN = loadResource("font", "mtrsteamloco:fonts/arial.ttf");
        const terStnWidthCN = getDLStringWidth(g, font, font, terStaName[0], h * 0.24);
        const terStnWidthEN = getDLStringWidth(g, fontEN, fontEN, terStaName[1], h * 0.13);
        const width = terStnWidthCN > terStnWidthEN ? terStnWidthCN : terStnWidthEN;
        if (drawInfo.index == routeInfo.drawStations.length - 1) {
            g.setColor(routeInfo.routeColor);
            g.fillRect(widthPercent(0.1), heightPercent(0.5), widthPercent(0.8), h * 0.025);
            const terStrX = headAlign == 2 ? widthPercent(0.9) - h * 0.375 : widthPercent(0.1) + h * 0.375;
            const terStnX = headAlign == 2 ? widthPercent(0.1) + width / 2 + h * 0.1 : widthPercent(0.9) - width / 2 - h * 0.1;
            g.setColor(Color.BLACK);
            drawStrUnified(g, font, "终点站", terStrX, heightPercent(0.45), h * 0.24, 1);
            drawStrUnified(g, fontEN, "Terminus", terStrX, heightPercent(0.65), h * 0.13, 1);
            drawStrUnified(g, font, terStaName[0], terStnX, heightPercent(0.45), h * 0.24, 1);
            drawStrUnified(g, fontEN, terStaName[1], terStnX, heightPercent(0.65), h * 0.13, 1);
        } else {
            const terTextCN = "往" + terStaName[0] + "方向";
            const terTextEN = "To " + terStaName[1];
            const terTextWidthCN = getDLStringWidth(g, font, font, terTextCN, h * 0.24);
            const terTextWidthEN = getDLStringWidth(g, fontEN, fontEN, terTextEN, h * 0.13);
            const terTextWidth = terTextWidthCN > terTextWidthEN ? terTextWidthCN : terTextWidthEN;
            const nextStnDL = getNonExtraParts(routeInfo.drawStations[drawInfo.index + 1].stationName);
            const nextStn = parseStr(nextStnDL);
            const nextStnWidthCN = getDLStringWidth(g, font, font, nextStn[0], h * 0.24);
            const nextStnWidthEN = getDLStringWidth(g, fontEN, fontEN, nextStn[1], h * 0.13);
            const nextStnWidth = nextStnWidthCN > nextStnWidthEN ? nextStnWidthCN : nextStnWidthEN;
            switch (headAlign) {
                case 0:
                case 1:
                    g.setColor(routeInfo.routeColor);
                    g.fillRoundRect(widthPercent(0.05),heightPercent(0.23),h * 0.55,h * 0.55,h * 0.55,h * 0.55);
                    g.drawImage(loadResource("img", "fangsu:sign/diaobanjtl.png"), widthPercent(0.05), heightPercent(0.23), h * 0.55, h * 0.55, null);
                    g.fillRect(widthPercent(0.05) + h * 0.65, heightPercent(0.5), widthPercent(0.95) - (widthPercent(0.05) + h * 0.65), h * 0.025);
                    g.setColor(Color.BLACK);
                    drawStrUnified(g, font, terTextCN, widthPercent(0.05) + h * 0.75 + terTextWidth / 2, heightPercent(0.45), h * 0.24, 1);
                    drawStrUnified(g, fontEN, terTextEN, widthPercent(0.05) + h * 0.75 + terTextWidth / 2, heightPercent(0.65), h * 0.13, 1);
                    drawStrUnified(g, font, nextStn[0], widthPercent(0.95) - nextStnWidth / 2 - h * 0.1, heightPercent(0.45), h * 0.24, 1);
                    drawStrUnified(g, fontEN, nextStn[1], widthPercent(0.95) - nextStnWidth / 2 - h * 0.1, heightPercent(0.65), h * 0.13, 1);
                    const center = (widthPercent(0.05) + h * 0.85 + terTextWidth) + ((widthPercent(0.95) - nextStnWidth - h * 0.2) - (widthPercent(0.05) + h * 0.85 + terTextWidth)) / 2;
                    drawStrUnified(g, font, "下一站", center, heightPercent(0.45), h * 0.24, 1);
                    drawStrUnified(g, fontEN, "Next", center, heightPercent(0.65), h * 0.13, 1);
                    break;
                case 2:
                    g.setColor(routeInfo.routeColor);
                    g.fillRoundRect(widthPercent(0.86),heightPercent(0.23),h * 0.55,h * 0.55,h * 0.55,h * 0.55);
                    g.drawImage(loadResource("img", "fangsu:sign/diaobanjtr.png"), widthPercent(0.86), heightPercent(0.23), h * 0.55, h * 0.55, null);
                    g.fillRect(widthPercent(0.05), heightPercent(0.5), widthPercent(0.86) - h * 0.1 - widthPercent(0.05), h * 0.025);
                    g.setColor(Color.BLACK);
                    drawStrUnified(g, font, terTextCN, widthPercent(0.95) - h * 0.75 - terTextWidth / 2, heightPercent(0.45), h * 0.24, 1);
                    drawStrUnified(g, fontEN, terTextEN, widthPercent(0.95) - h * 0.75 - terTextWidth / 2, heightPercent(0.65), h * 0.13, 1);
                    drawStrUnified(g, font, "下一站", widthPercent(0.05) + h * 0.375, heightPercent(0.45), h * 0.24, 1);
                    drawStrUnified(g, fontEN, "Next", widthPercent(0.05) + h * 0.375, heightPercent(0.65), h * 0.13, 1);
                    const center2 = (widthPercent(0.05) + nextStnWidth + h * 0.2) + ((widthPercent(0.95) - h * 0.85 - terTextWidth) - (widthPercent(0.05) + nextStnWidth + h * 0.2)) / 2;
                    drawStrUnified(g, font, nextStn[0], center2, heightPercent(0.45), h * 0.24, 1);
                    drawStrUnified(g, fontEN, nextStn[1], center2, heightPercent(0.65), h * 0.13, 1);
                    break;
            }
        }
    }
    function widthPercent(p) {
        return x + w * p;
    }
    function heightPercent(p) {
        return y + h * p;
    }
    function parseStr(src) {
        return String(src).split('|');
    }
}