mpandroidchart 自定义渐变填充 渐变填充的样式

QSS 之图形渐变填充

在 Qt 中，目前支持三种渐变填充方式，这三种方式都是 QGradient 的子类，它可以与画刷 QBrush 组合使用，来指定特定对象图形的填充方式。这三种填充方式是：

• QLinearGradient：显示从起点到终点的直线渐变
• QRadialGradient：显示以圆心为中心的圆形渐变
• QConicalGradient：显示围绕一个中心点的锥形渐变

1. QLinearGradient

对于线性渐变 QLinearGradient::QLinearGradient (const QPointF & start, constQPointF & finalStop) 需要指定开始点 start 和结束点 finalStop，然后将开始点和结束点之间的区域进行等分，开始点的位置为 0.0，结束点的位置为 1.0，而它们之间的位置按照距离比例进行设定，然后使用 QGradient::setColorAt(qreal position, const QColor & color) 函数在指定的位置 position 插入指定的颜色 color，当然，这里的 position 的值要在 0 到 1 之间。

可以使用 setSpread() 函数来设置填充的扩散方式，即指明在指定区域以外的区域怎样进行填充。扩散方式由 QGradient::Spread 枚举类型定义，它一共有三个值，分别是 QGradient::PadSpread：使用最接近的颜色进行填充，这是默认值；QGradient::RepeatSpread：在渐变区域以外的区域重复渐变；QGradient::ReflectSpread：在渐变区域以外将反射渐变。

QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing, true);
// 设置画笔颜色、宽度
painter.setPen(QPen(QColor(0, 160, 230), 2));

// 线性渐变
QLinearGradient linear(QPointF(80, 80), QPointF(180, 180));
// 插入颜色
linear.setColorAt(0, Qt::red);
linear.setColorAt(1, Qt::white);
// 设置显示模式
linear.setSpread(QGradient::PadSpread);
// 设置画刷填充
painter.setBrush(linear);
// 绘制矩形
painter.drawRect(QRect(40, 40, 180, 180));

// 线性渐变
QLinearGradient linear2(QPointF(300, 80), QPointF(400, 180));
// 设置颜色
linear2.setColorAt(0, Qt::red);
linear2.setColorAt(1, Qt::white);
// 设置显示模式
linear2.setSpread(QGradient::ReflectSpread);
// 设置画刷填充
painter.setBrush(linear2);
// 绘制矩形
painter.drawRect(QRect(260, 40, 180, 180));

// 线性渐变
QLinearGradient linear3(QPointF(520, 80), QPointF(620, 180));
// 设置颜色
linear3.setColorAt(0, Qt::red);
linear3.setColorAt(1, Qt::white);
// 设置显示模式
linear3.setSpread(QGradient::RepeatSpread);
// 设置画刷填充
painter.setBrush(linear3);
// 绘制矩形
painter.drawRect(QRect(480, 40, 180, 180));

2. QRadialGradient

对于辐射渐变 QRadialGradient::QRadialGradient (const QPointF & center, qreal radius, const QPointF & focalPoint) 需要指定圆心 center 和半径 radius，这样就确定了一个圆，然后再指定一个焦点 focalPoint。焦点的位置为 0，圆环的位置为 1，然后在焦点和圆环间插入颜色。辐射渐变也可以使用 setSpread() 函数设置在渐变区域以外的区域的扩散方式。

QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing, true);
// 设置画笔颜色、宽度
painter.setPen(QPen(QColor(0, 160, 230), 2));

// 辐射渐变
QRadialGradient radialGradient(QPointF(130, 130), 70, QPointF(130, 80));
// 设置颜色
radialGradient.setColorAt(0, Qt::red);
radialGradient.setColorAt(1, Qt::white);
// 设置扩散样式
radialGradient.setSpread(QGradient::PadSpread);
// 设置画刷填充
painter.setBrush(radialGradient);
// 绘制矩形
painter.drawRect(QRect(40, 40, 180, 180));

// 辐射渐变
QRadialGradient radialGradient2(QPointF(350, 130), 70, QPointF(350, 80));
// 设置颜色
radialGradient2.setColorAt(0, Qt::red);
radialGradient2.setColorAt(1, Qt::white);
// 设置扩散样式
radialGradient2.setSpread(QGradient::ReflectSpread);
// 设置画刷填充
painter.setBrush(radialGradient2);
// 绘制矩形
painter.drawRect(QRect(260, 40, 180, 180));

// 辐射渐变
QRadialGradient radialGradient3(QPointF(570, 130), 70, QPointF(570, 80));
// 设置颜色
radialGradient3.setColorAt(0, Qt::red);
radialGradient3.setColorAt(1, Qt::white);
// 设置扩散样式
radialGradient3.setSpread(QGradient::RepeatSpread);
// 设置画刷填充
painter.setBrush(radialGradient3);
// 绘制矩形
painter.drawRect(QRect(480, 40, 180, 180));

3. QConicalGradient

对于锥形渐变 QConicalGradient::QConicalGradient (const QPointF & center, qreal angle) 需要指定中心点 center 和一个角度 angle（其值在 0 到 360 之间），然后沿逆时针从给定的角度开始环绕中心点插入颜色。这里给定的角度沿逆时针方向开始的位置为 0，旋转一圈后为 1。setSpread() 函数对于锥形渐变没有效果。

QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing, true);
// 设置画笔颜色、宽度
painter.setPen(QPen(QColor(0, 160, 230), 2));

// 锥形渐变
QConicalGradient conicalGradient(QPointF(130, 130), 60);
// 设置颜色
conicalGradient.setColorAt(0, Qt::red);
conicalGradient.setColorAt(1, Qt::white);
// 设置画刷填充
painter.setBrush(conicalGradient);
// 绘制矩形
painter.drawRect(QRect(40, 40, 180, 180));

// 锥形渐变
QConicalGradient conicalGradient2(QPointF(350, 130), 180);
// 设置颜色
conicalGradient2.setColorAt(0, Qt::red);
conicalGradient2.setColorAt(1, Qt::white);
// 设置画刷填充
painter.setBrush(conicalGradient2);
// 绘制矩形
painter.drawRect(QRect(260, 40, 180, 180));

// 锥形渐变
QConicalGradient conicalGradient3(QPointF(570, 130), 300);
// 设置颜色
conicalGradient3.setColorAt(0, Qt::red);
conicalGradient3.setColorAt(1, Qt::white);
// 设置画刷填充
painter.setBrush(conicalGradient3);
// 绘制矩形
painter.drawRect(QRect(480, 40, 180, 180));