Qt官方自带的例子animatedtiles,该工程存放在Qt安装目录下的
Examples\Qt-XX.XX.XX\widgets\animation\animatedtiles 目录
其中XX.XX.XX为Qt的版本号,如:5.14.1。有如下代码:
class Button : public QGraphicsWidget
{
Q_OBJECT
public:
...... // 该部分代码略,请参见Qt官方自带的例子查看
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *) override
{
bool down = option->state & QStyle::State_Sunken;
QRectF r = boundingRect();
QLinearGradient grad(r.topLeft(), r.bottomRight());
grad.setColorAt(down ? 1 : 0, option->state & QStyle::State_MouseOver ? Qt::white : Qt::lightGray);
grad.setColorAt(down ? 0 : 1, Qt::darkGray);
painter->setPen(Qt::darkGray);
painter->setBrush(grad);
painter->drawEllipse(r);
QLinearGradient grad2(r.topLeft(), r.bottomRight());
grad.setColorAt(down ? 1 : 0, Qt::darkGray);
grad.setColorAt(down ? 0 : 1, Qt::lightGray);
painter->setPen(Qt::NoPen);
painter->setBrush(grad);
if (down)
painter->translate(2, 2);
painter->drawEllipse(r.adjusted(5, 5, -5, -5));
painter->drawPixmap(-_pix.width()/2, -_pix.height()/2, _pix);
}
...... // 该部分代码略,请参见Qt官方自带的例子查看
};
第9行代码:判断按钮是否被鼠标按下了,如果按钮被按下,则:
ption->state & QStyle::State_Sunken即down就为true,否则就会false。
第10-16行:创建一个渐变画刷和一个Qt::darkGray颜色的画笔。并利用该画刷、画笔在按钮所在最小外包围矩形中绘制了一个圆形。创建画刷的思路是:
- 从按钮最小外包围矩形左上角到右下角进行渐变。
- 如果鼠标将按钮按下 了,则设置渐变的起点颜色为Qt::darkGray、终点颜色为Qt::white。
此时第12、13行代码变为:
grad.setColorAt(1, Qt::white);
grad.setColorAt(0, Qt::darkGray);
此时绘制出的按钮如下(注意:17行后的代码都注释掉了,这里仅仅显示的是17行之前的代码效果):
可以看到从左上角的深灰渐变到右下角的白色。
- 如果鼠标没将按钮按下,仅仅是悬浮在按钮上面,则此时第12、13行代码变为:
grad.setColorAt(0, Qt::white);
grad.setColorAt(1, Qt::darkGray);
此时绘制出来的效果如下(注意:17行后的代码都注释掉了,这里仅仅显示的是17行之前的代码效果):
可以看到从左上角的白色渐变到右下角的深灰色。
- 如果鼠标既没按下按钮也没悬浮在按钮上面,则第12、13行代码如下:
grad.setColorAt(0, Qt::lightGray);
grad.setColorAt(1, Qt::darkGray);
效果如下(注意:17行后的代码都注释掉了,这里仅仅显示的是17行之前的代码效果):
可以看到从左上角的浅灰色渐变到右下角的深灰色。
第17-21行:如果鼠标被按下,则创建浅灰到深灰渐变画刷;如果鼠标没按下按钮,则创建深灰到浅灰渐变画刷。注:第20行画笔一定要是Qt::NoPen,否则第24行创建的圆形和第16行创建的圆形有画笔留下的痕迹,进而明显可以看出不是一个整体的圆形。
第24行:因为15行设置的渐变画刷和21行设置的渐变画刷不一样,再加上本行将按钮最小外包矩形宽高缩小10个单位,这样创建的两个圆形有显著的凸凹视觉效果,更逼真,如下(注释掉了第25行代码后的效果):
第22-23行:如果按钮被按下了,就将坐标系向右、向下平移2个单位,这样就会给人造成按下的逼真视觉效果。
至此,本函数分析完毕!