Как создать крутой «зеркальный» эффект для элементов, отображаемых в графическом графическом интерфейсе? - PullRequest
Новая
       9

Как создать крутой «зеркальный» эффект для элементов, отображаемых в графическом графическом интерфейсе?

2 голосов
/ 15 октября 2011

У меня есть QGraphicsScene, и я добавляю пару QGraphicsItem (s) на сцену.Все элементы, добавляемые на сцену, являются QGraphicsPixmapItem.

Я хочу, чтобы у отображаемой сцены была «зеркальная» визуальная визуализация для каждого элемента, добавляемого в сцену.Мне бы хотелось, чтобы визуальный эффект «зеркала» немного отличался от эффекта зеркала iTunes при отображении альбомов:

Пример эффекта «зеркала» из http://www.steelskies.com/site/images/iTunesBrowserThumb.jpg

(ПРИМЕЧАНИЕ. Изображение видновыше взято из " веб-сайта компании CoverFlow ". CoverFlow - это люди, которые, как мне кажется, реализовали визуальный эффект "зеркального" отображения альбома iTunes.)

Обратите внимание, что у каждого элемента в этой сцене есть зеркалопод ним.

Как создать этот «зеркальный» визуальный эффект (видно на скриншоте) для каждого элемента?

1 Ответ

6 голосов
/ 15 октября 2011

Полагаю, я так и сделал. Я думаю, что это хорошо для вас, согласно комментарию.

Я бы просто создал отраженное зеркальное изображение из оригинала, используя QPainter, и объединил их (снова используя QPainter). Это результирующее изображение показано с использованием QGraphicsPixmapItem. В приведенном ниже коде я создал отраженную зеркальную версию изображения. Все, что вам нужно сделать, это настроить параметры и объединить. 

#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();
}

Вы можете загрузить получившееся изображение (результат слияния двух) в QGraphicsPixmapItem, а затем продолжить применять все необходимые преобразования.

РЕДАКТИРОВАТЬ: я забыл, что вы также можете установить дополнительную непрозрачность, как показано на изображении. Я не пробовал, но можно было бы сделать то же самое с помощью QPixmaps. Это должно улучшить производительность или даже позволить, в зависимости от платформы и используемого движка рисования, ускорить рисование.

EDIT2: По запросу это вывод моего тестового кода: Output of the code reported (надеюсь, это изображение не защищено авторским правом или чем-то подобным, я пытался проверить, но ничего не было написано)

...