Превратите плоское изображение в красивое округлое изображение с помощью 3D-подсветки, как iPhone, используя Qt - PullRequest
Новая
       12

Превратите плоское изображение в красивое округлое изображение с помощью 3D-подсветки, как iPhone, используя Qt

2 голосов
/ 24 августа 2009

На iPhone вы даете ему изображение 45x45 flat для значка приложения, а SDK автоматически округляет и выделяет его, придавая ему новый 3D-эффект. У кого-нибудь есть пример кода или рекомендации о том, как эмулировать это с помощью API Qt4? Спасибо, --DD

Ответы [ 2 ]

6 голосов
/ 02 сентября 2009

Я не уверен, что таблица стилей могла бы выполнить все, о чем вы просите, если вам нужен полный эффект значков приложений iphone: скругленный прямоугольник, тонкий градиент, чтобы придать ему трехмерный вид, и блеск. Но, возможно, это возможно, если бы вы могли наложить два изображения друг на друга. Одним из них может быть округленное 3D изображение маски с прозрачностью, тогда вы просто поместите свое изображение 45X45 позади него. Но тогда я не знаю, насколько расширяемы qstylesheets на данный момент.

Однако другой альтернативой является использование QPainter. Он определенно может сделать все, что вам нужно. По сути, вы хотели бы переопределить paintEvent () вашего виджета, QPushButton, QLabel ... и т. Д. и нарисовать его самостоятельно, используя исходное изображение. Вот ссылка на запись вики, которую я сделал при пользовательской раскраске QPushButton, чтобы придать ему вид Windows Aero, который не отличается от значка приложения iphone: http://wiki.qtcentre.org/index.php?title=AeroButton

А вот paintEvent () из класса, чтобы дать вам отправную точку. Как только вы попадаете в него, используя Ассистент, это довольно просто: 

 void AeroButton::paintEvent(QPaintEvent * pe)
 {
     Q_UNUSED(pe);

     QPainter painter(this);  
     painter.setRenderHint(QPainter::Antialiasing);

     //test for state changes
     QColor button_color;
     if(this->isEnabled())
     {
         m_hovered ? button_color = m_highlight : button_color = m_color;

         if(m_pressed)
         {
              button_color = m_highlight.darker(250);
         }
     }
     else
     {
         button_color = QColor(50, 50, 50);
     }

     QRect button_rect = this->geometry();

     //outline
     painter.setPen(QPen(QBrush(Qt::black), 2.0));
     QPainterPath outline;
     outline.addRoundedRect(0, 0, button_rect.width(), button_rect.height(), m_roundness, m_roundness);
     painter.setOpacity(m_opacity);
     painter.drawPath(outline);

     //gradient
     QLinearGradient gradient(0, 0, 0, button_rect.height());
     gradient.setSpread(QGradient::ReflectSpread);
     gradient.setColorAt(0.0, button_color);
     gradient.setColorAt(0.4, m_shadow);
     gradient.setColorAt(0.6, m_shadow);
     gradient.setColorAt(1.0, button_color);

     QBrush brush(gradient);
     painter.setBrush(brush); 
     painter.setPen(QPen(QBrush(button_color), 2.0));

     //main button
     QPainterPath painter_path;
     painter_path.addRoundedRect(1, 1, button_rect.width() - 2, button_rect.height() - 2, m_roundness, m_roundness);
     painter.setClipPath(painter_path);

     painter.setOpacity(m_opacity);
     painter.drawRoundedRect(1, 1, button_rect.width() - 2, button_rect.height() - 2, m_roundness, m_roundness);

     //glass highlight
     painter.setBrush(QBrush(Qt::white));
     painter.setPen(QPen(QBrush(Qt::white), 0.01));
     painter.setOpacity(0.30);
     painter.drawRect(1, 1, button_rect.width() - 2, (button_rect.height() / 2) - 2);

     //text
     QString text = this->text();
     if(!text.isNull())
     {
         QFont font = this->font();
         painter.setFont(font);
         painter.setPen(Qt::white);
         painter.setOpacity(1.0);
         painter.drawText(0, 0, button_rect.width(), button_rect.height(), Qt::AlignCenter, text);
     }

      //icon
      QIcon icon = this->icon();
      if(!icon.isNull())
      {
         QSize icon_size = this->iconSize();
         QRect icon_position = this->calculateIconPosition(button_rect, icon_size);
         painter.setOpacity(1.0);
         painter.drawPixmap(icon_position, QPixmap(icon.pixmap(icon_size)));
      }
 }
0 голосов
/ 25 августа 2009

(это предложение, потому что я на самом деле не пробовал)

Таблица стилей, т. Е. 

QPushButton {
    background: qlineargradient( /*specify pattern here, with colors with alpha channel (0, 0, 0, 150) for example */ ); 
    image: url(:/reference/to/img/in_q_resourceFile);
}

Я думаю, это было бы самое простое решение, так как оно дало бы вам нажимаемую кнопку qpush.

Обратитесь к помощнику о том, как писать таблицы стилей ...

...