本章节我们介绍如何如何绘制刻度对应的数字及指针。效果如下:
关于通过继承重写QWidget的绘制事件paintEvent(),来绘制仪表盘的基础操作,请看上一章节《图形绘制-仪表盘(1)-CSDN博客》介绍。
在paintEvent()中继续写以下代码:
//保存和还原QPainter对象的状态 恢复到之前保存的状态,确保不影响其他绘图操作
painter.restore();
painter.save();
/*绘制刻度*/
painter.rotate(m_startAngle);//将坐标系顺时针旋转150°,到达起始位置
QPen penScale(Qt::blue);
painter.setPen(penScale);
int step = (m_maxSpeed - m_minSpeed) / (5*m_nultiple);
double angleStep = (360.0 - (m_startAngle - m_endAngle)) / step;
for (int i = m_minSpeed; i
{
if (i >= (100*m_nultiple)){ //绘制红色
penScale.setColor(Qt::red);
painter.setPen(penScale);
}
if (i % (25*m_nultiple) == 0){//粗线
penScale.setWidth(2);
painter.setPen(penScale);
painter.drawLine(94,0,82,0);
}else if (i % (10*m_nultiple) == 0){//中等
penScale.setWidth(1);
painter.setPen(penScale);
painter.drawLine(94,0,84,0);
}else if (i % (5*m_nultiple) == 0){ //短线
penScale.setWidth(0);
painter.setPen(penScale);
painter.drawLine(90,0,86,0);
}
painter.rotate(angleStep); //将坐标系顺时针旋转12°
}
//保存和还原QPainter对象的状态 恢复到之前保存的状态,确保不影响其他绘图操作
painter.restore();
painter.save();
/*绘制数字刻度*/
//数字刻度颜色
painter.setPen(QColor(120, 185, 255));
//数字刻度字体大小粗细
QFont font;
font.setPointSize(12);
font.setBold(true);
painter.setFont(font);
//获取字体的度量信息 以便在绘制文本时进行准确的布局和位置计算
QFontMetricsF fm(font);
//绘制数字刻度
double x,y;
double angle, angleArc;
double w,h;
//25的倍数 显示数字刻度
for (int i = m_minSpeed; i
{
angle = 360 - (m_startAngle + (i - m_minSpeed) * m_anglePerVel); //角度
angleArc = angle * 3.14 / 180; //转换为弧度
x = 65 * cos(angleArc);
y = -65 * sin(angleArc);
if (i % (25*m_nultiple) == 0)
{
w = fm.width(QString::number(i));
h = fm.height();
painter.drawText(QPointF(x - w / 2,y + h/4),QString::number(i));
}
}
//保存和还原QPainter对象的状态 恢复到之前保存的状态,确保不影响其他绘图操作
painter.restore();
painter.save();
/*绘制指针*/
//指针对应的角度
double curAngle = m_startAngle + (m_curSpeed-m_minSpeed )* m_anglePerVel;
painter.rotate(m_startAngle); //旋转坐标系
painter.setPen(QColor(120, 185, 255)); //颜色
painter.setBrush(QColor(120, 185, 255));//指针形状填充后的颜色
static const QPointF points[3] = {
QPointF(0.0, 4),
QPointF(0.0, -4),
QPointF(80.0, 0),
};
painter.drawPolygon(points,3); //绘制指针形状
//保存和还原QPainter对象的状态 恢复到之前保存的状态,确保不影响其他绘图操作
painter.restore();
painter.save();
/*绘制指针根件的中心圆*/
QRadialGradient rg(0,0,10,0,0);
rg.setColorAt(0.4,Qt::darkGray);
rg.setColorAt(0.5,Qt::white);
rg.setColorAt(1.0,Qt::darkGray);
painter.setPen(Qt::NoPen);
painter.setBrush(rg);
painter.drawEllipse(QPoint(0,0),10,10);
//保存和还原QPainter对象的状态 恢复到之前保存的状态,确保不影响其他绘图操作
painter.restore();
painter.save();