c++ - 如何在 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);
    }
};

结果: