QT從新手到入門系列2-曲線圖制作

本篇的目標是實現一個可以動態刷新的曲線圖，幾乎是過去一個多月的qt學習落地的集大成者，下面逐步講解一下

窗口選擇

選擇dialog，這樣點擊的時候可以直接在最上方，通過設置屬性隱藏標題欄

setWindowFlags(Qt::Window | Qt::FramelessWindowHint)

窗口彈出位置&&設置窗口可移動屬性

  trace_->setProperty("CanMove", true);
  QRect temp;
  // 使用mapToGlobal獲取當前窗口位置，傳給曲線圖，實現曲線圖可以跟隨父窗口位置彈出
  temp.setRect(this->mapToGlobal(QPoint(0, 0)).x(), this->mapToGlobal(QPoint(0, 0)).y(), size().height(), size().width());
  trace_->ShowAt(temp, type);

 

定義不同類型，父窗口判斷點擊不同的label，打開不同的曲線圖

bool MainWindow::eventFilter(QObject *target, QEvent *event) {
  switch (event->type()) {
  case QEvent::MouseButtonPress: {
    if (target == ui->t1) {
      ShowTrace(t1);
    }
    else if (target == ui->t2) {
      ShowTrace(t2);
    }
  }
  break;
  default:
    break;
  }

  return QWidget::eventFilter(target, event);
}

 

檢測鼠標事件實現窗口移動

bool Trace::eventFilter(QObject *target, QEvent *event) {
    if(target == this) {
    QMouseEvent *mouse_event = static_cast<QMouseEvent *>(event);
    if (mouse_event->type() == QEvent::MouseButtonPress) {
      if (mouse_event->button() == Qt::LeftButton) {
        mouse_pressed_ = true;
        mouse_point_ = mouse_event->globalPos() - pos();
        return true;
      }
    }
    else if (mouse_event->type() == QEvent::MouseButtonRelease) {
      mouse_pressed_ = false;
      return true;
    }
    else if (mouse_event->type() == QEvent::MouseMove) {
      if (mouse_pressed_ && (mouse_event->buttons() & Qt::LeftButton)) {
        move(mouse_event->globalPos() - mouse_point_);
        return true;
      }
    }
  }
  return QObject::eventFilter(target, event);
}

 

曲線各種設置

  chart_ = new QChart();
  x_axis_ = new QValueAxis();
  y_axis_ = new QValueAxis();
  series1_ = new QLineSeries();
  series2_ = new QLineSeries();
  chart_->addSeries(series1_);
  chart_->addSeries(series2_);
  chart_->legend()->hide();
  // 背景不可見
  chart_->setBackgroundVisible(false);
  x_axis_->setGridLineVisible(false);
  x_axis_->setLineVisible(false);
  x_axis_->setLabelsVisible(false);
  x_axis_->setLineVisible(false);
  // 指定顏色
  QColor color;
  color.setRgb(238, 242, 248);
  x_axis_->setLabelsColor(color);
  x_axis_->setGridLineColor(qRgba(238, 242, 248, 0.24));
  y_axis_->setLabelsColor(color);
  y_axis_->setGridLineColor("#5f6166");
  y_axis_->setLineVisible(false);
  series1_->setUseOpenGL(true);
  // 設置系列顏色
  series1_->setColor("#0089FF");
  series2_->setUseOpenGL(true);
  series2_->setColor("#FF9B00");
  // 共用坐標
  chart_->setAxisX(x_axis_, series1_);
  chart_->setAxisY(y_axis_, series1_);
  chart_->setAxisX(x_axis_, series2_);
  chart_->setAxisY(y_axis_, series2_);
  ui->graphicsView->setChart(chart_);
  ui->graphicsView->setRenderHint(QPainter::Antialiasing);
  // 設置整個窗口陰影
  QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect(this);
  shadow->setOffset(0, 12);
  QColor shadow_color;
  shadow_color.setRgbF(0, 0, 0, 0.24);
  shadow->setColor(shadow_color);
  shadow->setBlurRadius(32);
  ui->centerWidget->setGraphicsEffect(shadow);

 

demo效果

 源碼下載：https://files.cnblogs.com/files/qwj-sysu/Demo.zip

p