move photo from right to left on widget

camel.cn

I want to move a photo from right to left on Widget continually,but I find flicker appearance.

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    auto tm = new QTimer(this);
    connect(tm, &QTimer::timeout, [this]{ this->update();}):
    tm->start(100);
}

void Widget::paintEvent(QPaintEvent* event)
{
    QPainter pt(this);
    auto w = this->width();
    auto h = this->height();

    auto imgw = this->_img.width(); //_img is QImage
    auto imgh = this->_img.height();

    if(this->_pos >= imgw) this->_pos = 0;

    this->_pos += 10; // init 0

    if(this->_pos >= imgw) this->_pos = imgw;

    auto x = (w - this->_pos) / 2.0;
    auto y = (h - imgh) / 2.0;

    pt.drawImage(QPointF(x, y), _img, QRectF(0, 0, this->_pos, imgh));
}

How to avoid the flicker ? or is there other better way to achieve function?
Attention: The initial requirement was to merge the received image slices and move them continuously from right to left on widget

JoeCFD

@camel-cn Right. Slowing your timer down will help and it is unnecessary to update the image quickly. I simply showed how painter is used in my app.

JonB

@camel-cn
Although I have not used it, the usual way to do this in Qt is via The Animation Framework. If you try that does it improve?

camel.cn

@JonB sorry, I didn't make it clear; This is a simple demo; the initial requirement was to merge the received image slices and move them continuously from right to left on widget

JonB

@camel-cn
And so? Maybe I do not understand, but you have a QTimer moving something, which is what the animation framework does for you. Maybe it does not work for drawImage(), I'm not sure. Another possibility is to use a QGraphicsScene instead, I don't know if that would "flicker" less than drawing on a widget.

SGaist

Hi,

How do you merge them ?

JoeCFD

@camel-cn said in move photo from right to left on widget:

try the following:

void Widget::paintEvent(QPaintEvent* event)
{
    Q_UNUSED(event);
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.save();

    auto w = this->width();
    auto h = this->height();

    auto imgw = this->_img.width(); //_img is QImage
    auto imgh = this->_img.height();

    if(this->_pos >= imgw) this->_pos = 0;

    this->_pos += 10; // init 0

    if(this->_pos >= imgw) this->_pos = imgw;

    auto x = (w - this->_pos) / 2.0;
    auto y = (h - imgh) / 2.0;

    painter.drawImage(QPointF(x, y), _img, QRectF(0, 0, this->_pos, imgh));
   
    painter.restore();
}

camel.cn

@SGaist Mainly through the function drawImage of QPainter

camel.cn

@JoeCFD said in move photo from right to left on widget:

QPainter::Antialiasing

QPainter::Antialiasing at here does't work for improve phenomenon, but reducing the move step size can improve the "flicker"

SGaist

@camel-cn said in move photo from right to left on widget:

@SGaist Mainly through the function drawImage of QPainter

You move your image in that function, it does not look like you do any merging there.

JoeCFD

@camel-cn Right. Slowing your timer down will help and it is unnecessary to update the image quickly. I simply showed how painter is used in my app.

camel.cn

@SGaist The initial requirement was to merge the received image slices and move them continuously from right to left on widget，However, this code is a simple demo for moving image;

camel.cn

@JoeCFD Thank you for your help