Qt地铁智慧换乘系统浅学（ 二 ）将存储的站点线路信息绘制到graphicsView（图形视图部件）

容器使用

Qt地铁智慧换乘系统浅学（ 1）

测试 画一个黑点到QGraphicsview中

准备工作

1 我们需要QGraphicsScene 来管理QGraphicsView
2 设置QGraphicsScene 坐标范围
3 确定黑点的坐标 和 大小

代码

void drawsys(QGraphicsView *graphicsView){

    QGraphicsScene *scene;   //绘图场景
    scene = new QGraphicsScene;
    scene->setBackgroundBrush(Qt::white);
    scene->setSceneRect(0,0,3080,2080);// f分辨率
    qDebug()<<"传参成功";
    graphicsView->setRenderHint(QPainter::Antialiasing);
    graphicsView->setScene(scene);
    graphicsView->setDragMode(QGraphicsView::ScrollHandDrag);

    scene->clear();
    //test
    QPen elli_pen;
    elli_pen.setColor(Qt::black);
    QGraphicsEllipseItem *elli = new QGraphicsEllipseItem();
    elli->setRect(QRect(0,0,100,100));
    elli->setPen(elli_pen);
    elli->setBrush(QBrush(Qt::black));
    /*

    在这段代码中，您设置了两个颜色：一个是 QPen 的颜色，另一个是 QBrush 的颜色
    QPen 用于绘制形状的边框，而 QBrush 用于绘制形状的填充颜色。
    */
    scene->addItem(elli);

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

测试结果如下

绘制所有站点信息

显示站点名称 以及椭圆标志

void drawsys(QGraphicsView *graphicsView){

    QGraphicsScene *scene;   //绘图场景
    scene = new QGraphicsScene;
    scene->setBackgroundBrush(Qt::white);
    scene->setSceneRect(0,0,3080,2080);// f分辨率
    qDebug()<<"传参成功";
    graphicsView->setRenderHint(QPainter::Antialiasing);
    graphicsView->setScene(scene);
    graphicsView->setDragMode(QGraphicsView::ScrollHandDrag);

    scene->clear();
    //test
    for(auto i:Station.keys()){

        QPen elli_pen;
        qDebug()<<"station linenum"<<Station_Line[i].size()<<"\n";
        if(Station_Line[i].size()!=1)
            elli_pen.setColor(Qt::black);
        else
            elli_pen.setColor(LineColor[*Station_Line[i].begin()]);
        QGraphicsEllipseItem *elli = new QGraphicsEllipseItem();
        elli->setRect(QRect(Station[i].coord.x(),Station[i].coord.y(),6,6));

        qDebug()<<Station[i].coord.x()<<" "<<Station[i].coord.y()<<"\n";
        qDebug()<<*Station_Line[i].begin()<<" "<<LineColor[*Station_Line[i].begin()]<<" \n";

        elli->setPen(elli_pen);

        elli->setBrush(Qt::white);
        /*
        在这段代码中，您设置了两个颜色：一个是 QPen 的颜色，另一个是 QBrush 的颜色
        QPen 用于绘制形状的边框，而 QBrush 用于绘制形状的填充颜色。
        */
        //Latitude and longitude）即经线和纬线
        QString info = "站点名称: "+i+"\n站点经纬度: "+
            QString::number(Station[i].e,'f',3)+
                       ","+QString::number(Station[i].n,'f',3)+
                       "\n站点所属线路: ";
        for(auto j:Station_Line[i].values()){
            info += j+' ';
        }
        info+="\n相邻站点";
        for(auto &j:edge[i]){
            info+="\n "+j;
            if(j.length()<=3) info+="    ";
            info+="\t相距"+QString::number(dp[i][j]/1000.0)+"km";
        }
        scene->addItem(elli);

        QGraphicsTextItem *text = new QGraphicsTextItem();
        text->setPlainText(i);
        text->setPos(Station[i].coord.x(),Station[i].coord.y()+1);
        text->setFont(QFont("consolas",4,1));
        text->setToolTip(info);
        scene->addItem(text);
    }
/*
在下面 写画边！！！！
*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

由此 可得状态如下

画线路信息

准备工作

1 每次画一条边，即两个相邻站点之间的边
2 我们需要两个边的坐标
3 我们需要知道这两个站点所属的线路信息，是否存在所属多个线路

知道这些之后就可以遍历画边了！

代码

这里定义了一个flag，用来判断两个站点之间是否已经画过了 另外段代码和上述的画站点所属一个函数

 QMap<QString,QMap<QString,int> >flag;
    flag.clear();
    for(auto i:Station.keys()){
        for(auto &j:edge[i]){
            QGraphicsLineItem *line = new QGraphicsLineItem();
            QPointF pos1,pos2;
            if(flag[i][j]) continue;
            flag[i][j]=flag[j][i]=1;
            pos1.setX(Station[i].coord.x()+3);
            pos1.setY(Station[i].coord.y()+3);
            pos2.setX(Station[j].coord.x()+3);
            pos2.setY(Station[j].coord.y()+3);
            line->setLine(QLineF(pos1,pos2));
            if(mp[i][j].size()==1){
                line->setPen(QPen(LineColor[*mp[i][j].begin()]));
            }else line->setPen(QPen(Qt::black));
            scene->addItem(line);
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

然后成了！！！！

实现放大缩小功能

放大缩小按键和建立与槽函数的连接

在GUI界面，添加工具栏

生成toolBar 之后可以将按键存储到toolBar 更加整洁

由此 我们在mainwindow cpp下用代码创建button

	QPushButton *zoom_in = new QPushButton(this);
    zoom_in->setIcon(QIcon(":/image/zoom_in.svg"));
    zoom_in->setToolTip("放大");
    ui->toolBar->addWidget(zoom_in);
    connect(zoom_in,&QPushButton::clicked,this,[=]{
        zoomIn(ui->graphicsView);
    });

    QPushButton *zoom_out = new QPushButton(this);
    zoom_out->setIcon(QIcon(":/image/zoom_out.svg"));
    zoom_out->setToolTip("缩小");
    ui->toolBar->addWidget(zoom_out);
    connect(zoom_out,&QPushButton::clicked,this,[=]{
        zoomOut(ui->graphicsView);
    });

    QPushButton *return_subway = new QPushButton(this);
    return_subway->setIcon(QIcon(":/image/subway.svg"));
    return_subway->setToolTip("返回地铁线路图 ");
    ui->toolBar->addWidget(return_subway);
    connect(return_subway,&QPushButton::clicked,this,[=]{
        drawsys(ui->graphicsView);
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

槽函数实现

放大缩小的公式我就当工具了，不去理解了

新建一个zoomIO h和cpp文件 用来存储放大缩小相关函数
好的 开始

#include"ZoomIO.h"

#include
#include
#include
#include
#include"qgraphicsview"
void zoomIn(QGraphicsView *graphicsview){
    zoom(graphicsview,1.2);
}
void zoomOut(QGraphicsView *graphicsview){
    zoom(graphicsview,0.833);
}
void zoom(QGraphicsView *graphicsview,double scaleFactor){
    //缩放函数

    qreal factor = graphicsview->transform().scale(scaleFactor,scaleFactor).mapRect(QRectF(0, 0, 1, 1)).width();
    if (factor < 0.1 || factor > 50)
        return;
    graphicsview->scale(scaleFactor, scaleFactor);
}
void refresh(QGraphicsView *graphicsview){
    graphicsview->viewport()->update();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

效果如下

放大

缩小

bug

我们再放大之后发现 我们画的线贯穿了站点圆，这是由于我们先画圆，然后再画线导致的，我们可以先画线 然后再画圆