Qt5绘制仪表盘dashboard

说明

• 本文演示Qt版本： Qt5.14.
• 本文将使用QPainter一步一步绘制仪表盘：刻度、指针、刻度值
• 注意： 绘制顺序，如果先绘制，则后来绘制的将会覆盖住先前绘制的。
• 如果需要绘制半透明， 请设置QColor的第四个参数 alpha ， 范围： 0~255， 0 - 全透明， 255-不透明

样式

• 比较粗糙， 后面在优化
• 这是工作上遇到的需要绘制的图形。
• 蓝色的是指针indicator

下面一步一步开始绘制

开始前之前

• 重写函数paintEvent( QPaintEvent *event )。QtGuiApplication1继承自QWidget.
• 设置反走样(抗锯齿)

QPainter painter( this );
	painter.setRenderHint( QPainter::Antialiasing, true);

绘制圆

代码

void QtGuiApplication1::draw_ellipse_( QPainter& painter )
{
	painter.save();
	/// -----------------------------------------------------------------

	/// 设置画笔颜色
	painter.setPen(QPen(QColor(100, 200, 100), 2));

	/// 直接绘制圆
	painter.drawEllipse( circle_config_.start_x_, circle_config_.start_y_,
						 circle_config_.radius_ * 2, circle_config_.radius_ * 2 );
	/// -----------------------------------------------------------------
	painter.restore();
}

效果

绘制刻度

每10度绘制一个刻度线，每30度绘制一个较长的刻度线

代码

void QtGuiApplication1::draw_dial_( QPainter& painter )
{
	painter.save();

	painter.setPen(QPen(QColor(200, 100, 200), 2));

	/// 旋转坐标
	/// 第一个参数： 坐标起点X
	/// 第二个参数： 坐标起点Y
	/// 第三个参数： 相对当前坐标系 向目标坐标系需要旋转多少度
	/// 第四个参数： 是否绘制较长的刻度
	auto draw_dial = [&]( const double& xxx, const double& yyy, const double& angle, const bool& is_longer )
	{
		int dial_len = 8;

		if (true == is_longer)
			dial_len = 30;

		/// 重置坐标系
		painter.resetTransform();
		/// 将其移动到目标点
		painter.translate(xxx, yyy );
		/// 再旋转指定角度
		painter.rotate( angle );
		/// 绘制刻度
		painter.drawLine( QLine(QPoint(0, 0), QPoint(-dial_len, 0)) );

	};

	
	/// 圆。