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

Question

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

Answer 1

Я не уверен, что таблица стилей может сделать все, что вы просите, если вы хотите полный эффект значков iphone приложения: закругленный прямоугольник, тонкий градиент, чтобы придать ему 3D-вид и блеск. Но, возможно, это могло бы, если бы вы могли наложить два изображения друг на друга. Одним из них может быть изображение округлой 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))); 
     } 
} 

Answer 2

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

стилевых т.е.

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

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

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