如何在Qt中创建自定义的3D外观按钮？

Question

我正在尝试创建以下自定义按钮：

​

为此，我创建了类并覆盖了paintEvent

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    QPen pen(Qt::darkGray, 7, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);
    painter.setPen(pen);
    painter.drawEllipse(QPointF(width()/2, height()/2), width()/2.1,height()/2.1);

    QPen pen2(Qt::lightGray, 3, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);
    painter.setPen(pen2);
    painter.drawEllipse(QPointF(width()/2, height()/2), width()/2.15, height()/2.15);

    QPen pen1(Qt::gray, 1, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);
    painter.setPen(pen1);
    painter.drawEllipse(QPointF(width()/2, height()/2), width()/3.5, height()/3.5);
}

但是，我不能像下面这样用适当的渐变和中间的图片来创建按钮。你能帮帮我吗？

Answer 1

这里的关键是做渐变。而且你不能在笔画上做渐变，只能在填充上。这意味着您必须将大纲作为填充来实现。

按钮的组件已被消化，并按绘制顺序列出：

​

​

请注意，只有第一个组件是纯色，其他一切都是渐变。正是这些梯度得到了效果。

为了得到内环的渐变，你必须使用QPainterPath，首先添加外圆，然后再添加一个稍微小一点的内圆，这将有效地在第一个圆圈上打一个洞，给你一个看起来像轮廓但实际上是填充的东西，一个填充，你可以使用梯度。

正如注释中提到的--这涉及到很多操作，而且并不理想。最好是像图像这样的按钮，而不是用QPainter来绘制它们。

更新:这里有一些更多的帮助，向您展示如何绘制渐变轮廓以实现一些3D错觉：

class Test : public QWidget {
    Q_OBJECT
  public:
    Test() { resize(200, 200); }
    void paintEvent(QPaintEvent *) {
        QPainter painter(this);
        painter.setRenderHint(QPainter::Antialiasing);
        painter.fillRect(rect(), Qt::gray);

        QPainterPath p;
        p.addEllipse(rect().center(), 50, 50);
        p.addEllipse(rect().center(), 45, 45);

        QLinearGradient g(QPointF(0, 50), QPointF(0, 150));
        g.setColorAt(0, Qt::white);
        g.setColorAt(1, Qt::black);

        QBrush b(g);
        painter.fillPath(p, b);

        QPainterPath p2;
        p2.addEllipse(rect().center(), 45, 45);
        p2.addEllipse(rect().center(), 40, 40);

        QLinearGradient g1(QPointF(0, 50), QPointF(0, 150));
        g1.setColorAt(0, Qt::black);
        g1.setColorAt(1, Qt::white);

        QBrush b1(g1);
        painter.fillPath(p2, b1);

        QPainterPath p3;
        p3.addEllipse(rect().center(), 40, 40);
        painter.fillPath(p3, b);
    }
};

其结果是：

​

​

Answer 2

考虑到将这一问题改写为：

如何使用QPainter 生成给定的图片？

使用QPainter

1. 获取按钮的矢量图像，最好是在SVG中。
2. 查看SVG代码以提取颜色、梯度、大小等。
3. 用QPainter复制它们，您将看到对于每个SVG命令，在QPainter. QPainterPath中有一个几乎相等的等价物。

使用QPixmap

1. 获取按钮的SVG图像
2. 使用QSvgRenderer生成给定大小的QImage，然后将其转换为QPixmap。
3. 必要时绘制QPixmap。

每个选项的好处：

• QPixmap更简单，并允许您轻松切换按钮美观。
• QSvgRenderer允许您轻松地管理悬停。
• QPainter允许您用操作系统的颜色覆盖颜色
• QPainter使您在效果、动画等方面具有更大的灵活性。