LTTB 降采样算法：让 1KHz 高频波形在 Qt QML 中丝滑显示

问题背景

在工业数据采集场景中，传感器以 1KHz 甚至更高的频率持续输出数据。一个通道每秒产生 1000 个数据点，当采集时长达到 60 秒时，单通道就积累了 60,000 个点；如果同时显示多个通道，数据量会成倍增长。

将这些数据直接丢给 QML 的 ChartView 或自定义 Canvas 进行绑定渲染，几乎必然导致界面卡顿——因为 GPU 和 UI 线程的渲染能力远远无法逐帧处理这个量级的顶点数据。

核心矛盾很清晰：屏幕像素是有限的，而原始数据点远超像素分辨率。一块 1920px 宽的屏幕，水平方向最多呈现约 1920 个有效数据点，多余的点只是在做无意义的重叠绘制。

因此我们需要一种\\降采样（Downsampling）\\策略——在不丢失波形视觉特征的前提下，将数据点数量压缩到屏幕可承受的范围。

为什么选择 LTTB

常见的降采样方法有很多，但效果差异显著：

LTTB（Largest Triangle Three Buckets）由 Sveinn Steinarsson 在 2013 年的论文中提出，核心思想是：将数据等分为若干桶（bucket），在每个桶中选择与相邻桶代表点构成面积最大三角形的点作为代表。这种选法天然倾向于保留波形的峰值、谷值和拐点，视觉上几乎与原始曲线一致。

LTTB 算法原理

三角形面积的计算使用叉积公式，无需开方，性能友好：

面积 = 0.5 * |x_a(y_b - y_c) + x_b(y_c - y_a) + x_c(y_a - y_b)|

其中 a 是前一桶已选定的点，b 是当前桶的候选点，c 是后一桶所有点的平均坐标。

C++ 实现

以下是适用于 Qt 项目的 LTTB 核心实现，使用 QPointF 作为数据结构：

#include <QVector>
#include <QPointF>
#include <cmath>

QVector<QPointF> lttbDownsample(const QVector<QPointF> &data, int threshold)
{
    const int dataSize = data.size();
    if (threshold >= dataSize || threshold < 3)
        return data; // 无需降采样

    QVector<QPointF> sampled;
    sampled.reserve(threshold);

    // 首点直接保留
    sampled.append(data.first());

    const double bucketSize = static_cast<double>(dataSize - 2) / (threshold - 2);

    int prevSelectedIndex = 0;

    for (int i = 0; i < threshold - 2; ++i) {
        // 当前桶的范围
        const int bucketStart = static_cast<int>((i + 1) * bucketSize) + 1;
        const int bucketEnd   = static_cast<int>((i + 2) * bucketSize) + 1;
        const int clampedEnd  = qMin(bucketEnd, dataSize - 1);

        // 计算下一个桶的平均点（用作三角形的第三个顶点）
        const int nextBucketStart = clampedEnd;
        const int nextBucketEnd   = qMin(static_cast<int>((i + 3) * bucketSize) + 1,
                                         dataSize - 1);
        double avgX = 0.0, avgY = 0.0;
        int nextBucketCount = nextBucketEnd - nextBucketStart;
        if (nextBucketCount <= 0) nextBucketCount = 1;

        for (int j = nextBucketStart; j < nextBucketEnd; ++j) {
            avgX += data[j].x();
            avgY += data[j].y();
        }
        avgX /= nextBucketCount;
        avgY /= nextBucketCount;

        // 在当前桶中选择使三角形面积最大的点
        double maxArea = -1.0;
        int maxAreaIndex = bucketStart;
        const QPointF &prevPoint = data[prevSelectedIndex];

        for (int j = bucketStart; j < clampedEnd; ++j) {
            double area = std::abs(
                (prevPoint.x() - avgX) * (data[j].y() - prevPoint.y()) -
                (prevPoint.x() - data[j].x()) * (avgY - prevPoint.y())
            );
            if (area > maxArea) {
                maxArea = area;
                maxAreaIndex = j;
            }
        }

        sampled.append(data[maxAreaIndex]);
        prevSelectedIndex = maxAreaIndex;
    }

    // 尾点直接保留
    sampled.append(data.last());

    return sampled;
}

整体架构设计

系统在数据链路上划分为三层：采集层、处理层和渲染层，通过线程隔离保障 UI 不被阻塞。

多级缓存策略

直接对全量数据反复执行 LTTB 并不高效。更好的做法是预先构建多级缓存，类似地图瓦片的 LOD（Level of Detail）机制：

struct WaveformCache {
    QVector<QPointF> raw;          // Level 0: 原始数据
    QVector<QPointF> downsampled1; // Level 1: 降至 ~5000 点
    QVector<QPointF> downsampled2; // Level 2: 降至 ~2000 点
    QVector<QPointF> downsampled3; // Level 3: 降至 ~500 点
};

当用户操作改变视口时，根据当前可见时间范围和屏幕宽度，选择最合适的缓存层级：

int selectCacheLevel(double visibleDuration, double totalDuration, int screenWidth)
{
    // 可见范围内的原始数据点数
    double visiblePoints = visibleDuration * sampleRate; // sampleRate = 1000

    if (visiblePoints <= screenWidth * 2)
        return 0; // 直接用原始数据
    else if (visiblePoints <= screenWidth * 10)
        return 1;
    else if (visiblePoints <= screenWidth * 50)
        return 2;
    else
        return 3;
}

选中缓存层级后，再对可见范围内的数据做一次精确的 LTTB，将点数压到与屏幕宽度匹配。由于每一级的候选数据量已经大幅减少，这次 LTTB 的耗时可以忽略不计。

QML 端集成：缩放、平移与交互

