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

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