开发者

How do you create cool "mirror" effect for items displayed in a graphical GUI?

I have a QGraphicsScene and I add a couple of QGraphicsItem(s) to the scene. All the items being added to the scene are QGraphicsPixmapItem.

I want the output displayed scene to have a "mirror" visual effect for each item that is added to the scene. I would like the "mirror" visual effect to look a little something to the iTunes mirror affect when you display albums:

How do you create cool "mirror" effect for items displayed in a graphical GUI?

(NOTE: Image seen above is from "CoverFlow company website".开发者_JS百科 CoverFlow are the people that I think implemented the iTunes album display "mirror" visual effect.)

Notice how each item in this scene has a mirror below it.

How do you create this "mirror" visual effect (seen in the screenshot) for each item?


I suppose this is how I would do it. I guess this is good for you as well according to the comment.

I would simply create the reflected mirrored image from the original using the QPainter and merge the two (using the QPainter again). This resulting image is the one shown using the QGraphicsPixmapItem. In the code below I created the reflected mirrored version of the image. All you need to do then is to tune the parameters and merge.

#include <QApplication>
#include <QLabel>
#include <QPixmap>
#include <QPainter>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // Just to show the original image.
    QLabel label;
    QImage original(<place_an_image_path_here>);
    label.setPixmap(QPixmap::fromImage(original));
    label.show();

    // Create the gradient that will be placed over the image.
    QPoint start(0, 0);
    QPoint end(0, original.height());
    QLinearGradient gradient(start, end);
    gradient.setColorAt(0.0, Qt::white);
    gradient.setColorAt(0.5, Qt::black);

    // Create the mask to be used on the mirrored image.
    QImage mask(original.size(), original.format());
    QPainter painter(&mask);
    // You may want to add additional opacity according
    // to the sample image shown.
    painter.setOpacity(0.8);
    painter.fillRect(original.rect(), gradient);
    painter.end();

    // Create the mirrored reflection.
    QImage reflection = original.mirrored();
    reflection.setAlphaChannel(mask);

    // Just to show the result.
    QLabel labelReflection;
    labelReflection.setPixmap(QPixmap::fromImage(reflection));
    labelReflection.show();

    return a.exec();
}

You can load the resulting image (the result of the merge of the two) in a QGraphicsPixmapItem and then you can go on applying all the transformations you need.

EDIT: I forgot that you may also want to set an additional opacity, as the image provided seems to do. I didn't try, but it might be possible to do the same using QPixmaps. This should improve performance or even allow, depending on the platform and on the paint engine you're using, accelerated painting.

EDIT2: As requested this is the output of my test code:

How do you create cool "mirror" effect for items displayed in a graphical GUI?

(I hope this image is not under some copyright or similar, I tried to check but nothing was written)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