图形绘制-仪表盘(2)

本章节我们介绍如何如何绘制刻度对应的数字及指针。效果如下:

图形绘制-仪表盘(2)_第1张图片

关于通过继承重写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();

你可能感兴趣的:(QT,C++,qt,开发语言)