在这篇文章麦克风采集生成波形图描述了如何使用Qml中的Chart组件来绘制波形图，但是有时候我们需要绘制一些额外的信息，比如横轴和纵轴也要能够自定义，这个时候在qml-chart中就比较难定制了，我们可以通过继承Qt中的QQuickPaintedItem实现重绘事件，再将继承类注册到qml中，这样我们就能够在C++实现将录音的数据绘制出来
- 首先我们需要继承QQuickPaintedItem这个类，顾名思义，这个类是可以做绘制的。
实现绘制主要在重载函数 void paint(QPainter *painter) override;
#ifndef AUDIOWAVEITEM_H
#define AUDIOWAVEITEM_H
#include
#include
#include
#ifndef MINSHORT
#define MINSHORT 0x8000
#define MAXSHORT 0x7fff
#endif
typedef struct ScaleSamplePoint {
short pointV;
short maxV;
short miniV;
bool maxAtRight;
long long where;
} SCALE_SAMPLE_POINT;
class AudioDataSource : public QIODevice
{
Q_OBJECT
public:
explicit AudioDataSource(QObject *parent = nullptr);
protected:
qint64 readData(char * data, qint64 maxSize);
qint64 writeData(const char * data, qint64 maxSize);
signals:
void sigUpdateAudioData(QByteArray audioData);
};
class AudioWaveItem : public QQuickPaintedItem
{
Q_OBJECT
public:
AudioWaveItem(QQuickItem *parent = nullptr);
Q_INVOKABLE void startRecord();
Q_INVOKABLE void stopRecord();
/**
* 整个item的区域
* @brief rect
* @return
*/
QRectF rect() const;
/**
* 主绘图区域，不包括margin
* @brief mainRect
* @return
*/
QRectF mainRect() const;
protected:
void paint(QPainter *painter) override;
signals:
void sigStopRecordData();
public slots:
void updateAudioData(QByteArray audioData);
private:
std::shared_ptr m_audioInput;
std::shared_ptr m_audioDataSource;
QByteArray m_audioData;
bool m_recordMode;
std::shared_ptr m_shownPoints;
bool m_enableXAxis;
bool m_enableYAxis;
QMarginsF m_margins;
private:
void drawGrid(QPainter *painter, int maxV, int minV,
int sampleShown, bool isRecordMode/* = false*/);
};
#endif // AUDIOWAVEITEM_H
- 在这个类里，有m_margins是来定义一个偏移区域来绘制纵轴，绘制横轴和纵轴主要定义在void drawGrid()函数里
- MAXSHORT和MINSHORT定义short的最大数，这个主要是采集音频的时候采集精度设置16bit位宽，取数据的时候需要映射到这个范围里，具体可以看void paint()
- AudioDataSource 继承QIODevice，主要是接收QAudioInput的数据，也即录音数据
- m_shownPoints 是需要绘制的控制点，对应绘制区域的每个像素
#include "AudioWaveItem.h"
#include
#include
#include
#include
#include
qreal calcRatioFromValue3(qreal zeroPoint, short v, int maxV = MAXSHORT, int minV = short(MINSHORT)) {
qreal n = 0.0;
//maxV和minV不做0判断，浪费计算
if (v >= 0) {
n = zeroPoint - zeroPoint * (qreal(v) / qreal(maxV));
} else {
n = zeroPoint + zeroPoint * (qreal(v) / qreal(minV));
}
return n;
}
AudioDataSource::AudioDataSource( QObject *parent) :
QIODevice(parent)
{
}
qint64 AudioDataSource::readData(char * data, qint64 maxSize)
{
Q_UNUSED(data)
Q_UNUSED(maxSize)
return -1;
}
qint64 AudioDataSource::writeData(const char * data, qint64 maxSize)
{
QByteArray audioData(data, maxSize);
emit sigUpdateAudioData(audioData);
return maxSize;
}
AudioWaveItem::AudioWaveItem(QQuickItem *parent)
: QQuickPaintedItem(parent)
{
setFlag(ItemAcceptsInputMethod, true);
setAcceptedMouseButtons(Qt::AllButtons);
setAcceptHoverEvents(true);
m_margins = QMarginsF(50, 0, 5, 0);
m_enableXAxis = true;
m_enableYAxis = true;
m_recordMode = true;
m_audioDataSource.reset(new AudioDataSource());
m_audioDataSource->open(QIODevice::WriteOnly);
connect(m_audioDataSource.get(), &AudioDataSource::sigUpdateAudioData,
this, &AudioWaveItem::updateAudioData);
m_shownPoints.reset(new SCALE_SAMPLE_POINT[10000]);
memset(m_shownPoints.get(), 0, 10000);
}
void AudioWaveItem::paint(QPainter *painter)
{
int maxV = short(MAXSHORT);
int minV = short(MINSHORT);
drawGrid(painter, maxV, minV, abs(this->width()), true);
if(m_audioData.size() == 0)
{
return;
}
QPen pen = painter->pen();
auto midHeight = this->mainRect().height() / 2;
pen.setColor(QColor(0, 255, 0));
pen.setWidth(1.0);
painter->setPen(pen);
int x = 0;
QPointF lastP;
for(int i = 0; i < this->mainRect().width() - 1; i++)
{
short _maxV = this->m_shownPoints.get()[i].maxV;
short _miniV = this->m_shownPoints.get()[i].miniV;
qreal _maxH = 0.0;
qreal _miniH = 0.0;
{
_maxH = calcRatioFromValue3(midHeight, _maxV);
}
{
_miniH = calcRatioFromValue3(midHeight, _miniV);
}
x = m_margins.left() + (qreal)(i);
QPointF p0(x, floor(_maxH));
QPointF p1(x, floor(_miniH));
if (i > 0) {
QPointF p;
if (this->m_shownPoints.get()[i].maxAtRight) {
p = p1;
} else {
p = p0;
}
if (p.y() != midHeight || lastP.y() != midHeight)
painter->drawLine(lastP, p);
}
if (this->m_shownPoints.get()[i].maxAtRight) {
lastP = p0;
} else {
lastP = p1;
}
painter->drawLine(p0, p1);
}
}
void AudioWaveItem::startRecord()
{
QAudioFormat formatAudio;
formatAudio.setSampleRate(441000);
formatAudio.setChannelCount(2);
formatAudio.setSampleSize(16);
formatAudio.setCodec("audio/pcm");
formatAudio.setByteOrder(QAudioFormat::LittleEndian);
formatAudio.setSampleType(QAudioFormat::UnSignedInt);
QAudioDeviceInfo inputDevices = QAudioDeviceInfo::defaultInputDevice();
m_audioInput.reset(new QAudioInput(inputDevices, formatAudio));
m_audioInput->start(m_audioDataSource.get());
m_recordMode = true;
}
void AudioWaveItem::updateAudioData(QByteArray audioData)
{
m_audioData.append(audioData);
if(m_audioData.size() / 2 < this->mainRect().width())
{
return;
}
int dx = 0;
int maxSize = 180000;
short _maxV = -32768;
short _miniV = 32767;
bool _maxAtRight = false;
short* sampleData = (short*)m_audioData.data();
if(m_audioData.size() / 2 < maxSize)
{
dx = m_audioData.size() / 2 / mainRect().width();
int idx = 0;
for(int i = 0; i < this->mainRect().width() - 1; i++)
{
for (int n = i * dx; n < (i + 1) * dx; n++) {
short value = sampleData[n];
if (value >= _maxV) {
_maxAtRight = true;
_maxV = value;
}
if (value <= _miniV) {
_maxAtRight = false;
_miniV = value;
}
}
m_shownPoints.get()[idx].maxAtRight = _maxAtRight;
m_shownPoints.get()[idx].maxV = _maxV;
m_shownPoints.get()[idx].miniV = _miniV;
m_shownPoints.get()[idx].pointV = sampleData[i * dx];
idx++;
_maxAtRight = false;
_maxV = -32768;
_miniV = 32767;
//qDebug() << "updatedata" << "0";
}
}else{
dx = maxSize / mainRect().width();
int idx = 0;
int start = m_audioData.size() / 2 - maxSize;
for(int i = 0; i < this->mainRect().width() - 1; i++)
{
for (int n = start + i * dx; n < start + (i + 1) * dx; n++) {
short value = sampleData[n];
if (value >= _maxV) {
_maxAtRight = true;
_maxV = value;
}
if (value <= _miniV) {
_maxAtRight = false;
_miniV = value;
}
}
m_shownPoints.get()[idx].maxAtRight = _maxAtRight;
m_shownPoints.get()[idx].maxV = _maxV;
m_shownPoints.get()[idx].miniV = _miniV;
//m_shownPoints.get()[idx].pointV = sampleData[i * dx];
idx++;
_maxAtRight = false;
_maxV = -32768;
_miniV = 32767;
//qDebug() << "updatedata" << "0";
}
}
update();
}
void AudioWaveItem::stopRecord()
{
m_audioInput->stop();
this->update();
emit sigStopRecordData();
}
void AudioWaveItem::drawGrid(QPainter *painter, int maxV, int minV,
int sampleShown, bool isRecordMode/* = false*/)
{
auto pen = painter->pen();
painter->save();
painter->setPen(Qt::NoPen);
painter->setBrush(QColor(34, 34, 34));
painter->drawRect(this->rect());
painter->restore();
painter->save();
painter->setPen(Qt::NoPen);
painter->setBrush(QColor(0, 0, 0));
painter->drawRect(this->mainRect());
painter->restore();
qreal realWidth = this->mainRect().width();
qreal height = this->height();
qreal y0 = height / 2;
pen.setWidth(1);
qreal dx = realWidth / (qreal)sampleShown;
qreal x = 0.0;
QPointF lastP;
if (m_enableYAxis) {
//绘制纵坐标
pen.setColor(QColor(200, 200, 200));
pen.setWidth(1.0);
painter->setPen(pen);
qreal fdy = (float)y0 / abs(minV);
static std::function _drawTextFunc =
[&](QPainter *painter, int value, qreal _x, qreal _y, qreal top, qreal bottom) {
QString text = QString::number(value);
auto m_yParmas = 0;
if(m_yParmas == 0)//采样值
{
if (text.size() > 3) {
text = text.mid(0, text.size() - 3) + "k";
}
}else if(m_yParmas == 1){//标准值
if (text.size() > 3) {
text = text.mid(0, text.size() - 3);
text = QString::number(text.toFloat() / 5.0f * 0.166f, 'f', 2);
}
}else if(m_yParmas == 2){//百分比
if (text.size() > 3) {
text = text.mid(0, text.size() - 3);
text = QString::number(text.toFloat() / 5.0f * 16.6f, 'f', 0) + "%";
}
}
qreal _w = painter->fontMetrics().horizontalAdvance(text);
qreal _h = painter->fontMetrics().height();
QRectF textRect(0, 0, _w, _h);
textRect.moveCenter(QPointF(_x - _w / 2 - 3, _y));
if (textRect.top() < top) {
return;
} else if (textRect.bottom() > bottom) {
return;
}
QTextOption to;
to.setAlignment(Qt::AlignHCenter | Qt::AlignRight);
painter->drawText(textRect, text, to);
};
QString digitalStr = QString::number(int(abs(minV) / 6));
int yAxisSkip = digitalStr.mid(0, 1).toUInt() * pow(10, digitalStr.size() - 1);
if (yAxisSkip == 0) {
yAxisSkip = 1;
}
int count = abs(minV) / yAxisSkip + 1;
for (int i = 0; i < count; i++) {
int value = yAxisSkip * i;
qreal _y = y0 - yAxisSkip * fdy * i;
qreal _x0 = this->mainRect().x() - 6;
qreal _x1 = this->mainRect().x() - 1;
painter->drawLine(QPointF(_x0, _y), QPointF(_x1, _y));
_drawTextFunc(painter, value, _x0, _y, this->mainRect().top(), this->mainRect().bottom());
if (i == 0)
continue;
if(m_enableYAxis)
{
if (sampleShown > 0) {
painter->save();
pen.setWidth(1);
pen.setColor(QColor(0, 33, 0));
painter->setPen(pen);
painter->drawLine(QPointF(this->mainRect().x(), _y), QPointF(this->mainRect().x() + realWidth - 1, _y));
painter->drawLine(QPointF(this->mainRect().x(), this->mainRect().height() / 2),
QPointF(this->mainRect().x() + realWidth - 1, this->mainRect().height() / 2));
painter->restore();
}
}
}
for (int i = 1; i < count; i++) {
int value = -yAxisSkip * i;
float _y = y0 + yAxisSkip * fdy * i;
qreal _x0 = this->mainRect().x() - 6;
qreal _x1 = this->mainRect().x() - 1;
painter->drawLine(QPointF(_x0, _y), QPointF(_x1, _y));
_drawTextFunc(painter, value, _x0, _y, this->mainRect().top(), this->mainRect().bottom());
if (m_enableYAxis) {
if (sampleShown > 0) {
painter->save();
pen.setWidth(1);
pen.setColor(QColor(0, 33, 0));
painter->setPen(pen);
painter->drawLine(QPointF(this->mainRect().x(), _y), QPointF(this->mainRect().x() + realWidth - 1, _y));
painter->restore();
}
}
}
}
if (m_enableXAxis) {
//绘制网格
painter->save();
pen.setWidth(1);
pen.setColor(QColor(0, 33, 0));
painter->setPen(pen);
for (int var = 0; var < 8; ++var) {
qreal x = this->mainRect().width() / (qreal)8 * var;
painter->drawLine(QLineF(x, this->mainRect().top(), x, this->mainRect().bottom()));
}
painter->restore();
}
}
QRectF AudioWaveItem::rect() const
{
return boundingRect();
}
QRectF AudioWaveItem::mainRect() const
{
QRectF mainRect = this->rect().adjusted(m_margins.left(), m_margins.top(), -1 * m_margins.right(), -1 * m_margins.bottom());
return mainRect;
}
- 在void updateAudioData()，主要是将录音数据可视化，主要是将一段区间内的数据按绘制区间分块，取该区间的最大值（对应波形图上半区）或最小值（对应波形图下半区），比如在采样频率为16k，采样位宽16bit，双通道的音频数据来说，一秒钟的数据就为32k个采样点，将这么多的采样点分块（比如绘制区域为500个像素点——通过mainRect().width可以获取），那么就取每32k/500=640个采样点去计算极值；当然也可以每个像素点对应一个采样点，但是这样有很大几率绘制出来是一个曲线
- void drawGrid()这一块没什么好讲的，主要是将绘制区域分块，然后用painter.drawline()和painter.drawText()绘制出来
#include
#include
#include
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
qmlRegisterType("VoiceRecord", 1, 0, "AudioWaveItem");
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
在main函数需要主要的是需要将AudioWaveItem注册到qml中
qmlRegisterType
同时在qml中引用
import VoiceRecord 1.0
效果截屏
WaveRecord.gif
工程下载地址：
Qt+qml 麦克风采集生成波形图（二）—— 工程代码下载