Question

在iPhone上，您可以为应用程序图标提供45x45 平面图像，然后SDK会自动为您进行圆形和高亮显示，从而为其提供新的3D效果。有没有人有关于如何使用Qt4 API模拟这个的示例代码或建议？谢谢，--DD

Answer 1

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

然而，另一种选择是使用QPainter。它绝对可以满足您的所有需求。基本上你想要做的是覆盖你的widget，QPushButton，QLabel等的paintEvent（）。并使用源图像自己绘制。这是一个wiki条目的链接，我在自定义绘制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。

请参阅助手，了解如何编写样式表......

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

2 个答案: