使用 Qt 将平面图像转换为带有 3D 高光的漂亮圆形图像，就像 iPhone 一样

Question

在 iPhone 上，您为应用程序图标提供 45x45 平面图像，SDK 会自动为您舍入并突出显示它，从而赋予其新的 3D 效果。有谁有关于如何使用 Qt4 API 进行模拟的示例代码或建议吗？谢谢，--DD

Answer 1

如果您想要 iPhone 应用程序图标的完整效果：圆角矩形、赋予其 3D 外观的微妙渐变和光泽，我不确定样式表是否可以满足您所要求的所有要求。但也许可以，如果你可以将两个图像叠加在一起。一种可能是具有透明度的圆形 3D 蒙版图像，然后您只需将 45X45 图像放在其后面即可。但是，我现在不知道 qstylesheets 的可扩展性如何。

然而，另一种选择是使用 QPainter。它绝对可以满足您的所有要求。基本上你想要做的是覆盖你的小部件、QPushButton、QLabel...等的paintEvent()。并使用源图像自己绘制。以下是我在自定义绘制 QPushButton 时所做的 wiki 条目的链接，以使其具有 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。

参考助手如何写样式表...