Loading 2 images in Same label ->

[2lights]

Qt Colleague's on a more senior level-(compared to me(beginning)

I want to load 2 Images in the same label
My Program entails:
(spot the difference Game)
Once a user clicks a point on 1 image & a corresponding point in the next image
a line must be drawn between them.
If I load the image in 2 separate labels, i'm not sure how I would draw a line between them accordingly, Though
If I do load the images in separate labels, it will be easier to get coordinates to test if points match!

pro's & cons...

Ideas on how to approach this problem?
link to an example, maybe
Help appreciated

[Santosh Reddy]

Loading two images on to QLable is not directly possible, you can use something like repeat pattern while loading the image, but as you already thought it is better to have two different QLabels.

Using the point position and and relative methods of QWidget you can find out the point on QLabel. Here is an non-trival exmplae


class Widget : public QWidget
{
public:
explicit Widget(QWidget * parent = 0)
: QWidget(parent)
, mLeftLabel(new QLabel)
, mRightLabel(new QLabel)
, mTopWidget(new QWidget)
, mBottomWidget(new QWidget)
, mLeft()
, mRight()
{
QGridLayout * gridLayout = new QGridLayout(mBottomWidget);

mLeftLabel->setPixmap(QPixmap("logo.png"));
mRightLabel->setPixmap(QPixmap("logo.png"));

gridLayout->addWidget(mLeftLabel, 0, 0, 1, 1);
gridLayout->addWidget(mRightLabel, 0, 1, 1, 1);

QStackedLayout * stackedLayout = new QStackedLayout(this);

stackedLayout->addWidget(mTopWidget);
stackedLayout->addWidget(mBottomWidget);
stackedLayout->setStackingMode(QStackedLayout::StackAll);

mTopWidget->installEventFilter(this);
}

protected:
void mousePressEvent(QMouseEvent * event)
{
QPoint w = event->pos();
QPoint l = mLeftLabel->mapFromParent(w);
QPoint r = mRightLabel->mapFromParent(w);

qDebug() << "Widget" << w;

if(mLeftLabel->rect().contains(l))
{
qDebug() << "Widget::mLeftLabel" << l;
mLeft = w;
update();
}

if(mRightLabel->rect().contains(r))
{
qDebug() << "Widget::mRightLabel" << r;
mRight = w;
update();
}
}

bool eventFilter(QObject * object, QEvent * event)
{
if(object != mTopWidget)
return false;

if(event->type() == QEvent::Paint)
{
QPainter painter(static_cast<QWidget*>(object));

QPen pen = painter.pen();
pen.setWidth(5);
pen.setColor(Qt::red);
pen.setCapStyle(Qt::RoundCap);
painter.setPen(pen);

painter.drawLine(mLeft, mRight);
}

return false;
}

private:
QLabel * mLeftLabel;
QLabel * mRightLabel;

QWidget * mTopWidget;
QWidget * mBottomWidget;

QPoint mLeft;
QPoint mRight;
};

[2lights]

Created the form in Qt Creator (Drag & Drop)
2 labels besides each other & 1 new label (the size of the other 2)in front of them.
Each Label is promoted to its own class(other calculations...)

Works if I dont change the window size.
But since I am changing window size! I have to set a layout on the form (so labels expands as window does)
But then the overlapping label moves beside the other labels.

How do I keep it above the other labels
or rather how do i set it to resize accordingly without affecting the layout

Or another way may
How would I call a Paint function within 1 label to drawImage on leftside of label
& draw the 2nd image on rightside

Thanks

[ChrisW67]

If you put them in a QStackedWidget the way Santosh suggests then the top widget will stay the correct size. You can do that with Designer if you wish.

If you actually want to paint two separate images into the one QLabel then you need to subclass and reimplement paintEvent() to call drawPixmap() twice with different offsets and images.