使用 QPainter 在 QWidgets 之间画一条线

Question

I'm working on an application where I need to be able to draw a line between two QWidget objects. I have tried quite a few things, but my current attempt (which I think is in the right direction I just think I'm missing something) is to have the containing widget (which I called DrawWidget and which holds the QGridLayout that the QWidget objects are added to) override the paintEvent method and call the QPainter::drawLine() function.

The issues I'm having are that:

1. No matter how I try to get the position of the widgets, the endpoints of the line are always in the wrong place
2. Whenever I try to draw a second line, the first line that I drew gets erased.

Here is the paintEvent function of the containing widget:

void paintEvent(QPaintEvent *)
{
    if (!drewSinceUpdate){
        drewSinceUpdate = true;
        QPainter painter(this);
        painter.setPen(QPen(Qt::black));

        painter.drawLine(start->geometry().center(), end->geometry().center());
    }
}

I have tried many different ways to get the correct position of the widgets in the last line of paintEvent , which I will post some of the ways (I can't remember all of them):

painter.drawLine(start->pos(), end->pos());
painter.drawLine(start->mapToGlobal(start->geometry().center()), end->mapToGlobal(end->geometry().center()));
painter.drawLine(this->mapToGlobal(start->geometry().center()), this->mapToGlobal(end->geometry().center()));
painter.drawLine(start->mapTo(this, start->pos()), end->mapTo(this, end->pos()));
painter.drawLine(this->mapFrom(start, start->pos()), this->mapFrom(end, end->pos()));

And just to make my question clear, here is an example of what I am looking for, taken from QT Diagram Scene Example : But this is what I end up getting:

Thank you for any help you can provide.

NOTE:

- start and end are both QWidget objects which I passed in using another method

-The hierarchy relevant to DrawWidget is:

QMainWindow
->QScrollArea
  ->DrawWidget
    ->QGridLayout
      ->Items       <-- These are the things I want to connect

EDIT: To make a Complete and Verifiable example, here is the entirety of the relevant code.

MainWindow.cpp:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QTextEdit>
#include <QPushButton>
#include <QScrollBar>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    // Setting up the relevant hierarchy 
    ui->setupUi(this);
    scrollArea = new QScrollArea();
    setCentralWidget(scrollArea);

    drawWidget = new DrawWidget();
    gridLayout = new QGridLayout();
    gridLayout->setSpacing(300);
    drawWidget->setLayout(gridLayout);

    scrollArea->setWidget(drawWidget);
    scrollArea->setWidgetResizable(true);

    AddItemSlot();

    QApplication::connect(scrollArea->horizontalScrollBar(), SIGNAL(rangeChanged(int,int)), this, SLOT(scrollHorizontal()));
}

// This is just creating a single one of the example widgets which I want to connect
QWidget* MainWindow::CreateNewItem(){
    QWidget* itemWidget = new QWidget();
    itemWidget->setStyleSheet("background-color: lightgray");
    QHBoxLayout* singleItemLayout = new QHBoxLayout();
    itemWidget->setLayout(singleItemLayout);

    QTextEdit* textEdit = new QTextEdit(std::to_string(counter++).c_str());
    textEdit->setStyleSheet("background-color:white;");
    singleItemLayout->addWidget(textEdit);

    QVBoxLayout* rightSidePanel = new QVBoxLayout();
    rightSidePanel->setAlignment(Qt::AlignTop);

    QPushButton* button1 = new QPushButton("Top Button");

    QApplication::connect(button1, SIGNAL(clicked(bool)), this, SLOT(AddItemSlot()));

    rightSidePanel->addWidget(button1);

    QWidget* rightPanelWidget = new QWidget();
    rightSidePanel->setMargin(0);
    rightPanelWidget->setLayout(rightSidePanel);

    singleItemLayout->addWidget(rightPanelWidget);

    itemWidget->setLayout(singleItemLayout);
    itemWidget->setMinimumWidth(400);
    itemWidget->setFixedSize(400,200);

    return itemWidget;
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::scrollHorizontal()
{
    scrollArea->ensureWidgetVisible(noteItems.back());
}

void MainWindow::AddItemSlot()
{
    QWidget* w = CreateNewItem();
    gridLayout->addWidget(w,currRow, currCol++);
    if (!noteItems.empty()){
        drawWidget->updateEndpoints(noteItems.back(), w);
    }
    noteItems.push_back(w);
}

MainWindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QGridLayout>
#include <QWidget>
#include <QMainWindow>
#include <QScrollArea>
#include <drawwidget.h>
#include "drawscrollarea.h"
#include <vector>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

public slots:
    void scrollHorizontal();
    void AddItemSlot();

private:
    Ui::MainWindow *ui;
    QWidget* CreateNewItem();
    int counter = 0, currCol = 0, currRow = 0;
    std::vector<QWidget*> noteItems;

    QScrollArea* scrollArea;
    DrawWidget* drawWidget;
    QGridLayout* gridLayout;
};

