说明
- 本文演示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)) );
};
/// 圆。