在 QML 中，我们通过一个自定义的 WaveformView 组件来承载波形显示和交互逻辑。

数据桥接

C++ 端暴露一个继承自 QAbstractSeries 或使用 Q_PROPERTY 的 Model 类：

class WaveformModel : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QVariantList displayPoints READ displayPoints NOTIFY displayPointsChanged)
    Q_PROPERTY(double viewStart READ viewStart WRITE setViewStart NOTIFY viewChanged)
    Q_PROPERTY(double viewEnd READ viewEnd WRITE setViewEnd NOTIFY viewChanged)

public:
    // 视口变更时触发重新降采样
    Q_INVOKABLE void updateViewport(double start, double end, int pixelWidth);

signals:
    void displayPointsChanged();
    void viewChanged();

private:
    void recalculateDisplay(); // 内部调用 LTTB
};

QML 交互组件

import QtQuick 2.15
import QtCharts 2.15

ChartView {
    id: waveformChart
    antialiasing: true
    theme: ChartView.ChartThemeDark
    backgroundColor: "#0f172a"
    legend.visible: false

    ValueAxis {
        id: axisX
        color: "#60a5fa"
        gridLineColor: "#1e293b"
        labelsColor: "#94a3b8"
    }

    ValueAxis {
        id: axisY
        color: "#60a5fa"
        gridLineColor: "#1e293b"
        labelsColor: "#94a3b8"
    }

    LineSeries {
        id: waveformSeries
        axisX: axisX
        axisY: axisY
        color: "#3b82f6"
        width: 1.5
        useOpenGL: true  // 关键：启用 OpenGL 加速渲染
    }

    // 鼠标滚轮缩放
    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton

        property real lastX: 0

        onWheel: function(event) {
            var zoomFactor = event.angleDelta.y > 0 ? 0.8 : 1.25;
            var mouseRatio = event.x / width;

            var range = axisX.max - axisX.min;
            var newRange = range * zoomFactor;
            var pivot = axisX.min + range * mouseRatio;

            axisX.min = pivot - newRange * mouseRatio;
            axisX.max = pivot + newRange * (1 - mouseRatio);

            // 通知 C++ 端重新降采样
            waveformModel.updateViewport(axisX.min, axisX.max, waveformChart.width);
        }

        onPressed: function(event) {
            lastX = event.x;
        }

        onPositionChanged: function(event) {
            if (pressed) {
                var dx = event.x - lastX;
                var range = axisX.max - axisX.min;
                var shift = -dx / width * range;

                axisX.min += shift;
                axisX.max += shift;
                lastX = event.x;

                waveformModel.updateViewport(axisX.min, axisX.max, waveformChart.width);
            }
        }
    }

    // 触控双指缩放（移动端适配）
    PinchArea {
        anchors.fill: parent
        onPinchUpdated: function(pinch) {
            var range = axisX.max - axisX.min;
            var newRange = range / pinch.scale;
            var center = axisX.min + range * 0.5;

            axisX.min = center - newRange * 0.5;
            axisX.max = center + newRange * 0.5;

            waveformModel.updateViewport(axisX.min, axisX.max, waveformChart.width);
        }
    }
}

交互响应的降采样流程

性能优化要点

1. 启用 OpenGL 渲染

在 LineSeries 中设置 useOpenGL: true，将绑定的数据点直接通过 GPU 渲染，绕过 Qt 的 QPainter 软渲染路径。在万级数据点场景下，帧率提升极为明显。

2. 节流视口更新

快速拖拽或滚轮连续滚动会触发大量 updateViewport 调用。使用定时器做节流处理：

void WaveformModel::updateViewport(double start, double end, int pixelWidth)
{
    m_pendingStart = start;
    m_pendingEnd = end;
    m_pendingWidth = pixelWidth;

    if (!m_throttleTimer->isActive()) {
        m_throttleTimer->start(16); // 约 60fps 的节流频率
    }
}

3. 增量更新替代全量替换

当实时数据持续流入时，避免每次都重建整个 Series。使用 QXYSeries::replace() 批量替换而非逐点 append()：

void WaveformModel::pushToSeries(QXYSeries *series,
                                  const QVector<QPointF> &points)
{
    series->replace(points); // 一次性替换，触发单次重绘
}

4. 异步降采样

对于大数据量场景，将 LTTB 计算放入工作线程，通过信号将结果传回 UI 线程：

QtConcurrent::run([=]() {
    auto result = lttbDownsample(cacheSlice, targetPoints);
    QMetaObject::invokeMethod(this, [=]() {
        m_displayPoints = result;
        emit displayPointsChanged();
    }, Qt::QueuedConnection);
});

实际效果对比

以单通道 1KHz 采集、60 秒数据（60,000 点）为例：

当通道数增加到 8 个时，直接渲染方案的帧率会跌至 2\~3 FPS，而 LTTB 方案依然保持在 45 FPS 以上。

适用场景

LTTB + Qt QML 的组合方案适用于以下典型场景：

工业设备监控：振动信号、温度曲线、压力波形的实时展示 医疗设备：心电图（ECG）、脑电图（EEG）等生理信号的波形回放 测试测量仪器：示波器界面、频谱分析仪的数据可视化 能源管理：电力系统中电压、电流波形的长时间监测与回溯

总结

高频数据的实时波形显示，本质是一个数据量与渲染能力之间的适配问题。LTTB 算法以线性时间复杂度和极高的视觉保真度，成为这一场景下的最优解之一。结合 Qt QML 的 OpenGL 渲染管线、多级缓存策略和异步处理机制，可以在保持 60 FPS 流畅体验的同时，支撑灵活的缩放、平移等交互操作。

关键实施原则可归纳为三点：只渲染眼睛需要的点，用空间换时间的多级缓存，让 UI 线程只做轻量工作。