#endif // MAINWINDOW_H

DrawWidget.cpp:

#include "drawwidget.h"
#include <QDebug>
#include <QRect>

DrawWidget::DrawWidget(QWidget *parent) : QWidget(parent)
{

}

void DrawWidget::paintEvent(QPaintEvent *)
{
    if (!drewSinceUpdate){
        drewSinceUpdate = true;
        QPainter painter(this);
        painter.setPen(QPen(Qt::black));

        for (ConnectedPair pair : items){
            const QWidget* from = pair.from;
            const QWidget* to =pair.to;

            QPoint start =  from->mapToGlobal(from->rect().topRight() +  QPoint(0, from->height()/2));
            QPoint end = to->mapToGlobal(to->rect().topLeft() +  QPoint(0, to->height()/2));

            painter.drawLine(mapFromGlobal(start), mapFromGlobal(end));
        }
    }
}

void DrawWidget::updateEndpoints(QWidget* startIn, QWidget* endIn){
    drewSinceUpdate = false;
    items.push_back(ConnectedPair{startIn, endIn});
}

DrawWidget.h

#ifndef DRAWWIDGET_H
#define DRAWWIDGET_H

#include <QWidget>
#include <QPainter>
#include <QtCore>
#include <vector>

class DrawWidget : public QWidget
{
    Q_OBJECT
public:
    explicit DrawWidget(QWidget *parent = nullptr);
    void updateEndpoints(QWidget* startIn, QWidget* endIn);
    virtual void paintEvent(QPaintEvent *);
signals:

private:
    struct ConnectedPair {
        const QWidget* from;
        const QWidget* to;
    };

    std::vector<ConnectedPair> items;
    bool drewSinceUpdate = true;
};

#endif // DRAWWIDGET_H

Answer 1

For this case we use the function mapToGlobal() and mapfromGlobal() , since pos() returns a position with respect to the parent and this can cause problems if the widget has different parents.

drawwidget.h

#ifndef DRAWWIDGET_H
#define DRAWWIDGET_H

#include <QWidget>

class DrawWidget : public QWidget
{
    Q_OBJECT
public:
    explicit DrawWidget(QWidget *parent = nullptr);

    void addWidgets(const QWidget *from, const QWidget *to);

protected:
    void paintEvent(QPaintEvent *);

private:
    struct WidgetsConnected {
        const QWidget* from;
        const QWidget* to;
    };

    QList<WidgetsConnected> list;

};

#endif // DRAWWIDGET_H

drawwidget.cpp

#include "drawwidget.h"

#include <QPainter>
DrawWidget::DrawWidget(QWidget *parent) : QWidget(parent)
{
}

void DrawWidget::addWidgets(const QWidget * from, const QWidget * to)
{
    list.append(WidgetsConnected{from , to});
    update();
}

void DrawWidget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    for(const WidgetsConnected el: list){
        const QWidget* from = el.from;
        const QWidget* to = el.to;

        QPoint start =  from->mapToGlobal(from->rect().topRight() +  QPoint(0, from->height()/2));
        QPoint end = to->mapToGlobal(to->rect().topLeft() +  QPoint(0, to->height()/2));

        painter.drawLine(mapFromGlobal(start), mapFromGlobal(end));
    }
}

_{The complete example can be found here .}